name: figma-design
version: 1.1.0
description: "[Design & Content] Extract design specifications from Figma designs using MCP server. Triggers on Figma URLs, design context extraction, or design-to-code workflows. Formerly also known as "figma-extract"."
infer: true
allowed-tools: Read, mcp__figma__get_file, mcp__figma__get_file_nodes
Figma Design Context Extraction
Summary
Goal: Extract design specifications (dimensions, layout, colors, typography) from Figma designs via MCP server for implementation.
| Step |
Action |
Key Notes |
| 1 |
Identify Figma URLs |
Parse node-id from URL, convert hyphen to colon for API |
| 2 |
Extract node data |
Use mcp__figma__get_file_nodes (preferred over full file) |
| 3 |
Summarize design context |
Dimensions, layout, colors, typography, component structure |
| 4 |
Token budget management |
Single node: 500-2K tokens; AVOID full file (50K+) |
Key Principles:
- Always request specific nodes, never full files unless absolutely necessary
- Convert URL
node-id format (hyphen) to API format (colon): 1-3 -> 1:3
- Extract only essential properties; summarize children
Purpose
Extract design specifications from Figma designs using the Figma MCP server. Used during planning workflows to gather detailed design context for implementation.
Trigger
- Manually via
/figma-design command
- Automatically when reading PBI/design-spec files containing Figma URLs (via hook)
Prerequisites
- Figma MCP Server configured - See
.mcp.README.md
- Valid Figma URLs - Format:
https://figma.com/design/{file_key}/...?node-id={node_id}
Workflow
Step 1: Identify Figma URLs
Parse document content for Figma URLs:
https://figma.com/design/{file_key}/{name}?node-id={node_id}
URL Format Notes:
node-id in URL uses hyphen: 1-3- API expects colon format:
1:3
- Convert:
nodeId.replace('-', ':')
Step 2: Extract Node Data
# For specific node (preferred - token efficient)
mcp__figma__get_file_nodes file_key="{file_key}" node_ids="{node_id}"
# For full file (avoid unless necessary - high token usage)
mcp__figma__get_file file_key="{file_key}"
Step 3: Summarize Design Context
| Property |
Source |
| Dimensions |
absoluteBoundingBox.width/height |
| Layout |
layoutMode, itemSpacing, padding* |
| Colors |
fills[].color (r,g,b,a) |
| Typography |
style.fontFamily/fontSize/fontWeight |
| Children |
children[].name (component structure) |
Step 4: Token Budget Management
Budget Targets:
- Single node: 500-2,000 tokens
- Multiple nodes: <5,000 tokens total
- Full file: AVOID (can exceed 50K tokens)
Optimization: Always request specific nodes, extract only essential properties, summarize children.
Output Format
## Design Context: {Node Name}
**Dimensions:** {width}x{height}px
**Layout:** {layoutMode} | Spacing: {itemSpacing}px
**Colors:** {fill colors as rgba}
**Typography:** {fontFamily} {fontWeight} {fontSize}px
### Component Structure
- {child 1 name}
- {child 2 name}
### Key Design Decisions
- {extracted design pattern or decision}
Error Handling
| Error |
Resolution |
401 Unauthorized |
Check FIGMA_API_KEY in .env.local |
404 Not Found |
Verify file_key and node_id |
403 Forbidden |
Check file access permissions in Figma |
| Node not found |
Try parent node or verify URL |
Related
figma-extract (deprecated, use this skill instead)design-spec - Design specification creationux-designer - UI/UX design guidance
IMPORTANT Task Planning Notes (MUST FOLLOW)
- Always plan and break work into many small todo tasks
- Always add a final review todo task to verify work quality and identify fixes/enhancements
1---2name: figma-design-63description: Goal: Extract design specifications (dimensions, layout, colors, typography) from Figma designs via MCP server for implementation.4---56---7name: figma-design8version: 1.1.09description: "[Design & Content] Extract design specifications from Figma designs using MCP server. Triggers on Figma URLs, design context extraction, or design-to-code workflows. Formerly also known as "figma-extract"."10infer: true11allowed-tools: Read, mcp__figma__get_file, mcp__figma__get_file_nodes12---1314# Figma Design Context Extraction1516## Summary1718**Goal:** Extract design specifications (dimensions, layout, colors, typography) from Figma designs via MCP server for implementation.1920| Step | Action | Key Notes |21|------|--------|-----------|22| 1 | Identify Figma URLs | Parse `node-id` from URL, convert hyphen to colon for API |23| 2 | Extract node data | Use `mcp__figma__get_file_nodes` (preferred over full file) |24| 3 | Summarize design context | Dimensions, layout, colors, typography, component structure |25| 4 | Token budget management | Single node: 500-2K tokens; AVOID full file (50K+) |2627**Key Principles:**28- Always request specific nodes, never full files unless absolutely necessary29- Convert URL `node-id` format (hyphen) to API format (colon): `1-3` -> `1:3`30- Extract only essential properties; summarize children3132## Purpose3334Extract design specifications from Figma designs using the Figma MCP server. Used during planning workflows to gather detailed design context for implementation.3536## Trigger3738- Manually via `/figma-design` command39- Automatically when reading PBI/design-spec files containing Figma URLs (via hook)4041## Prerequisites42431. **Figma MCP Server configured** - See `.mcp.README.md`442. **Valid Figma URLs** - Format: `https://figma.com/design/{file_key}/...?node-id={node_id}`4546## Workflow4748### Step 1: Identify Figma URLs4950Parse document content for Figma URLs:51```52https://figma.com/design/{file_key}/{name}?node-id={node_id}53```5455**URL Format Notes:**56- `node-id` in URL uses hyphen: `1-3`57- API expects colon format: `1:3`58- Convert: `nodeId.replace('-', ':')`5960### Step 2: Extract Node Data6162```63# For specific node (preferred - token efficient)64mcp__figma__get_file_nodes file_key="{file_key}" node_ids="{node_id}"6566# For full file (avoid unless necessary - high token usage)67mcp__figma__get_file file_key="{file_key}"68```6970### Step 3: Summarize Design Context7172| Property | Source |73| -------------- | --------------------------------------- |74| **Dimensions** | `absoluteBoundingBox.width/height` |75| **Layout** | `layoutMode`, `itemSpacing`, `padding*` |76| **Colors** | `fills[].color` (r,g,b,a) |77| **Typography** | `style.fontFamily/fontSize/fontWeight` |78| **Children** | `children[].name` (component structure) |7980### Step 4: Token Budget Management8182**Budget Targets:**83- Single node: 500-2,000 tokens84- Multiple nodes: <5,000 tokens total85- Full file: AVOID (can exceed 50K tokens)8687**Optimization:** Always request specific nodes, extract only essential properties, summarize children.8889## Output Format9091```markdown92## Design Context: {Node Name}9394**Dimensions:** {width}x{height}px95**Layout:** {layoutMode} | Spacing: {itemSpacing}px96**Colors:** {fill colors as rgba}97**Typography:** {fontFamily} {fontWeight} {fontSize}px9899### Component Structure100- {child 1 name}101- {child 2 name}102103### Key Design Decisions104- {extracted design pattern or decision}105```106107## Error Handling108109| Error | Resolution |110| ------------------ | -------------------------------------- |111| `401 Unauthorized` | Check FIGMA_API_KEY in `.env.local` |112| `404 Not Found` | Verify file_key and node_id |113| `403 Forbidden` | Check file access permissions in Figma |114| Node not found | Try parent node or verify URL |115116## Related117118- `figma-extract` (deprecated, use this skill instead)119- `design-spec` - Design specification creation120- `ux-designer` - UI/UX design guidance121122---123124**IMPORTANT Task Planning Notes (MUST FOLLOW)**125- Always plan and break work into many small todo tasks126- Always add a final review todo task to verify work quality and identify fixes/enhancements
majiayu000