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
Quick Reference
Workflow
- Parse Figma URL (validate format)
- Call MCP figma tools
- Extract hierarchy (components, frames)
- Extract design tokens (colors, text styles)
- Return structured output
- Used by
/design-specfor full spec
URL Format
https://www.figma.com/design/{fileKey}/{fileName}?node-id={nodeId}
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 |
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