---
title: "Figma to Code: Design Systems with Claude Code + MCP"
description: "Extract design tokens from Figma automatically. Generate component libraries. Keep design and code in sync. The MCP integration workflow."
pillar: "Claude Code"
level: "intermediate"
date: "2026-01-27"
url: "https://theglitch.ai/academy/claude-code/design-systems-code"
---

# Figma to Code: Design Systems with Claude Code + MCP

Extract design tokens from Figma automatically. Generate component libraries. Keep design and code in sync. The MCP integration workflow.


# Figma to Code: Design Systems with Claude Code + MCP

The traditional Figma-to-code workflow: Designer makes updates. Developer inspects. Developer manually transfers values. Something doesn't match. Back and forth.

The MCP workflow: Claude reads Figma directly. Extracts tokens automatically. Generates components that match. Design is the source of truth.

This guide covers the integration: connecting Figma MCP, extracting design tokens, generating component libraries, and keeping everything in sync.

> **The Glitch's Take:** "Design tokens in code should match Figma exactly. Manual transfer introduces drift. Automated extraction eliminates it."

---

## Who This Is For

- You work with design systems and component libraries
- You have a Figma file with defined styles
- You want to automate the Figma-to-code pipeline
- You're comfortable with Claude Code

## Who This Is NOT For

- You don't use Figma (other design tools need different approaches)
- You don't have defined styles/tokens (set these up first)
- You want pixel-perfect complex layouts (MCP is for tokens, not full pages)

---

## TL;DR

- **Figma MCP:** Claude Code plugin that reads Figma files
- **Design tokens:** Colors, typography, spacing extracted as code
- **Component generation:** Styles + structure = working components
- **Workflow:** Connect → Extract → Generate → Iterate
- **Benefit:** Single source of truth, no manual transfer drift

---

## Setting Up Figma MCP

### Step 1: Install the MCP Server

Figma MCP is a Model Context Protocol server that gives Claude access to Figma files.

```bash
# Install the Figma MCP server
npx @anthropic-ai/mcp-server-figma
```

Or add to your Claude Code configuration:

```json
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["@anthropic-ai/mcp-server-figma"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-token-here"
      }
    }
  }
}
```

### Step 2: Get Your Figma Token

1. In Figma, go to Settings → Account
2. Scroll to Personal Access Tokens
3. Generate a new token
4. Add to MCP configuration

### Step 3: Verify Connection

Open Claude Code and ask:

```
Can you read my Figma file?
URL: https://figma.com/file/[your-file-id]
```

Claude should describe the file structure, pages, and frames.

---

## Extracting Design Tokens

### What Are Design Tokens?

Design tokens are the foundational values of a design system:

- **Colors:** Primary, secondary, neutral palettes
- **Typography:** Font families, sizes, weights, line heights
- **Spacing:** Margins, padding, gaps
- **Border radius:** Corner roundness
- **Shadows:** Elevation effects

These live in Figma as styles. We extract them as code.

### The Extraction Prompt

```
Read the Figma file: [your-file-url]

Extract all design tokens and create style-tokens.ts with:

1. Colors
- All color styles with names and hex values
- Organize by category (primary, secondary, neutral, etc.)

2. Typography
- All text styles
- Include: fontFamily, fontSize, fontWeight, lineHeight, letterSpacing

3. Spacing
- Any defined spacing variables
- If not explicit, infer from common values used

4. Borders
- Border radius values
- Border widths and colors if defined

5. Shadows
- All effect styles (drop shadows, etc.)

Output format:
export const tokens = {
  colors: { ... },
  typography: { ... },
  spacing: { ... },
  borders: { ... },
  shadows: { ... }
}
```

### Example Output

Claude reads Figma and generates:

```typescript
// style-tokens.ts

export const tokens = {
  colors: {
    primary: {
      50: '#E6F0FF',
      100: '#CCE0FF',
      500: '#3B82F6',
      600: '#2563EB',
      900: '#1E3A8A',
    },
    secondary: {
      500: '#10B981',
      600: '#059669',
    },
    neutral: {
      0: '#FFFFFF',
      50: '#F9FAFB',
      100: '#F3F4F6',
      500: '#6B7280',
      900: '#111827',
    },
  },

  typography: {
    heading1: {
      fontFamily: 'Inter',
      fontSize: '48px',
      fontWeight: 700,
      lineHeight: 1.2,
      letterSpacing: '-0.02em',
    },
    heading2: {
      fontFamily: 'Inter',
      fontSize: '36px',
      fontWeight: 600,
      lineHeight: 1.3,
    },
    body: {
      fontFamily: 'Inter',
      fontSize: '16px',
      fontWeight: 400,
      lineHeight: 1.5,
    },
  },

  spacing: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    xl: '32px',
    xxl: '48px',
  },

  borders: {
    radius: {
      none: '0',
      sm: '4px',
      md: '8px',
      lg: '12px',
      full: '9999px',
    },
  },

  shadows: {
    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
  },
};
```

Single file. All tokens. Directly from Figma.

---

## Generating Components

### From Tokens to Components

Once tokens exist, generate components that use them:

```
Using the tokens from style-tokens.ts, create a Button component.

Requirements:
- Variants: primary, secondary, outline, ghost
- Sizes: sm, md, lg
- States: default, hover, disabled
- Use the design tokens for all values (no hardcoded colors/spacing)
- React component with TypeScript
- Include all props (variant, size, disabled, onClick, children)
```

### Example Output

```tsx
// Button.tsx
import { tokens } from './style-tokens';

type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
type ButtonSize = 'sm' | 'md' | 'lg';

interface ButtonProps {
  variant?: ButtonVariant;
  size?: ButtonSize;
  disabled?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
}

const variantStyles = {
  primary: {
    backgroundColor: tokens.colors.primary[500],
    color: tokens.colors.neutral[0],
    hoverBg: tokens.colors.primary[600],
  },
  secondary: {
    backgroundColor: tokens.colors.secondary[500],
    color: tokens.colors.neutral[0],
    hoverBg: tokens.colors.secondary[600],
  },
  // ... other variants
};

const sizeStyles = {
  sm: {
    padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
    fontSize: '14px',
  },
  md: {
    padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
    fontSize: '16px',
  },
  lg: {
    padding: `${tokens.spacing.md} ${tokens.spacing.lg}`,
    fontSize: '18px',
  },
};

export const Button = ({
  variant = 'primary',
  size = 'md',
  disabled = false,
  onClick,
  children,
}: ButtonProps) => {
  // Component implementation using tokens
};
```

Every value comes from tokens. Design changes in Figma → regenerate tokens → components update.

---

## Building Component Libraries

### The Workflow

For a full component library:

```
I want to build a component library from my Figma file.

Step 1: Extract all design tokens (we did this)

Step 2: Generate these components:
- Button (variants, sizes, states)
- Input (text, password, with icons)
- Card (header, body, footer sections)
- Modal (overlay, close button, sections)
- Typography (Heading, Text, Label)
- Badge (colors, sizes)
- Alert (info, success, warning, error)

For each component:
- Use tokens exclusively (no hardcoded values)
- Include all variants from Figma
- TypeScript with proper typing
- Accessible (ARIA labels, keyboard support)

Generate one component at a time. Wait for approval before next.
```

### Iterating with MCP

When designers update Figma:

```
The Figma file was updated. Refresh the design tokens.

1. Read the current Figma file
2. Compare to existing style-tokens.ts
3. Show me what changed
4. Generate updated tokens file
```

Claude shows the diff, you approve, tokens update.

---

## Advanced: Documentation Generation

### Auto-Generate Style Guide

```
Using the tokens and components we created, generate a style guide page.

Include:
1. Color palette visualization (swatches with names and values)
2. Typography scale demonstration
3. Spacing scale visualization
4. Component examples (each variant/size)

Output as a React page I can use as internal documentation.
```

### Storybook Stories

```
Generate Storybook stories for the Button component.

Include:
- Story for each variant
- Story for each size
- Story with all props controls
- Documentation describing usage

Use Component Story Format (CSF 3.0).
```

---

## Keeping Things in Sync

### The Sync Process

Design systems drift when Figma and code diverge. Prevent this:

**Weekly sync:**
1. Run token extraction against current Figma
2. Compare output to existing tokens
3. If different, investigate why
4. Update tokens or flag Figma issue

**Before major releases:**
1. Full component audit against Figma
2. Regenerate any misaligned components
3. Document any intentional differences

### Detection Prompt

```
Compare the current Figma file to our existing style-tokens.ts.

List:
1. Tokens in Figma not in code
2. Tokens in code not in Figma
3. Values that don't match

For each difference, recommend: Update code, Update Figma, or Intentional difference.
```

---

## Common Issues

| Issue | Why It Happens | Fix |
|-------|----------------|-----|
| MCP can't access file | Token permissions | Regenerate token with correct scope |
| Colors don't match | Different color space | Check if Figma uses different format |
| Missing styles | Styles not defined properly in Figma | Ask designer to convert to proper styles |
| Token names inconsistent | Figma naming conventions vary | Establish naming convention, enforce in Figma |
| Complex components fail | MCP reads structure, not behavior | Extract structure, build behavior manually |

---

## What's Next

**Ready to try it?**
1. Set up Figma MCP connection
2. Extract tokens from your design file
3. Generate one component (start with Button)
4. Iterate until it matches exactly
5. Expand to full component library

**Want deeper Claude Code knowledge?**
- [Claude Code Complete Guide](/academy/claude-code/claude-code-complete-guide)
- [Three-Document System](/academy/claude-code/three-document-system)
- [MCP Integration Guide](/academy/claude-code/mcp-integration)

---

## FAQ

### Does this work with Sketch or Adobe XD?

Different MCP servers exist for different tools. Same concept, different connectors.

### How accurate is the token extraction?

Very accurate for defined styles. Less reliable for ad-hoc values. Make sure Figma file uses proper styles.

### Can it generate entire pages?

Components: yes. Complex layouts with positioning and responsiveness: partially. MCP is better for tokens and component structure than full page layouts.

### What if designers don't use Figma styles?

This workflow requires defined styles in Figma. If designers use one-off values, extraction doesn't work. Establish Figma conventions first.

### How do I handle responsive design?

Tokens are single values. Responsive breakpoints are implementation decisions. Extract tokens, define breakpoints in code based on design guidelines.

### Can multiple people use the same MCP connection?

Token is per-user. Each developer needs their own Figma token. Files are shared.

---

## Key Takeaways

- **"Figma is the source of truth."** — Extract tokens from Figma, don't manually transfer. Automation eliminates drift.

- **"Tokens enable components."** — Extract tokens first, then generate components that use them.

- **"Sync regularly."** — Weekly token comparison catches drift before it compounds.

- **"Structured Figma required."** — MCP reads defined styles. Ad-hoc values can't be extracted reliably.

---

## Related Articles

- [Claude Code Complete Guide](/academy/claude-code/claude-code-complete-guide)
- [MCP Integration Guide](/academy/claude-code/mcp-integration)
- [Three-Document System](/academy/claude-code/three-document-system)
- [Remotion Video Editing](/academy/claude-code/remotion-video-editing)

---

*Last verified: 2026-01-27. Based on production design system workflows.*