Ingest Figma

Name: Ingest Figma
Author: bluzir

bluzir/claude-code-design

39 installs
98 repo stars
Updated April 20, 2026
bluzir/claude-code-design

Ingest-figma is a Claude Code skill that pulls design tokens and frame structure from a Figma URL via the Figma REST API.

About

Ingest-figma extracts design tokens and frame structure from a Figma file using the Figma REST API, writing colors, text styles, and components to a tokens.json. Without a FIGMA_TOKEN it falls back to parsing an exported SVG. A developer runs it to root new design work in an existing Figma file.

Pulls design tokens and frame structure from a Figma URL via the Figma REST API
Extracts colors, shadows, text styles, and component sets into a tokens.json
SVG-import fallback when no FIGMA_TOKEN is available

Ingest Figma by the numbers

39 all-time installs (skills.sh)
Ranked #1,285 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
Data as of Aug 1, 2026 (Skillselion catalog sync)

At a glance

ingest-figma capabilities & compatibility

Free with a personal FIGMA_TOKEN (Figma free tier 50 req/min)

Capabilities: ingest github · ingest screenshot · make deck · interactive prototype
Works with: figma
Use cases: ui design · web design
Pricing: Bring your own API key

From the docs

What ingest-figma says it does

Pull design tokens + frame structure from a Figma URL via the Figma REST API. Requires FIGMA_TOKEN env var.

SKILL.md

Extract design system from a Figma file using the REST API. Falls back to SVG-import if no token available.

SKILL.md

npx skills add https://github.com/bluzir/claude-code-design --skill ingest-figma

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/bluzir/claude-code-design/ingest-figma.svg)](https://skillselion.com/skills/bluzir/claude-code-design/ingest-figma)

Installs	39
repo stars	★ 98
Last updated	April 20, 2026
Repository	bluzir/claude-code-design ↗

What it does

Pull colors, text styles, and components from a Figma URL into a tokens.json to seed a design system or artifact.

When should I use this skill?

when a user gives a Figma URL and wants design work rooted in that file

What you get

A tokens.json of colors, text styles, and components extracted from the Figma file.

figma tokens.json

By the numbers

2 API requests per frame (nodes + styles)
Figma free tier 50 req/min

Files

SKILL.mdMarkdownGitHub ↗

Ingest Figma

Extract design system from a Figma file using the REST API. Falls back to SVG-import if no token available.

Preflight

1. Bash(test -n "$FIGMA_TOKEN" && echo has-token || echo no-token) — check env var 2. If no-token:

Tell user: "No FIGMA_TOKEN found. Two options: (a) Get a token at https://www.figma.com/developers/api#access-tokens and export FIGMA_TOKEN=... in your shell, or (b) export the frame as SVG in Figma (Right-click frame → Copy as → Copy as SVG) and paste the file to artifacts/ingested/ — I'll parse the SVG."
Stop; wait for user response.

Parse URL

Figma URL format: https://www.figma.com/(file|design|proto)/<fileKey>/<name>?node-id=<nodeId>

Extract:

fileKey — alphanumeric after /file/ or /design/
nodeId — query param node-id (URL-decoded, often contains :)

Steps (token path)

1. Fetch file nodes:

   Bash(curl -H "X-FIGMA-TOKEN: $FIGMA_TOKEN" \
     "https://api.figma.com/v1/files/<fileKey>/nodes?ids=<nodeId>&depth=2" \
     -o /tmp/figma-<ts>.json)

2. Fetch style definitions:

   Bash(curl -H "X-FIGMA-TOKEN: $FIGMA_TOKEN" \
     "https://api.figma.com/v1/files/<fileKey>/styles" \
     -o /tmp/figma-styles-<ts>.json)

3. Parse JSON:

Colors: walk document.children → find fills with type === 'SOLID' → extract color {r,g,b} → convert to hex
Effects (shadows): find effects with type === 'DROP_SHADOW'
Text styles: find style with fontFamily, fontSize, fontWeight, lineHeightPx
Components: traverse for type === 'COMPONENT' and type === 'COMPONENT_SET'
Local styles from /styles: styles endpoint returns named variables

4. Write:

   artifacts/ingested/figma-<fileKey>-tokens.json

Same schema as ingest-github, plus "source": { "figma_url": "...", "file_key": "...", "node_id": "..." }.

5. Offer next step:

"Extracted X colors, Y text styles, Z components from Figma. Saved to artifacts/ingested/figma-<fileKey>-tokens.json."
Continue with /create-design-system or start artifact skill.

Steps (SVG fallback path)

1. User drops SVG file in artifacts/ingested/ 2. Read the SVG content 3. Extract fill="#..." / stroke="#..." / style="...color..." attributes 4. Recognize <text> elements for font info (font-family, font-size, font-weight) 5. Build partial tokens.json with "source": { "svg": "<path>" } + confidence flags 6. Note: SVG export loses component structure, only visual primitives