Liest Figma-Designs und setzt sie 1:1 in Code um.

Was ist das

Der Figma MCP liest deine Designs direkt in Claude Code. Du verlinkst einen Frame, Claude baut den Code — mit echten Farben, Abständen, Komponenten. Kein Screenshot-Guessing mehr.

Installation / Aktivierung

Option 1 — Terminal (Remote Server, empfohlen):

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

Beim ersten Zugriff wirst du durch OAuth in Figma eingeloggt.

Option 2 — Prompt an Claude Code:

Installiere den offiziellen Figma MCP Server (https://mcp.figma.com/mcp) für mich via claude mcp add, führe mich durch den OAuth-Login und teste danach mit /mcp ob die Verbindung steht.

Use-Cases

• Design 1:1 in Code umsetzen — Frame-URL rein, Claude baut React/Tailwind mit echten Tokens.
• Style-Tokens extrahieren — Farben, Font-Sizes, Spacing aus Figma als Tailwind-Config generieren lassen.
• Komponenten erkennen — Claude mappt Figma-Components auf bestehende React-Komponenten im Repo.
• Design-Review — Claude vergleicht deinen implementierten Code mit dem Figma-Stand und listet Abweichungen.
• Copy aus Design ziehen — Texte direkt aus dem Design in i18n-Files übernehmen ohne Copy-Paste.

Pro-Tipp

Bevor du Claude sagst „bau den Frame nach": lass ihn erst das Design analysieren („Welche Komponenten, Tokens und States siehst du?"). Das verhindert dass er Design-Details falsch interpretiert und du beim Build mehrfach iterieren musst.

🚀 MCPs installieren kann jeder. Aber zu wissen welche Kombination für deinen Workflow am meisten bringt — das spart dir Wochen. In der Community zeige ich dir mein komplettes MCP-Setup. → Zur Claude Code Mastery Community

Wird regelmäßig erweitert — folge @laurinbuilds für Updates.