Design mit Figma AI (Professional-Plan) und Claude Cowork – und die Integration des Ergebnisses in eine echte App

Ein Screen zu gestalten ist nur die halbe Arbeit. Den echten Wert gibt es erst, wenn das Design zu einer funktionierenden Funktion in Ihrer Anwendung wird. Mit Figma AI im Professional-Plan und Claude Cowork als zweitem Paar Hände kommt eine einzelne Person von einer groben Idee zu einem geprüften, in Komponenten gegliederten Design und weiter in echten Code – ohne die üblichen Wochen des Hin und Hers zwischen Designer und Entwickler.

1. Was der Figma-Professional-Plan bietet

Der Professional-Plan ist die erste Stufe für echte Projektarbeit: gemeinsame Team-Bibliotheken, unbegrenzte Dateien und Projekte, Dev-Mode-Zugriff für die Übergabe und KI-Funktionen wie Figma Make, die über KI-Credits abgerechnet werden. Genaue Limits und Credit-Kontingente ändern sich, prüfen Sie daher vor einem großen Vorhaben die aktuelle Preisseite. Für eine einzelne Designerin oder ein kleines Produktteam reicht diese Stufe meist für den gesamten Workflow dieses Artikels.

• Gemeinsame Bibliotheken – eine einzige Quelle der Wahrheit für Farben, Typografie, Abstände und Komponenten.
• Dev Mode – Abstände, Tokens und generierte Snippets prüfen, ohne zu raten.
• Figma AI / Figma Make – Layouts und interaktive Prototypen per Prompt erzeugen, bezahlt mit KI-Credits.

2. Schritt eins: den ersten Entwurf in Figma AI erzeugen

Beginnen Sie mit einem präzisen statt einem vagen Prompt. Beschreiben Sie Produkt, Nutzer, Screen, Kernaktionen und Rahmenbedingungen: „Dashboard für eine kleine Klinik: Terminliste, Patientensuche, Umsatzkarte für heute; Desktop-first, 8-px-Raster, WCAG-AA-Kontrast, ruhige blau-neutrale Palette.“ Figma AI liefert Frames mit Auto-Layout, Komponentenvarianten und einem Farbset, die Sie iterieren können. Betrachten Sie das Ergebnis als Entwurf: schnell und strukturell solide, aber Hierarchie, Texte und Sonderfälle brauchen weiterhin menschliche Entscheidungen.

3. Schritt zwei: Claude Cowork als Reviewer und Co-Designer

Claude Cowork arbeitet am besten mit Kontext. Geben Sie Screenshots oder Exporte der Frames, Ihre Markenregeln und die User Story, und bitten Sie um eine strukturierte Kritik: Barrierefreiheitsprobleme, uneinheitliche Abstände, fehlende Empty-/Error-/Loading-Zustände, unklare Handlungsaufforderungen und Texte, die nicht zur Zielgruppe passen. Es kann auch Microcopy entwerfen, Namen für Komponenten und Varianten vorschlagen und Abnahmekriterien formulieren. Änderungen setzen Sie selbst in Figma um – Cowork beschleunigt das Denken, das letzte Wort haben Sie.

• Bitten Sie um eine priorisierte Liste (Blocker / wichtig / wünschenswert) statt einer Wand aus Meinungen.
• Lassen Sie alle Zustände jedes interaktiven Elements prüfen.
• Bitten Sie um die erwartete Komponenten-API: Props, Varianten, Größen.

4. Schritt drei: die Datei für Code vorbereiten

Die Qualität der Code-Generierung hängt fast vollständig davon ab, wie sauber die Figma-Datei ist. Vor der Übergabe: Farben, Schriften und Abstände in Variablen (Design-Tokens) umwandeln; wiederkehrende Blöcke zu Komponenten mit Varianten machen; überall Auto-Layout statt manuell positionierter Ebenen nutzen; Ebenen sinnvoll benennen. Eine so aufgebaute Datei lässt sich fast eins zu eins auf React-Komponenten und Tailwind-Klassen abbilden. Eine Datei voller gelöster Gruppen und magischer Zahlen erzeugt Code, den niemand warten will – egal, ob ein Mensch oder ein Modell ihn geschrieben hat.

5. Schritt vier: Integration in die App

Es gibt zwei praktische Wege. Der erste: den Figma-MCP-Server mit Ihrem Coding-Assistenten verbinden – er liest den exakten Frame, seine Variablen und die Komponentenstruktur und erzeugt Code, der Ihre vorhandenen Komponenten wiederverwendet, statt neue zu erfinden. Der zweite ist manuell: den Frame im Dev Mode öffnen, die Tokens in Ihr Tailwind-Theme (oder CSS-Variablen) übernehmen und die Komponenten selbst bauen, mit Claude als Pair-Programmer. In beiden Fällen gilt dieselbe Regel: erst Tokens, dann Komponenten, zuletzt Screens.

Danach prüfen: App starten, mit dem Figma-Frame bei mehreren Breakpoints vergleichen, Tastaturbedienung und Kontrast testen und Tests für die interaktiven Teile ergänzen. Generierter Code ist ein Ausgangspunkt; zur Funktion wird er erst nach Review, Anbindung an echte Daten und Tests.

6. Häufige Fehler, die Sie vermeiden sollten

Teams stolpern meist an denselben Stellen. Vermeiden Sie sie, und der Workflow bleibt schnell.

• Ein ganzes Produkt auf einmal prompten – erzeugen Sie jeweils einen Screen oder Flow.
• Tokens und Komponenten überspringen – der Code wird hartkodiert und nicht themefähig.
• Generiertem Code ohne Review vertrauen – prüfen Sie stets Barrierefreiheit, Sicherheit und Datenverarbeitung.
• Credit-Limits ignorieren – planen Sie KI-intensive Iterationen im Rahmen Ihres Plans.

Fazit

Figma AI liefert Tempo, Claude Cowork eine kritische Zweitmeinung und eine disziplinierte Figma-Datei Code, der sauber in Ihre App passt. Gemeinsam ermöglichen sie einer Person oder einem kleinen Team, deutlich schneller polierte Oberflächen auszuliefern – solange ein Mensch für Entscheidungen, Review und Qualität verantwortlich bleibt. Wenn Sie Hilfe beim Aufbau dieses Workflows für Ihr Produkt möchten, melden Sie sich.