# Figma-Designs in Cursor zu Code machen

> Wer Designs nach Augenmaß nachbaut, verfehlt Abstände, Farben und Zustände.

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.

## Schritte

1. **Figma-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.
2. **GitHub 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.
3. **Aus 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.

## Prompts zum Ausprobieren

- Setze den ausgewählten Figma-Frame als React-Komponente in src/components/PricingCard.tsx mit unseren Tailwind-Tokens um.
- Hole die Variablen dieses Frames und ordne sie unseren CSS-Variablen in tokens.css zu.
- Baue diesen Formularabschnitt mit unseren bestehenden Komponenten Input und Button statt mit neuen.
- Vergleiche deine Komponente mit dem Figma-Screenshot und korrigiere Abstände.
- Lege einen Branch an, committe die neue Komponente und öffne einen Pull Request mit Link zum Figma-Screenshot.

## 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.

## Sicherheitshinweise

- Figma-Zugriff ist schreibgeschützt.
- GitHub-Token auf ein Repository begrenzen und den PR prüfen.

## MCP-Server

- [Figma MCP Server](https://help.figma.com/hc/en-us/articles/32132100833559): design-read
- [GitHub MCP Server](https://github.com/github/github-mcp-server): repository-read, issue-write, pull-request-write

## Häufige Fragen

**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.

## Tools

- **[Figma](https://suiteintent.com/t/figma?m=DE)**: Gemeinsames Interface-Design im Browser. · Ideal für: Design und Entwicklung in einer Datei · Gratis-Tarif · Gratis für Studierende
- **[GitHub](https://suiteintent.com/t/github?m=DE)**: Code-Hosting, Issues und Pull Requests. · Ideal für: Teams mit Code-Review per Pull Request · Gratis-Tarif · 10000