figma-analyzer

Extract design assets, metadata, and design tokens from Figma files via the REST API.

Updated Jan 10, 2026
One-click install
npx skills add https://github.com/Junior-Frontend-dev/Hi-u-ng --skill figma-analyzer-junior-frontend-dev
Or copy as Structured Prompt for Agentβ–Ό
Please help me install this Agent Skill.
Skill: figma-analyzer
Source: https://github.com/Junior-Frontend-dev/Hi-u-ng/tree/main/.claude/skills/figma-analyzer
Command: npx skills add https://github.com/Junior-Frontend-dev/Hi-u-ng --skill figma-analyzer-junior-frontend-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

πŸ’‘ This Skill requires requests, python-dotenv, and includes scripts (resource) components.

What problem does it solve?

Streamlines design research by programmatically extracting assets, metadata, and design tokens from Figma files through the official REST API.

Core Features & Use Cases

  • Asset Export: export frames/components as images in multiple formats and scales.
  • Metadata Extraction: capture file structure, node properties, and version history.
  • Design Token Extraction: discover color, typography, and effect styles from published designs.
  • Use Case: accelerate UI research by pulling assets and specs from multiple files for handoffs to engineering and design teams.

Quick Start

Run the Figma Analyzer with a target Figma URL and a valid access token to export assets and metadata.

Frequently Asked Questions about figma-analyzer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design assets and metadata from Figma files via REST API?β–Ό

You can extract Figma assets and metadata by using a script that calls the Figma REST API with a Personal Access Token. It exports frames as images and catalogs file structure, node properties, and styles across multiple files.

Can I export Figma frames as images in different formats and scales?β–Ό

Yes, Figma frame export supports configurable image formats and scales. The extraction process pulls frames and components from target files using the REST API and saves them in your specified export settings.

How do I extract design tokens like color and typography styles from a Figma file?β–Ό

Design token extraction discovers color, typography, and effect styles from published Figma designs. By querying the file structure and node properties through the REST API, it captures these styles for UI handoffs.

Do I need a Figma Personal Access Token to extract file structure and node properties?β–Ό

Yes, a Figma Personal Access Token is required for authentication. The script includes retry logic and can automatically discover your token across environment variables and configuration files.

What is the best way to automate UI research and asset export across multiple Figma files?β–Ό

Automating UI research involves programmatically extracting assets, metadata, and design tokens from multiple Figma files. This streamlines design research and accelerates UI handoffs to engineering and design teams.

Why does Figma API metadata extraction fail or timeout during asset export?β–Ό

Figma API extraction can fail due to rate limits or network issues. The script addresses this by implementing retry logic to ensure reliable asset export and metadata cataloging when querying the REST API.