figma-extract

Extract Figma node trees, design tokens, and assets into a local project directory.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#design-system #Figma #Automation #design-tokens #asset-extraction #Migration

One-click install

npx skills add https://github.com/nexu-io/open-design --skill figma-extract

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: figma-extract
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/atoms/figma-extract
Command: npx skills add https://github.com/nexu-io/open-design --skill figma-extract

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the friction of manual design-to-code handoff by automating the conversion of Figma design files into a structured, machine-readable format that developers can immediately use for implementation.

Core Features & Use Cases

Canonical Tree Extraction: Converts Figma node structures into a standardized JSON tree for downstream processing.
Token Mapping: Automatically lifts color, typography, and spacing tokens from design files.
Asset Export: Rasterizes and exports leaf nodes as web-ready assets (PNG, SVG, WebP).
Use Case: Use this to migrate a design system from Figma into a new codebase, ensuring that all design tokens and component structures are accurately captured without manual inspection.

Quick Start

Run the figma-extract skill by providing the target Figma file URL and your OAuth token to generate the project snapshot.

Frequently Asked Questions about figma-extract

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

FAQPage Schema

How do I extract design tokens from Figma?▼

The figma-extract skill automatically parses design tokens including colors, typography, and spacing when it processes the Figma file. These are saved into a tokens.json file within your project directory.

What happens if the Figma file has unsupported node types?▼

Unsupported node types are not dropped silently; they are recorded in the meta.json file under an unsupportedNodes array, allowing you to audit and address any gaps in the extraction.

Does this skill store my Figma OAuth token?▼

No, the daemon does not store your Figma OAuth token in SQLite or any persistent storage. The token is routed through the oauth-prompt surface specifically for the extraction process.

How can I handle component instances in the extracted tree?▼

The skill records componentRef links for component instances rather than treating them as duplicates. This allows downstream tools like token-map to perform accurate de-duplication.