Figma Extraction
Extract design specifications from Figma files using MCP integration.
When to Use
- Figma URL provided for design extraction
- Need design tokens from Figma
- Converting Figma to implementation spec
Pre-Workflow
Activate Skills
- Activate
design-specskill for design extraction best practices
Arguments
| 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 |
Workflow
- 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]+)
- Validate MCP
- Check if Figma MCP tools available - If not: return error with setup instructions
- 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
- 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
- Format Output
- markdown: Tables matching design-spec template Section 7 - json: Structured object for programmatic use
- Return Result
- Save extraction output to team-artifacts/designs/{YYMMDD}-figma-extract-{feature}.md - Success: formatted specs - Partial: specs with warnings about missing data - Failed: error message with fallback suggestion
URL Format
https://www.figma.com/design/{fileKey}/{fileName}?node-id={nodeId}Output Format (markdown)
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 Handling
| 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." |
Configuration Defaults
| 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 |
Example
/figma-extract https://www.figma.com/design/ABC123/MyDesign?node-id=1:2Related
- Role Skill:
ux-designer - Used by:
/design-spec - MCP: Requires figma MCP tools
IMPORTANT Task Planning Notes
- 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