figma-extract

• Figma URL provided for design extraction
• Need design tokens from Figma
• Converting Figma to implementation spec

Activate Skills

• Activate design-spec skill for design extraction best practices

| Arg | Required | Default | Description |

| ------- | -------- | -------- | -------------------- |

| url | Yes | - | Figma design URL |

| output | No | markdown | markdown \| json |

| depth | No | 5 | Hierarchy depth 1-10 |

| timeout | No | 30 | Seconds |

1. Parse URL

- Extract file key from URL

- Extract node ID if present (?node-id=X:Y)

- Pattern: figma.com/(design|file)/([a-zA-Z0-9]+)

1. Validate MCP

- Check if Figma MCP tools available

- If not: return error with setup instructions

1. Extract via MCP

- Call Figma MCP with file key

- If node ID: filter to specific node

- Apply timeout (default 30s) - abort if exceeded

- Limit component depth (default 5 levels)

- Handle rate limit errors gracefully

1. Transform Response

Extract and structure:

- Colors: fills, strokes -> hex/rgba table

- Typography: text nodes -> font/size/weight table

- Spacing: auto-layout -> padding/gap table

- Components: node tree -> hierarchy text

1. Format Output

- markdown: Tables matching design-spec template Section 7

- json: Structured object for programmatic use

1. Return Result

- Success: formatted specs

- Partial: specs with warnings about missing data

- Failed: error message with fallback suggestion

```

https://www.figma.com/design/{fileKey}/{fileName}?node-id={nodeId}

```

Colors

| Name | Hex | Usage |

| ------- | ------- | -------------- |

| Primary | #3B82F6 | Buttons, links |

Typography

| Element | Font | Size | Weight |

| ------- | ----- | ---- | ------ |

| Heading | Inter | 24px | 600 |

Spacing

| Element | Padding | Gap |

| ------- | ------- | ---- |

| Card | 16px | 12px |

Component Hierarchy

```

Frame "Card"

+-- Image "avatar"

+-- Text "name"

+-- Frame "actions"

+-- Button "edit"

+-- Button "delete"

```

| Error | Message |

| ---------------- | ----------------------------------------------------------------------------------------- |

| No MCP | "Figma MCP not configured. See .claude/docs/figma-setup.md" |

| Invalid URL | "Could not parse Figma URL. Expected: figma.com/design/{key}" |

| Timeout | "Figma extraction timed out after {timeout}s. Try with specific node-id or reduce depth." |

| Rate limited | "Figma API rate limit reached. Try again later." |

| Not found | "Figma file not found or not accessible with current token" |

| Too deep | "Component hierarchy exceeds max depth ({depth}). Results truncated." |

| Setting | Value | Rationale |

| ------------------- | ---------- | ------------------------- |

| Max Component Depth | 5 levels | Prevents token bloat |

| Extraction Timeout | 30 seconds | Prevents blocking |

| Max Colors | 20 | Focus on primary palette |

| Max Typography | 10 | Focus on main text styles |

```bash

/figma-extract https://www.figma.com/design/ABC123/MyDesign?node-id=1:2

```

• Role Skill: ux-designer
• Used by: /design-spec
• MCP: Requires figma MCP tools

• Always plan and break many small todo tasks
• Always add a final review todo task to review the works done at the end to find any fix or enhancement needed