figma-extract

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

nexu-io/open-design8 installsApache-2.0Synced Aug 26

Works with

Claude CodeCursorCodex CLIGitHub CopilotGemini CLI
---
name: figma-extract
description: Pull a Figma file's node tree, design tokens, and embedded assets into the project cwd as a structured snapshot.
license: Apache-2.0
---

# 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:

```text
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

Reserved id, prompt-only fragment in v1. The Figma REST + node-walk
implementation lands in spec §16 Phase 6; until then plugins that
declare this atom rely on their bundled MCP server (typically the
community `@community/figma-mcp`) for the actual fetch.

More Design Systems skills

stitch-design-taste

leonxlnx/taste-skill

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

265.6k

figma

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

101.8k

image

coreyhaines31/marketingskills

When the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics, product mockups, profile banners, listing visuals, or brand assets. Also use when the user mentions 'AI image generation,' 'generate an image,' 'create a graphic,' 'product mockup,' 'hero image,' 'social media graphic,' 'banner image,' 'cover photo,' 'profile banner,' 'listing screenshot,' 'Flux,' 'Flux Kontext,' 'Midjourney,' 'DALL-E,' 'GPT Image,' 'ChatGPT Images,' 'Ideogram,' 'Gemini image,' 'Nano Banana,' 'Recraft,' 'Stable Diffusion,' 'Canva,' 'Figma,' 'image optimization,' 'compress images,' 'WebP,' or 'OG image.' Use this for general-purpose marketing image creation and optimization. For paid ad image creative and platform-specific ad specs, see ad-creative. For video production, see video.

62.9k

← All Design Systems skills

Check your AI visibility

One URL in, a 0–100 score and the exact fixes out.

RUN THE CHECK

Browse all the tools

15 tools across six categories
13 of them never send your data anywhere

Free · No signup · No trial clock

SEE THE DIRECTORY