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

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