New to Claude Skills? Learn how to install them →

nexu-io on GitHub

Figma Extract

Free

Efficiently pull design data from Figma into your project.

by nexu-io84.9k stars on nexu-io/open-design
2 views
Updated Aug 10, 2026
Get this skill

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 source

1. Install with the skills CLI

npx skills add nexu-io/open-design/figma-extract --agent claude-code

2. 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-io

Figma 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

SourceRequiredNotes
Figma file URL or node-idyesProvide via the figma-oauth GenUI surface or od plugin apply --input fileUrl=…
Figma OAuth tokenyesRouted 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 componentRef links so token-map can 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