Skip to content
Get packs

Figma File Extractor

Pulls a Figma design's structure, tokens and assets into a local project snapshot

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

This skill lets an AI agent connect to a Figma design file (using a Figma login token you authorize) and save its layout tree, color/typography/spacing tokens, and exported images into a folder in your project as structured JSON and image files. Other steps in a design-to-code migration pipeline then read those files, so the agent works from the real design instead of guessing from screenshots. It is one stage of a larger figma-migration workflow and is described as failing rather than inventing data when authentication or the file is bad.

Great for

  • Designers or front-end developers migrating a Figma design into code in an open-design project
  • Teams who want a reproducible, auditable snapshot of a Figma file's nodes and tokens
  • Anyone building a multi-step figma-migration pipeline that needs a canonical extract to start from

Skip it if

  • Quick one-off questions about a Figma file, since it sets up a full extraction workflow and needs OAuth setup first (overkill and slower)
  • Use with confidential designs in an environment where you have not reviewed where the snapshot files are stored, because the output includes full node data and exported assets written into the project folder

Try asking

  • “Extract the Figma file at this URL into the project so we can start the migration: https://www.figma.com/file/...”
  • “Snapshot the design tokens and exported assets from my Figma file into figma/ in this project”
  • “Re-run the Figma extract for node 12:34 and tell me which node types were unsupported”
Step-by-step guide: how to use Figma File ExtractorInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    figma-extract.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip figma-extract.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip figma-extract.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Authorize Figma through the built-in OAuth connector rather than pasting a raw token into chat, so the daemon handles it as documented.
  • Check figma/meta.json for unsupportedNodes[] after each run to see which parts of the design were not captured.
  • Make sure the Figma file is not empty and your token has not expired, otherwise the run will abort with an error.

What's inside

  • open-design.json
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.