| name | figma |
| description | Figma design-to-code workflow. Read Figma files, inspect components, extract design tokens, and translate designs to implementation. Use when working with Figma designs, extracting styles, or building design systems. |
| version | 1.0.0 |
| model | sonnet |
| invoked_by | both |
| user_invocable | true |
| tools | ["Read","Write","Bash","WebFetch"] |
| agents | ["frontend-expert","styling-expert","ui-components-expert"] |
| category | design |
| tags | ["figma","design","ui","design-tokens","design-system","components"] |
| best_practices | ["Extract design tokens before building components","Use Figma REST API for programmatic access","Map Figma auto-layout to CSS flexbox/grid","Preserve design intent over pixel-perfect matching"] |
| error_handling | graceful |
| streaming | supported |
| verified | false |
| source | builtin |
| trust_score | 100 |
| provenance_sha | 835ae2fba8301b6f |
Figma
Extract design information from Figma files for implementation. Covers design token extraction, component inspection, and design-to-code translation.
When to Use
- Translating Figma designs into frontend code
- Extracting design tokens (colors, typography, spacing) from Figma
- Inspecting Figma component structure for implementation planning
- Building or updating a design system from Figma sources
- Mapping Figma auto-layout properties to CSS
Prerequisites
- Figma Personal Access Token (set as
FIGMA_ACCESS_TOKEN env var)
- Figma file URL or file key
Core API Endpoints
Get File
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY"
Get File Nodes (specific components)
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY/nodes?ids=NODE_ID1,NODE_ID2"
Get Image Exports
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/images/FILE_KEY?ids=NODE_ID&format=svg"
Get File Styles
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY/styles"
Get File Components
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY/components"
Design Token Extraction Workflow
Step 1: Fetch File Styles
curl -s -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY/styles" | jq '.meta.styles'
