Figma extract
Skill nexu-io/open-design/plugins/_official/atoms/figma-extract
🎨 The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen & 20+ CLIs via BYOK.
npx -y skills add nexu-io/open-design --skill figma-extractAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
What its author says it does
Copied from the file, not written here
Pull a Figma file's node tree, design tokens, and embedded assets into the project cwd as a structured snapshot.
SKILL.md
2.4 KB, as published. Nobody here has run it
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
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.