oimiragieo 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_TOKENenv 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
# Get all published styles
curl -s -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY/styles" | jq '.meta.styles'
Step 2: Map to CSS Variables
/* Colors */
:root {
--color-primary: #2563eb; /* From Figma: Primary/500 */
--color-secondary: #7c3aed; /* From Figma: Secondary/500 */
--color-surface: #ffffff; /* From Figma: Surface/Default */
}
/* Typography */
:root {
--font-heading: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--text-xl: 1.25rem; /* From Figma: Heading/XL */
--text-base: 1rem; /* From Figma: Body/Base */
--leading-tight: 1.25;
--leading-normal: 1.5;
}
/* Spacing */
:root {
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-4: 1rem; /* 16px */
--space-8: 2rem; /* 32px */
}
Step 3: Auto-Layout to CSS Mapping
| Figma Auto-Layout | CSS Equivalent |
|---|---|
| Horizontal | display: flex; flex-direction: row; |
| Vertical | display: flex; flex-direction: column; |
| Space between | justify-content: space-between; |
| Packed (start) | justify-content: flex-start; |
| Gap: 16 | gap: 1rem; |
| Padding: 16,24 | padding: 1rem 1.5rem; |
| Fill container | flex: 1; or width: 100%; |
| Hug contents | width: fit-content; |
Step 4: Component Inspection
For each Figma component, extract:
- Name - Component name and variant properties
- Structure - Child node tree (frames, text, images)
- Styles - Applied color, text, and effect styles
- Constraints - Responsive behavior rules
- Variants - All component variants and their properties
Iron Laws
- ALWAYS extract design tokens before building components — building without tokens leads to hardcoded values that break when the design system updates.
- NEVER hardcode Figma colors/spacing — always map to CSS variables or design token constants that reference the Figma source.
- ALWAYS map Figma auto-layout to CSS flexbox — auto-layout is a direct 1:1 mapping to flexbox; using other layout methods loses design intent.
- NEVER export raster images when SVG is available — SVGs scale cleanly and reduce bundle size; only use PNG/JPEG for photographs.
- ALWAYS preserve Figma component naming in code component names — divergent naming breaks the design-development feedback loop.
Anti-Patterns
| Anti-Pattern | Why It Fails | Correct Approach |
|---|---|---|
| Hardcoded hex colors | Breaks on design system update | Use CSS variables mapped from Figma tokens |
| Ignoring auto-layout | Layout doesn't match design | Map auto-layout 1:1 to flexbox/grid |
| Pixel-perfect obsession | Wastes time, ignores responsive | Match design intent, not exact pixels |
| Skipping component variants | Missing states (hover, disabled) | Extract ALL Figma variants |
| Manual token extraction | Error-prone, doesn't scale | Use Figma REST API for programmatic extraction |
Figma MCP Server Tools (figma/mcp-server-guide)
When the official Figma MCP server is running, these 12 tools are available:
| Tool | Purpose |
|---|---|
get_design_context |
Get full design context for a file/node (components, styles, layout) |
generate_figma_design |
Generate new designs from natural language description |
get_variable_defs |
Extract all design tokens (colors, spacing, typography variables) |
get_screenshot |
Capture rendered screenshot of a frame/component |
code_connect_map |
Map Figma components to their code counterparts |
create_design_system_rules |
Auto-generate design system documentation |
get_figjam |
Access FigJam board content and sticky notes |
generate_diagram |
Generate Figma diagram from Mermaid input |
get_components |
List all published components in a file |
get_styles |
Extract all defined styles (color, text, effect) |
export_assets |
Export assets as PNG/SVG/PDF with scale options |
get_annotations |
Retrieve design annotations and spec notes |
get_metadata |
Get XML layer representation of a file/node for programmatic parsing |
whoami |
Get current user identity, plan tier, and available seat count |
MCP Setup: Install Figma Desktop app -> Settings -> Enable MCP server
Auth: Uses active Figma session (no API key needed for local MCP)
Key workflow: get_design_context -> code_connect_map -> export_assets for design-to-code
Identity check: Use whoami to verify plan tier before calling enterprise-only tools
Memory Protocol (MANDATORY)
Before starting:
Read .claude/context/memory/learnings.md
After completing:
- New pattern ->
.claude/context/memory/learnings.md - Issue found ->
.claude/context/memory/issues.md - Decision made ->
.claude/context/memory/decisions.md
ASSUME INTERRUPTION: If it's not in memory, it didn't happen.