Skip to content
Skillpedia
Interfaces (UI/UX)101k · #525

figma-extract

Helps your agent grab the design and assets from a Figma file. It organizes everything in your project for easy use.

What it does

This tool takes a Figma file and saves its core information to your computer. It extracts the design structure, styles (like colors and fonts), and images in an organized format.

When to use it

  • ✓When you want a local copy of your Figma design.
  • ✓When preparing a project to use Figma styles and images elsewhere.
  • ✓To create an official record of your design at a specific point in time.

Example of what to ask your AI

“Save my Figma design into an organized file.”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/nexu-io/open-design/blob/main/plugins/_official/atoms/figma-extract/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/nexu-io/open-design/blob/main/plugins/_official/atoms/figma-extract/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
How it works

You provide the Figma file link and special permission (OAuth token). The tool then downloads everything and organizes it into folders on your computer.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add nexu-io/open-design --skill figma-extract

Or download just the file:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/atoms/figma-extract/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

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

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

FAQ

What are 'design tokens'?

These are the basic styles of your design, like the exact colors used, font sizes, and spacing between elements.

What happens if the Figma file is empty or the permission expires?

The tool will notify you with a clear error so you can fix the permission or choose a different file.

Does the tool try to guess the design if it can't access Figma?

No, it never invents information. If something goes wrong, it asks you to fix it or choose another file.

Details

Original description by the author

Pull a Figma file's node tree, design tokens, and embedded assets into the project cwd as a structured snapshot.

repo: nexu-io/open-design

Popularity

GitHub stars
101k
Ranking position
#525
License
Apache-2.0
Updated
10/16/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills