Wie Claude Code + Figma meinen alten UI-Workflow getötet hat
Ich hätte letzten Monat fast eine Kunden-Deadline verpasst. Nicht weil der Code schwierig war — das React-Dashboard, das ich gebaut hatte, funktionierte perfekt im Browser. Das Problem? Das Übersetzen meines funktionierenden Prototyps in etwas, das das Design-Team in Figma tatsächlich überprüfen, kommentieren und iterieren konnte. Ich verbrachte einen ganzen Nachmittag damit, Komponenten zu screenshotten, Layouts manuell in Figma-Frames neu zu erstellen, und dann — nachdem der Designer Änderungen vorgenommen hatte — diese visuellen Anpassungen zurück in JSX zu übersetzen.
Sechs Stunden meines Lebens. Weg.
Dann aktualisierte Figma seinen MCP-Server, und Claude Code hatte nun eine direkte Brücke zum Figma-Canvas. Code zu Figma pushen. In Figma bearbeiten. Als produktionsfertigen Code zurückziehen. Eine vollständige bidirektionale Schleife.
Warum Modus-basiertes Denken alles verändert
Code-Modus ist Claude Code. Schnelle Iteration. UI-Zustände testen. Interaktionen verdrahten. Das Engineering-Gehirn lebt hier.
Design-Modus ist Figma. Visuelles Polieren. Typografie. Abstände, die sich richtig anfühlen. Das ist auch wo die Zusammenarbeit stattfindet.
Die Claude Code zu Figma-Brücke einrichten (Schritt für Schritt)
Voraussetzungen:
- Claude Code installiert und funktionierend
- Ein Figma-Konto auf Pro-Stufe oder höher — der kostenlose Tarif begrenzt API-Anfragen stark
- Ein persönliches Figma-Zugriffstoken
- Grundkenntnisse von MCP
Schritt 1: Den Figma MCP-Server in Claude Code aktivieren
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "@anthropic-ai/figma-mcp-server"],
"env": {
"FIGMA_ACCESS_TOKEN": "your-personal-access-token-here"
}
}
}
}
Schritt 2: Dein persönliches Figma-Zugriffstoken generieren
In Figma: Einstellungen → Konto → Persönliche Zugriffstoken. Neues Token mit Lese- und Schreibberechtigungen erstellen. Sofort kopieren — Figma zeigt es nur einmal.
Schritt 3: Die Push/Pull-Schleife testen
Schreibe eine einfache React-Komponente in Claude Code. Sage Claude Code dann, sie in eine bestimmte Figma-Datei zu pushen. Wechsle zu Figma. Du solltest einen neuen Frame auf deinem Canvas sehen.
Der Workflow, der wirklich Stunden spart
Morgens: Code-Modus-Sprint
Ich beginne in Claude Code. Reiner Baumodus. Ein vollständiges Dashboard mit Charts, Filtern und Datentabellen dauert vielleicht 15-20 Minuten zu generieren und zu verfeinern.
Vormittags: Der große Push
Sobald ich funktionierende Komponenten habe, pushe ich alles auf einmal zu Figma. Jede Komponente wird ein separater Frame. Verschiedene UI-Zustände (Laden, leer, Fehler, befüllt) werden ebenfalls separate Frames.
Nachmittags: Design-Modus-Review
Hier übernimmt das Team. Der Designer überprüft die Frames, nimmt visuelle Anpassungen vor. Product Manager können Kommentare direkt auf den Frames hinterlassen.
Später Nachmittag: Der Pull
Sobald die Design-Review abgeschlossen ist, ziehe ich die aktualisierten Frames zurück in Claude Code. Claude Code generiert sauberen, produktionsfertigen Code, der alle visuellen Änderungen widerspiegelt.
Design-Systeme verbinden: Wo es wirklich mächtig wird
Das Code Connect-Plugin lässt dich Figma-Design-Komponenten mit echten Code-Komponenten verknüpfen. Deine Figma "Button/Primary/Large"-Komponente weist direkt auf deine <Button variant="primary" size="lg" /> React-Komponente hin.
Einmal konfiguriert, ist der von Claude aus Figma-Frames generierte Code keine generische HTML und CSS. Es ist Code, der deine tatsächliche Komponentenbibliothek verwendet.
Die ehrlichen Einschränkungen
Der kostenlose Tarif ist dafür kaum nutzbar. Figmas kostenloser Tarif begrenzt API-Aufrufe erheblich.
Komplexe Animationen und Interaktionen überleben die Hin- und Rückfahrt nicht. Wenn du eine Komponente mit Framer Motion-Animationen in Claude Code baust, zeigt der Figma-Frame den statischen Zustand.
Große Dateien werden langsam. Arbeite in fokussierten Chunks.
Was ich nach drei Wochen gemessen habe
Zeit für Design-zu-Code-Übersetzung: Sank von etwa 8-10 Stunden pro Woche auf etwa 2-3 Stunden.
Design-Review-Zyklen: Vorher durchschnittlich 3 Runden Feedback. Jetzt durchschnittlich 1,5 Runden.
Zeit bis zum ersten funktionierenden Prototyp: Von etwa 2 Tagen auf etwa einen halben Tag.
Deine erste Stunde: Ein praktischer Ausgangspunkt
- Richte die MCP-Verbindung ein. Budgetiere 15-20 Minuten.
- Baue etwas Einfaches in Claude Code — einen Landing-Page-Hero-Bereich.
- Push es in eine neue Figma-Datei. Schau, was erscheint.
- Nimm eine bewusste Änderung in Figma vor — tausche eine Farbe aus, ändere die Schriftgröße.
- Ziehe es zurück und schaue auf den generierten Code.
Diese einzelne Schleife — bauen, pushen, bearbeiten, ziehen — wird dir mehr über diesen Workflow beibringen als jedes Tutorial.
Lass uns zusammenarbeiten
- Fiverr: fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited: ramlit.com
- ColorPark: colorpark.io
- xCyberSecurity: xcybersecurity.io
