Figma Design Context Extraction

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:

code

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

code

# 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

markdown

## 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

•figma-extract (deprecated, use this skill instead)
•design-spec - Design specification creation
•ux-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