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

Quick Reference

Workflow

1. Parse Figma URL (validate format)
2. Call MCP figma tools
3. Extract hierarchy (components, frames)
4. Extract design tokens (colors, text styles)
5. Return structured output
6. Used by /design-spec for full spec

URL Format

https://www.figma.com/design/{fileKey}/{fileName}?node-id={nodeId}

Arguments

Output Structure

## Component: {Name}

### Hierarchy
- Frame: {name}
  - Component: {name}
    - Text: {content}

### Design Tokens
#### Colors
- Primary: #XXXXXX
- Secondary: #XXXXXX

#### Typography
- Heading: {font} {size}/{lineHeight}
- Body: {font} {size}/{lineHeight}

#### Spacing
- Gap: {value}px

Related

• Role Skill: ux-designer
• Command: /figma-extract
• Used by: /design-spec
• MCP: Requires figma MCP tools

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