Figma + Claude Code via MCP

MCP staat voor Model Context Protocol — een open standaard van Anthropic die AI-modellen koppelt aan externe tools en databronnen. Met MCP leest Claude je Figma-bestand direct: frames, componenten, variabelen en layout-structuur.

MCP is USB for AI — one open standard that connects Claude to every tool.
– Anthropic

Wat is MCP?

MCP staat voor Model Context Protocol — een open standaard van Anthropic die AI-modellen koppelt aan externe tools en databronnen. Denk aan het als een universele adapter: net zoals USB elk apparaat met je computer verbindt, verbindt MCP Claude met diensten als Figma, Todoist, GitHub, databases, en meer.

Vóór MCP moest je screenshots maken, tekst kopiëren, of beschrijvingen typen van je designs. Met MCP leest Claude je Figma-bestand direct — het ziet je frames, componenten, variabelen en layout-structuur.

Hoe het werkt

Figma (je design) 
    ↓ MCP verbinding
Claude Code (leest design-data + screenshot)
    ↓ 
Gegenereerde code (in je project)

Claude ontvangt:

  • Een screenshot van het geselecteerde frame
  • Structuurdata — layers, posities, namen, hiërarchie
  • Design tokens — kleuren, spacing, typografie als variabelen
  • Code Connect mappings — koppelingen naar bestaande code-componenten

De Figma MCP Server installeren

Vereisten

  • Figma Desktop App (niet de browser-versie)
  • Claude Code geïnstalleerd
  • Een Figma-bestand met designs

Configuratie

De Figma MCP server wordt geconfigureerd in je Claude Code settings. Voeg het toe aan je ~/.claude/settings.json:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"]
    }
  }
}

Of configureer het per project in .claude/settings.json in je project-map.

Verbinding testen

Start Claude Code en vraag:

Kun je mijn Figma-bestand lezen? Laat zien welke MCP tools je beschikbaar hebt.

Claude toont je de beschikbare Figma-tools als de verbinding werkt.

De kern-workflow: Design naar code

Stap 1: Selecteer in Figma

Open je design in de Figma Desktop App en selecteer het frame dat je wilt bouwen. Dit kan zijn:

  • Een volledige pagina
  • Een enkele component
  • Een specifieke sectie

Stap 2: Claude leest het design

In Claude Code:

Bekijk het geselecteerde Figma frame en beschrijf wat je ziet. 
Wat is de structuur, welke elementen zijn er, en hoe is het opgebouwd?

Claude gebruikt get_design_context om een screenshot en structuurdata op te halen. Het analyseert:

  • De visuele hiërarchie
  • Component-structuur
  • Kleuren en typografie
  • Spacing en layout

Stap 3: Genereer code

Bouw dit frame na als React component met Tailwind CSS. 
Gebruik onze design tokens uit src/styles/tokens.ts. 
Maak het responsive — mobiel-eerst.

Stap 4: Review en redirect

Bekijk het resultaat in je browser. Stuur bij:

De spacing tussen de kaarten is te uniform — maak de eerste kaart 
groter (span-2) en de rest kleiner. De achtergrondkleur moet 
warmer — meer richting #FAF9F7 in plaats van puur wit.

Dit is de Describe, Review, Redirect loop in actie, maar dan met je Figma-design als startpunt.

Beschikbare Figma MCP tools

Claude heeft via de Figma MCP server toegang tot deze tools:

| Tool | Wat het doet |
|---|---|
| `get_design_context` | **Primaire tool** — Haalt screenshot, code-referentie en metadata op van een frame |
| `get_metadata` | Structuuroverzicht in XML — layer types, namen, posities |
| `get_screenshot` | Genereert een screenshot van een specifiek frame |
| `get_variable_defs` | Haalt design variabelen op — kleuren, spacing, typografie |
| `get_code_connect_map` | Toont koppelingen tussen Figma nodes en code-componenten |
| `get_code_connect_suggestions` | AI-suggesties voor Code Connect mappings |

Wanneer welke tool?

  • Nieuw component bouwen — get_design_context (screenshot + structuur + code)
  • Structuur verkennen — get_metadata (snelle scan van een pagina)
  • Tokens extraheren — get_variable_defs (kleuren, spacing als variabelen)
  • Bestaande componenten koppelen — get_code_connect_map

Code Connect: Figma koppelen aan je codebase

Code Connect gaat een stap verder dan screenshots: het koppelt Figma-componenten direct aan hun code-equivalenten. Als je een Button in Figma selecteert, weet Claude dat dit <Button> uit src/components/Button.tsx is.

Hoe het werkt

Figma node: "Primary Button"
    ↓ Code Connect mapping
Code component: src/components/ui/Button.tsx
    ↓
Claude weet: gebruik <Button variant="primary"> 
in plaats van HTML/CSS opnieuw te genereren

Mapping aanmaken

Selecteer een component in Figma en vraag Claude:

Koppel dit Figma component aan onze Button component 
in src/components/ui/Button.tsx

Claude gebruikt add_code_connect_map om de koppeling te maken. Bij toekomstige verzoeken herkent het de component automatisch.

Bulk mappings met suggesties

Voor een heel design system:

Bekijk alle componenten op deze Figma pagina en stel 
Code Connect mappings voor op basis van onze codebase.

Claude analyseert je Figma-componenten, scant je codebase, en stelt mappings voor die je kunt goedkeuren of aanpassen.

Design variabelen extraheren

Een van de krachtigste features: Claude kan je Figma design tokens direct uitlezen en vertalen naar code.

Haal alle design variabelen op uit het huidige Figma bestand 
en genereer een tokens.ts bestand met TypeScript constanten.

Claude haalt op via get_variable_defs:

// Gegenereerd uit Figma variabelen
export const colors = {
  primary: '#2563EB',
  secondary: '#64748B',
  background: {
    default: '#FFFFFF',
    subtle: '#F8FAFC',
    muted: '#F1F5F9',
  },
  text: {
    primary: '#0F172A',
    secondary: '#475569',
    muted: '#94A3B8',
  },
} as const;

export const spacing = {
  xs: '4px',
  sm: '8px',
  md: '16px',
  lg: '24px',
  xl: '32px',
  '2xl': '48px',
  '3xl': '64px',
} as const;

Je design tokens uit Figma, direct bruikbaar in code. Geen handmatig overnemen, geen copy-paste fouten.

Workflows in de praktijk

Workflow 1: Volledige pagina bouwen

1. Open Figma → selecteer de homepage
2. "Analyseer dit design en bouw de volledige pagina. 
    Gebruik onze tokens en bestaande componenten waar mogelijk."
3. Review in browser
4. "De hero-sectie klopt, maar de testimonial-slider 
    moet horizontaal scrollen op mobiel, niet stacken."
5. Itereer tot het klopt

Workflow 2: Component-varianten

1. Selecteer een component set in Figma (bijv. Button met varianten)
2. "Bouw alle varianten van dit component als één React component 
    met props voor variant, size en state."
3. Review alle varianten
4. "Voeg een loading-state toe met een spinner — 
    die staat niet in Figma maar is wel nodig."

Workflow 3: Design systeem audit

1. Open je Figma library pagina
2. "Vergelijk onze Figma componenten met de code in 
    src/components/. Welke componenten missen in code? 
    Welke zijn out of sync?"
3. Claude maakt een overzicht van gaps
4. "Bouw de ontbrekende componenten bij."

Workflow 4: Reverse — Code naar Figma feedback

1. Bouw iets in code
2. "Screenshot dit en vergelijk het met het Figma design. 
    Waar wijken we af?"
3. Claude geeft een gedetailleerde vergelijking

Tips voor effectief Figma-gebruik met Claude

Naamgeving in Figma

Claude leest je layer-namen. Duidelijke namen = betere code:

✗ "Frame 237" / "Group 12" / "Rectangle 4"
✓ "Hero Section" / "Feature Card" / "CTA Button"

Frame-selectie

  • Selecteer specifiek — Een hele pagina geeft veel data. Begin met individuele secties.
  • Component-level — Selecteer de component, niet de instance, voor de meest bruikbare structuurdata.

Auto Layout = Betere code

Figma's Auto Layout vertaalt zich direct naar flexbox/grid in code. Designs met Auto Layout produceren schonere, meer responsive code.

Variabelen boven harde waarden

Gebruik Figma's Variables feature voor kleuren, spacing en typografie. Claude kan deze direct extraheren als design tokens — veel nuttiger dan harde hex-waarden in je designs.

Beperkingen

Eerlijkheid over wat nog niet perfect werkt:

  • Complexe animaties — Figma's prototyping-animaties worden niet meegenomen. Beschrijf gewenste animaties apart.
  • Responsiveness — Figma is pixel-based; responsieve logica moet je beschrijven of in code toevoegen.
  • Interactieve states — Hover, focus en active states zijn soms lastig af te leiden uit Figma. Wees expliciet.
  • Performance — Zeer complexe designs met honderden layers kunnen de MCP-verwerking vertragen. Werk in secties.
  • Browser-versie — MCP werkt met de Figma Desktop App, niet de browserversie.