How to use the Figma File Extractor agent skill (figma-extract)

What is an agent skill, and what does figma-extract do?

An agent skill is a folder containing a SKILL.md file and supporting files that an AI agent can load to perform a specific task. The figma-extract skill covers one stage of a design-to-code process: it reads a Figma file and writes a snapshot of it to disk.

The skill pulls the file's node tree, color, typography and spacing tokens, and rasterised exports of the nodes the file marks for export. Those files are then used by later stages of the figma-migration workflow, so the agent works from the real design rather than guessing from screenshots.

• figma/tree.json: the canonical node tree (id, type, parent, children, box, fills, text).
• figma/tokens.json: color, typography and spacing tokens taken from the file.
• figma/assets/: exported images named <node-id>.<png|svg|webp>.
• figma/meta.json: file URL, version, last modified time, export time and a digest.

Install the figma-extract skill

Download the ZIP for the skill from this page and unzip it. You can install it in one of two places, depending on whether you want it available everywhere or only in one project.

For a personal install across projects, unzip it into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder.

If you use the Claude apps instead, upload the skill under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/
• Project only: .claude/skills/ inside your project folder
• Claude apps: Settings → Capabilities → Skills, then upload

Set up what the skill needs before running it

The skill needs a Figma file URL or node-id, and a Figma OAuth token that you authorize through the connector flow with connectorId 'figma'. The agent should prompt you for this authorization; the daemon does not store the token in SQLite.

The skill's runner lives in the open-design daemon (apps/daemon), so the daemon must be available. It also needs network access to the Figma REST API. If the token has expired or the file is empty, the run stops with an error and you need to fix authentication or choose a different file.

• A Figma file URL or node-id
• A Figma OAuth token, authorized via the 'figma' connector
• The open-design daemon (runner in apps/daemon)
• Network access to the Figma REST API

How to trigger the skill with a natural request

You do not need special syntax. Describe what you want in plain language and include the Figma file link. The agent should match the request to this skill because its description covers pulling a file's node tree, tokens and assets into the project.

If you are working inside an open-design plugin workflow, the source also shows a direct command form: od plugin apply --input fileUrl=… . Use it only if your setup supports it.

• "Extract the node tree and design tokens from this Figma file into my project: [URL]"
• "Snapshot the assets and tokens from this Figma frame so the migration can start from it: [URL]"
• "Pull the Figma file at [URL] into figma/ in this project and tell me if any node types were skipped."

Check the output and audit gaps

When the run finishes, look at figma/tree.json first. It is the file that every later stage reads. Then check figma/meta.json for unsupported nodes. The skill records node types it could not handle in meta.json under unsupportedNodes, so you can see exactly what was not captured.

Component instances are kept as references (componentRef links) rather than duplicated, so a later token-mapping step can remove duplicates at the right point.

• Confirm figma/tree.json exists and is not empty.
• Review unsupportedNodes in figma/meta.json.
• Check figma/assets/ for the exports you expected.

Safety notes: scripts, network and stored files

This skill runs scripts and uses the network. It sends your OAuth-authorized requests to the Figma REST API and writes full node data and exported assets into your project folder.

If the design is confidential, review where the figma/ folder is stored, and who can access it, before running the skill. Do not commit the snapshot to a shared repository unless you have decided that is acceptable.

• The skill calls the Figma REST API using your authorized token.
• Output includes full node data and exported images in the project folder.
• The skill is designed to stop and ask you to re-authorize rather than invent node data.