Wer schon mal versucht hat, Claude ein UI-Design zu erklären, kennt das Problem: „Der Button ist so ein mittelblauer, 48px hoch, mit 16px Padding und leichtem Schatten…" und das Ergebnis passt trotzdem nicht.

MCP ändert das grundlegend. Model Context Protocol ist im Prinzip eine standardisierte Schnittstelle, über die Claude direkt auf externe Datenquellen zugreifen kann. In diesem Fall: deine Figma-Dateien. Claude sieht den Frame, liest Variablen, Abstände, Komponenten — und generiert Code, der tatsächlich zum Design passt.

Was du brauchst

Bevor es losgeht, kurz die Voraussetzungen:

• Node.js — Pflicht, da Claude Code über npm installiert wird. Download unter nodejs.org (LTS-Version reicht). Nach der Installation Terminal neu starten und mit node --version prüfen ob es klappt.

• Claude Code (CLI) — installierbar via npm install -g @anthropic-ai/claude-code

• VS Code, Cursor oder ein anderer MCP-fähiger Editor — alternativ direkt Claude Code im Terminal

• Figma Professional mit mindestens einem Dev Seat — der Free/Starter Plan ist auf 6 MCP-Calls pro Monat begrenzt, was für echte Arbeit nicht reicht. Wer nur Code generieren möchte (kein Write-to-Canvas), kommt mit einem Dev Seat aus.

Der empfohlene Weg ist der Remote MCP Server von Figma, kein lokales Setup, keine Desktop-App-Pflicht, einfach OAuth und fertig.

Setup: Claude Code (Terminal)

Der schnellste Weg, wenn du ohnehin mit Claude Code arbeitest:

bash

claude mcp add --transport http figma https://mcp.figma.com/mcp

Dann in Claude Code /mcp eingeben, figma auswählen und Authenticate klicken. Ein Browser-Tab öffnet sich, du klickst auf „Allow access" — done.

Was du danach kannst

Sobald die Verbindung steht, kannst du Figma-Links direkt in deine Prompts einbauen:

„Generiere mir diesen Frame als React-Komponente mit Tailwind: [Figma-Link]"

„Extrahiere alle Farb- und Spacing-Tokens aus diesem Design und erstelle daraus CSS Custom Properties."

„Bau dieses Dashboard-Layout responsive um — Mobile und Desktop."

Claude liest den Frame, holt sich Design Tokens, Komponentenstruktur und Layout-Daten — und schreibt Code, der wirklich aussieht wie das Original.

Ein Hinweis zu Plänen und Limits

Für sinnvolle Nutzung braucht man mindestens einen Dev Seat auf dem Figma Professional Plan. Der Starter Plan und View/Collab-Seats sind auf 6 MCP-Calls pro Monat begrenzt — das reicht für einen kurzen Test, aber nicht für echte Arbeit. Write-to-Canvas (Claude schreibt direkt in Figma zurück) ist aktuell noch kostenlos in der Beta, wird aber laut Figma irgendwann ein kostenpflichtiges Feature.

Fazit

Der Figma MCP ist eines der praktischsten Dinge, die gerade im Design-Dev-Workflow passieren. Weniger Copy-Paste aus Inspect, weniger Missverständnisse, mehr Code der direkt funktioniert. Das Setup dauert wirklich nur ein paar Minuten und der Unterschied im Arbeitsalltag merkt sich sofort.