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-spec skill 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:2
Related
-
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