majiayu000 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
- Save extraction output to
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