figma-cli

Read Figma .fig files — extract design tokens, components, and styles as JSON for agent use.

No auth, no network, no Figma running required. Parse directly from a local .fig file.

Setup

bun install

Getting a .fig file

In Figma desktop: File → Save local copy... → saves a .fig file to disk.

Usage

# List all pages
bun run src/index.ts pages design.fig

# Extract design tokens (variables: colors, spacing, typography)
bun run src/index.ts tokens design.fig
bun run src/index.ts tokens design.fig --page "Tokens"

# List components
bun run src/index.ts components design.fig
bun run src/index.ts components design.fig --page "Components"

# Full inspection dump (tokens + components + styles)
bun run src/index.ts inspect design.fig --pretty
bun run src/index.ts inspect design.fig --page "All"

# Pipe to agent
bun run src/index.ts inspect design.fig | your-agent-skill

Output

All commands output JSON to stdout. Errors go to stderr.

tokens output

{
  "collections": [
    {
      "id": "...",
      "name": "Colors",
      "modes": ["Light", "Dark"],
      "defaultMode": "Light",
      "variables": [
        {
          "id": "...",
          "name": "color/primary/500",
          "type": "COLOR",
          "values": {
            "Light": { "r": 0.2, "g": 0.5, "b": 1, "a": 1 },
            "Dark": { "r": 0.3, "g": 0.6, "b": 1, "a": 1 }
          }
        }
      ]
    }
  ]
}

components output

[
  { "id": "1:23", "name": "Button", "type": "COMPONENT_SET", "width": 120, "height": 40 },
  { "id": "1:24", "name": "Card", "type": "COMPONENT", "width": 320, "height": 200 }
]

How it works

Parses Figma's .fig binary format using @open-pencil/core (MIT):

.fig file = ZIP archive
  └── canvas.fig → "fig-kiwi" header → Kiwi binary (NodeChange[]) → SceneGraph

No Figma API key, no network, no running app needed.

Reference

• https://github.com/silships/figma-cli
• https://github.com/dannote/figma-use