Abbildung 1: Design-System-Workflow in Figma mit Claude Code1. Was Sie für die Arbeit benötigen
Claude Code kann direkt mit Figma verbunden werden, um von Grund auf eine vollständige Design-System-Architektur zu erstellen: Variablen, Tokens, Komponenten und fertige Screens. In diesem Leitfaden durchlaufen wir den gesamten Prozess Schritt für Schritt – von der Installation bis zum finalen Login-Screen.
Stellen Sie vor dem Start sicher, dass Folgendes vorhanden ist:
- Claude Code Desktop App – eine Anwendung mit drei Modi: Chat, Code und Agentic.
- Aktives Claude-Abo – ein kostenloses Konto reicht für diesen Workflow nicht aus.
- Figma-Konto – mindestens mit einer offenen Arbeitsdatei.
- Zeit – 30–45 Minuten ungestörte Zeit für den kompletten Durchlauf des Workflows.
Dieser Workflow verbraucht Ihre Claude-Nutzungslimits. Der Aufbau komplexer Komponenten wie eines Buttons mit über 120 Varianten kann einen erheblichen Teil Ihres stündlichen Limits beanspruchen. Beginnen Sie mit einfacheren Aufgaben, um sich mit dem Prozess vertraut zu machen, bevor Sie große Projekte angehen.
Was Sie für die Arbeit benötigen — Illustration 22. Installation von Claude Code
Gehen Sie zu claude.ai/download und laden Sie die Claude Code Desktop App für Ihr Betriebssystem (macOS oder Windows) herunter.
Nach der Installation fordert die App zur Authentifizierung auf – melden Sie sich mit Ihren Claude-Abo-Daten an. Anschließend öffnet sich die Oberfläche mit drei Modi:
- Chat – der Standard-Claude für Unterhaltungen.
- Code – für Programmieraufgaben.
- Agentic – hier findet die eigentliche Arbeit mit Figma statt.
Für die Arbeit mit Figma wird der Agentic-Modus verwendet: Er ermöglicht es Claude, autonome Aktionen auszuführen, einschließlich direkter Interaktion mit Ihrem Figma-Canvas.
Was Sie für die Arbeit benötigen — Illustration 33. Verbindung von Claude mit Figma über MCP
Dies ist der entscheidende Schritt, der den gesamten Workflow erst möglich macht. Claude verbindet sich über einen MCP-Server (Model Context Protocol) mit Figma.
Verbindungsprozess:
- Wechseln Sie in der Claude Code App zu Settings.
- Öffnen Sie den Abschnitt MCP Servers.
- Klicken Sie auf „Add MCP Server“.
- Wählen Sie Figma aus der Liste der verfügbaren Integrationen.
- Authentifizieren Sie sich über Ihr Figma-Konto (OAuth-Flow).
- Nach der Verbindung erscheint Figma in der Liste der aktiven MCP-Server.
So prüfen Sie, ob alles funktioniert:
Öffnen Sie eine beliebige Figma-Datei im Browser und stellen Sie Claude eine einfache Frage:
Wenn Claude den Inhalt Ihrer Datei beschreibt, ist die Verbindung hergestellt. Falls nicht, überprüfen Sie die Konfiguration des MCP-Servers und stellen Sie sicher, dass die Figma-Datei geöffnet ist.
Erstellen Sie vor Beginn der Arbeit eine separate Figma-Datei oder eine dedizierte Seite innerhalb einer bestehenden Datei. Dies isoliert Experimente von produktiven Materialien.
Schritt 3 — Vollständiges Variable-System mit AI erstellen — Illustration 44. Vollständiges Variable-System mit AI erstellen
Anstatt dutzende Farb-, Typografie- und Spacing-Variablen manuell zu erstellen, baut Claude die gesamte Token-Architektur autonom auf.
Prompt zur Erstellung des Variable-Systems:
Das Ergebnis von Claude:
Claude beginnt autonom in der Figma-Datei zu arbeiten. Innerhalb weniger Minuten erscheinen im Panel „Variables“:
- Primitive Colors – ein vollständiger Satz Farbrampen, korrekt nach Kollektionen organisiert.
- Semantic Colors – alle referenzieren korrekt auf die Primitive-Kollektion (keine hardcodierten Hex-Werte, sondern echte Verknüpfungen).
- UI-Tokens – Hintergrund, Text, Icons und Borders mit Hover- und Active-Zuständen.
- Typografie-System – Textstile, gebunden an die entsprechenden Variablen.
- Size-Tokens – Skalen für Paddings und Radii, sofort einsatzbereit.
Semantische Tokens sind korrekt als Aliase auf Primitives definiert – das bedeutet, dass die Änderung einer primitiven Farbe automatisch kaskadierend das gesamte System aktualisiert. So wird ein professionelles Design-System manuell aufgebaut, nur dauert es hier Minuten statt Stunden.
Überprüfen Sie nach der Generierung die Farbwerte anhand Ihrer Brand-Guidelines. Die AI wählt sinnvolle Defaults, aber der spezifische Farbton Ihrer Marke weicht wahrscheinlich vom generierten ab. Ändern Sie die Primitives – und die semantische Ebene aktualisiert sich automatisch.
5. Komplexe Button-Komponente erstellen: 120+ Varianten
Der echte Stresstest für den Workflow ist eine Button-Komponente nicht in vereinfachter Form, sondern mit voller Design-System-Strenge.
Prompt zur Erstellung der Komponente:
Die Generierung erfordert deutlich mehr Zeit und einen erheblichen Teil des Nutzungslimits. Das Ergebnis ist ein vollständiges Component-Set mit über 120 Varianten.
Was hervorragend funktioniert:
- Auto-Layout-Struktur ist korrekt: Richtige Paddings und Gaps, alles aus den Size-Tokens.
- Farben sind präzise zugewiesen: Primary-Buttons nutzen Primary-Farben, Danger nutzt Error-Reds, alles aus semantischen Tokens.
- Textstile: Korrekt auf alle Varianten angewendet.
- Component Properties: Für bequemes Umschalten der Zustände konfiguriert.
- Naming Convention: Vollständig eingehalten.
Was manuelle Korrekturen erfordert:
- Icons: Claude hat Schwierigkeiten, echte Icons zu erstellen. Es werden Platzhalter-Figuren generiert, die nicht immer präzise sind. Geben Sie besser konkrete einfache Formen an („use a star shape“ oder „use an arrow“) oder ersetzen Sie Vektoren manuell.
- Loading State: Die Positionierung des Spinners kann durch absolute Positionierung verrutschen – hier ist eine schnelle manuelle Anpassung nötig.
- Kleine Abweichungen im Padding: Bei einigen Varianten können die Padding-Werte abweichen (die Korrektur dauert 2–3 Minuten).
Für eine Komponente, deren manueller Aufbau von Grund auf normalerweise 2–3 Stunden dauert – inklusive Varianten, Tokens und Auto-Layout – erledigt Claude etwa 85 % der Arbeit korrekt. Die restlichen 15 % sind schnelles manuelles Feintuning.
6. Screen-Layout basierend auf dem Design-System
Der finale Test: Kann Claude einen vollständigen Screen zusammenbauen, indem er das gerade erstellte Design-System nutzt? Die Schlüsselbedingung ist, nicht alles neu zu generieren, sondern bestehende Komponenten und Variablen zu verwenden.
Prompt zur Erstellung des Login-Screens:
Das Ergebnis von Claude:
Ein fertiger Login-Screen mit korrekter Struktur. Das Gesamtlayout stimmt – richtiger Split-Screen, gut organisierte Form, Design-Tokens werden über den gesamten Screen hinweg genutzt.
Was beeindruckt:
- Wiederverwendung des Systems: Claude nutzt genau die erstellte Button-Komponente, statt ein neues Rechteck zu zeichnen, das wie ein Button aussieht.
- Typografische Hierarchie: Heading Styles, Body Text, Captions – alles stammt aus dem Token-System.
- Konsistente Abstände: Exakt gemäß der Size-Skala eingehalten.
- Gesamtkomposition: Professionell und bereit für die Übergabe an die Entwicklung.
- Auto-Layout korrekt angewendet: Macht den Screen responsiv.
Was Nacharbeit erfordert:
- Visuelles Polishing der Social-Login-Buttons.
- Die Platzhalter-Illustration im linken Panel ist basisch (das ist erwartet).
- Geringfügige Ausrichtungsprobleme bei inneren Form-Paddings.
Das Ergebnis ist kein Wegwerf-Prototyp, sondern eine vollwertige Basis für die weitere Produktentwicklung.
7. Ehrliche Analyse: Wo AI glänzt und wo nicht
Wo Claude + Figma außergewöhnlich gut funktioniert:
- Variable- und Token-Systeme: Hier zeigt die AI ihre Stärken. Eine vollständige Token-Architektur, für die manuell Stunden benötigt werden, entsteht in Minuten, und die Struktur ist korrekt.
- Component-Scaffolding: Die Generierung des Skeletts komplexer Komponenten mit korrektem Auto-Layout, konfigurierten Properties und Tokens spart enorm viel Zeit.
- Screen-Komposition: Das Erstellen strukturierter Layouts, die vorhandene Komponenten und Design-System-Tokens nutzen, liefert tatsächlich verwertbare Ergebnisse.
- Design-System-Konsistenz: Da die Regeln im Prompt vorab definiert werden, hält Claude die Konsistenz strikter ein, als es die meisten Designer manuell tun.
Wo die AI noch Schwächen hat:
- Visuelle Nuancen: Die AI hat keinen künstlerischen Geschmack. Die Ergebnisse sind strukturell korrekt, aber es fehlen die feinen Justierungen, die Design wirklich elegant machen.
- Icons und Illustrationen: Claude scheitert oft bei der Generierung guter Icons. Stellen Sie immer Referenz-Icons bereit oder nutzen Sie spezialisierte Plugins.
- Nutzungslimits: Komplexe Komponenten verbrauchen schnell die Claude-Limits. Planen Sie Sessions im Voraus.
- Positionierung: Absolute Positionierung und Overflow-Handling erfordern manchmal manuelle Bereinigung.
Zusammenfassung: Dieser Workflow ersetzt kein Design-Thinking. Aber er komprimiert die Ausführungsphase radikal. Claude übernimmt 70–85 % der mechanischen Arbeit beim Aufbau des Design-Systems und schafft so Raum für Entscheidungen, die wirklich zählen: Strategie, User Scenarios, Edge Cases und visuelles Polishing.
8. Prompting-Tipps: Muster, die funktionieren
Nach Praxis mit diesem Workflow haben sich Muster herauskristallisiert, die stabil bessere Ergebnisse liefern:
- Explizite Token-Nutzung fordern: Schreiben Sie immer „use the variable tokens we created“, sonst könnte Claude Werte direkt hardcoden.
- Naming Convention definieren: Claude folgt jedem Namensmuster, das Sie vorgeben. Seien Sie konkret, sonst erhalten Sie inkonsistente Bezeichnungen.
- Komplexe Aufgaben schrittweise lösen: Bitten Sie nicht darum, Variablen, Komponenten und Screens in einem einzigen Prompt zu erstellen. Arbeiten Sie sequenziell.
- Auf vorhandene Elemente verweisen: Schreiben Sie „use our button component“, statt „create a button“, wenn Sie bereits Erstelltes wiederverwenden möchten.
- Dimensionen explizit angeben: „40px height with 12px vertical padding and 16px horizontal padding“ funktioniert besser als „medium size“.
- Ergebnisse stets prüfen: Kontrollieren Sie Variables Panel, Layers Panel und Component Properties. Die AI baut die Struktur korrekt auf, aber Details brauchen den menschlichen Blick.