FigmaGemeinsames Interface-Design im Browser.
Figma-Designs in Cursor zu Code machen
Wer Designs nach Augenmaß nachbaut, verfehlt Abstände, Farben und Zustände.
3 SchritteMittel
CursorClaude CodeFigmaGitHub
So hängt es zusammen
Ihre KI erreicht Ihre Apps über kleine Connectoren, sogenannte MCP-Server.
Ihre KI
CursorClaude Code
Connectoren
FigmaGitHub
Ihre Apps
FigmaGitHub
Dieses Setup richtet sich an Frontend-Entwickler und Design Engineers, die Figma-Frames in Komponenten umsetzen. Der Figma-MCP-Server liefert Cursor oder Claude Code Struktur, Variablen und Screenshots eines Frames, und über GitHub arbeitet der Agent in Ihrem Repo und öffnet einen Pull Request. Am Ende haben Sie Komponenten, die Ihre Design-Tokens nutzen statt nach Augenmaß kopierter Werte.
Einrichten
3 Schritte. Öffnen Sie einen für Details.
1Figma-MCP aktivieren
Öffnen Sie in der Figma-Desktop-App eine Design-Datei, wechseln Sie in den Dev Mode und aktivieren Sie den Desktop-MCP-Server im Inspect-Panel oder im Figma-Menü unter Einstellungen. Er läuft lokal unter http://127.0.0.1:3845/mcp; tragen Sie die URL in die MCP-Einstellungen von Cursor ein oder nutzen Sie claude mcp add. Alternativ bietet Figma einen Remote-Server unter mcp.figma.com ohne Desktop-App.
Tipp: Der MCP-Server erfordert einen Dev- oder Full-Seat in einem bezahlten Figma-Tarif; prüfen Sie die aktuellen Bedingungen in der Figma-Doku.
2GitHub verbinden
Fügen Sie den GitHub-MCP-Server mit einem fine-grained Token hinzu, das Branches und Pull Requests in Ihrem Frontend-Repository anlegen darf. Lassen Sie den Agenten Ihren Komponentenordner auflisten, damit er weiß, was es schon gibt. So baut er keinen Button nach, den Sie bereits haben.
Tipp: Nennen Sie im selben Prompt Ihre Token-Datei, etwa tailwind.config oder eine Datei mit CSS-Variablen.
3Aus einem Frame bauen
Wählen Sie in Figma einen Frame aus oder kopieren Sie seinen Link und bitten Sie den Agenten, ihn mit Ihren Tokens und Komponenten umzusetzen. Der Agent holt Code-Kontext, Variablen und einen Screenshot des Frames und schreibt die Komponente. Vergleichen Sie das Ergebnis im Browser bei gleicher Breite mit dem Frame.
Tipp: Kleine Frames liefern bessere Ergebnisse; setzen Sie eine Karte oder einen Formularabschnitt um, keine ganze Seite.
Dann einfach fragen
Was Sie sagen können, sobald es verbunden ist. Zum Kopieren klicken.
Fragen Sie Cursor…Cursor
Gut zu wissen
Was Sie brauchen, was es nicht kann und wie es sicher bleibt.
Was Sie brauchen
- Ein bezahlter Figma-Tarif mit Dev- oder Full-Seat
- Die Figma-Desktop-App für den lokalen Server oder den Remote-Server
- Cursor oder Claude Code
- Ein GitHub-Token mit Zugriff auf Branches und Pull Requests Ihres Repos
Grenzen
- Der Agent arbeitet Frame für Frame und übersieht Interaktionen, Animationen und responsives Verhalten, die der Frame nicht zeigt.
- Schlecht strukturierte Figma-Dateien ohne Auto Layout oder Variablen führen zu fest kodierten Werten.
- Barrierefreiheit wie Labels und Fokuszustände müssen Sie selbst prüfen.
Sicher bleiben
- Figma-Zugriff ist schreibgeschützt.
- GitHub-Token auf ein Repository begrenzen und den PR prüfen.
Häufige Fragen
Klare Antworten vor dem Start
Welchen Figma-Tarif brauche ich?
Der Figma-MCP-Server setzt einen Dev- oder Full-Seat in einem bezahlten Tarif voraus. Aktuelle Details zu Seats und Tarifen finden Sie im Hilfe-Center von Figma.
Funktioniert das neben Cursor auch mit Claude Code?
Ja. Beide Hosts unterstützen den Desktop- und den Remote-Server von Figma. Die Schritte sind gleich, nur der Ort für die Server-URL unterscheidet sich.
Nutzt der Agent meine bestehenden Komponenten?
Ja, wenn Sie ihm sagen, wo sie liegen, und darum bitten. Mit Code Connect von Figma lassen sich Figma-Komponenten Code-Komponenten zuordnen, was die Ergebnisse einheitlicher macht.
Verlassen meine Designs meinen Rechner?
Frame-Daten und Screenshots landen in der Unterhaltung und beim Modellanbieter. Prüfen Sie die Richtlinien Ihres Unternehmens, bevor Sie Kundendesigns verwenden.
Beteiligte Produkte
Die beteiligten Produkte
