
Figma Extract
FreeEfficiently pull design data from Figma into your project.
Free · Opens the source repo
What Figma Extract does
Figma Extract is a tool designed for developers and designers who need to integrate design assets from Figma into their projects seamlessly. By providing a Figma file URL and an OAuth token, users can extract a structured snapshot of the design elements, including the node tree, design tokens, and embedded assets. This structured data is saved in a JSON format, making it easy to utilize in various downstream processes.
When you run Figma Extract, it generates several files under your project directory. The tree.json file contains a comprehensive representation of the Figma file's node hierarchy, detailing each node's ID, type, parent-child relationships, and visual properties. The tokens.json file captures critical design tokens such as colors, typography, and spacing, which are essential for maintaining design consistency across applications. Additionally, any assets marked for export are saved in a dedicated folder, allowing for easy access to images and graphics used in the design.
This skill is particularly useful for teams that follow a design-to-development workflow, as it bridges the gap between design and code. By automating the extraction of design data, it reduces manual work and the potential for errors when transferring assets from Figma to a codebase. The structured output also provides a clear reference for developers, enabling them to implement designs more accurately.
Figma Extract is not suitable for situations where a user needs to synthesize design elements from screenshots or when the OAuth token has expired. In such cases, the tool will abort the operation and prompt the user to rectify the issue. It's essential to have a valid Figma file and token for the skill to function correctly, ensuring a smooth and efficient extraction process.
When to use it
Use Figma Extract when you need to integrate design assets from Figma into your development workflow.
When not to use it
Avoid using it if you do not have access to a valid Figma file or OAuth token, as the tool requires both to function properly.
What you can build with it
Integrating Design Tokens
Use Figma Extract to pull design tokens directly from Figma, ensuring consistency in your application's styling.
Exporting Assets for Development
Quickly extract and export all necessary assets from a Figma file, streamlining the development process.
Creating a Design Inventory
Utilize Figma Extract to build a comprehensive inventory of design components and their properties for better project management.
How to install Figma Extract
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/figma-extract --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by nexu-ioFigma extract
Spec §10 / §21.3.1: the figma-migration scenario starts with a Figma
file URL + an OAuth token. This atom turns that pair into the
authoritative on-disk record subsequent stages (token-map,
generate, critique) operate on.
Inputs
| Source | Required | Notes |
|---|---|---|
Figma file URL or node-id | yes | Provide via the figma-oauth GenUI surface or od plugin apply --input fileUrl=… |
| Figma OAuth token | yes | Routed through oauth-prompt with oauth.route='connector' and connectorId='figma'; the daemon never stores the token in SQLite |
Output
The atom writes a deterministic, JSON-shaped extract under the project cwd:
project-cwd/
├── figma/
│ ├── tree.json # canonical node tree (id / type / parent / children / box / fills / text)
│ ├── tokens.json # color + typography + spacing tokens lifted off the file
│ ├── assets/ # rasterised exports of every leaf node that the file marks for export
│ │ └── <node-id>.<png|svg|webp>
│ └── meta.json # { fileUrl, version, lastModified, exportedAt, atomDigest }
figma/tree.json is the canonical pivot for every downstream atom.
figma/tokens.json is the input to token-map. assets/ is the
input to generate's media stage.
Convergence
The atom completes when figma/tree.json exists and is non-empty.
The until evaluator reads figma.tree.nodes >= 1; if the figma
file is empty or the OAuth token expired, the atom emits a clear
error event and the run aborts (the user fixes auth or picks a
different file).
Anti-patterns the prompt fragment forbids
- Synthesising a tree from screenshots when the OAuth path failed — always re-prompt the user; never make up node ids.
- Dropping unsupported node types silently; record them in
meta.json.unsupportedNodes[]so the human can audit gaps. - Treating component instances as duplicates; record
componentReflinks sotoken-mapcan de-duplicate at the right boundary.
Status
Implemented by the daemon runner in
apps/daemon/src/plugins/atoms/figma-extract.ts. It fetches and walks the
Figma REST tree, records unsupported nodes, lifts tokens, and rasterizes
supported assets.
Frequently asked questions about Figma Extract
Similar skills
Design System
Streamline design token management and presentation generation.
Visual Style
Create and apply portable visual design systems effortlessly.
Paperclip Design Guide
Build consistent, reusable UI components with ease.
Design Brief
Transform vague design requests into structured specs.
Token Map
Automate Figma and code token mapping to design systems.
Kami Landing
Create professional single-page documents effortlessly.
