Deine Design-Bibliothek verbinden
Verweise den Agenten auf dein Design System, damit der generierte Code deine echten Token, Variablen und Komponentenstruktur nutzt – nicht generische Platzhalter.
Dein Figma-zu-Code-Konverter direkt auf der Arbeitsfläche
Verwandle deine Figma-Designs mit KI in produktionsreifen Code – direkt in deiner Datei. Kein Exportieren, kein Neuaufbauen in einem separaten Tool, keine unterbrochenen Übergaben zwischen Design und Entwicklung.
Vom Design zur Entwicklung, alles an einem Ort
Der Figma-Agent übersetzt deine echten Ebenen, Komponenten und Styles in Code, den Entwickler nutzen können – so arbeitet jeder in derselben Datei.
Code generieren, der zu deinem Design passt
Der Figma-Agent liest deine echten Ebenen, Abstände und Komponenten, um Code zu erzeugen, der widerspiegelt, was du gebaut hast – keine grobe Annäherung, die von Grund auf neu gebaut werden muss.
Weniger Reibung bei der Übergabe, schneller liefern
Spare dir das Hin und Her beim Exportieren von Specs, Annotieren von Redlines und Beantworten von Fragen zum Padding. Der Agent übersetzt deine Designentscheidungen in Code, mit dem Entwickler direkt arbeiten können.
Designer und Entwickler aufeinander abgestimmt halten
Die Codegenerierung findet in derselben Datei statt, in der dein Team designt, sodass alle die Source of Truth sehen. Keine veralteten Exporte mehr im Umlauf, keine Verwirrung darüber, welche Version aktuell ist.
Die Funktionen hinter der Konvertierung
Ein genauerer Blick darauf, was den Figma-Agenten auszeichnet – entwickelt für die Art, wie Design-Teams wirklich arbeiten.
Paralleles Prompten
Erkunde mehrere Code-Ergebnisse gleichzeitig – probiere eine React- und eine HTML-Version parallel aus und wähle dann die, die zu deinem Stack passt.
Teilbare Threads
Teile einen Thread, und dein Team sieht den vollständigen Prompt, den Design-Kontext und den generierten Code. Entwickler verstehen das Warum hinter dem Ergebnis.
Mit Folge-Prompts verfeinern
Das erste Ergebnis nicht ganz richtig? Passe es im selben Thread an – frag nach responsiven Breakpoints, einer anderen Syntax oder saubereren Namenskonventionen.
Figma fühlt sich an wie eine natürliche Verlängerung meiner Hand. Ich entwickle meine Design-Ideen auf der Arbeitsfläche, und jetzt übernimmt der Agent die letzte Etappe. Mit meinen verbundenen Design-Bibliotheken komme ich schneller vom Design zum Code als je zuvor.
Andy Madrick
Product Designer bei Notion
Mit dem Figma-Agenten starten
Dein Design auswählen
Öffne deine Datei in Figma Design und wähle den Frame, die Komponente oder den Bereich aus, den du in Code umwandeln möchtest.
Die Ausgabe beschreiben
Sag dem Agenten, was du brauchst – HTML und CSS, React-Komponenten, oder ein bestimmtes Framework. Erwähne alle Konventionen, die dein Team befolgt.
Den Code überprüfen
Prüfe das generierte Ergebnis auf deiner Arbeitsfläche. Nicht ganz richtig? Verfeinere im selben Thread oder probiere einen parallelen Prompt für einen anderen Ansatz.
An die Entwicklung übergeben
Teile den Thread mit deinen Entwicklern. Sie sehen dein Design, den Prompt und den generierten Code an einem Ort – bereit zur Umsetzung oder Iteration.
Zum Agenten-Profi werden
Der Design-Agent von Figma ist da
Mehr erfahrenSieh dir Figmas KI-Agenten in Aktion an und erfahre, wie du ihn in deinen eigenen Workflows einsetzen kannst.
Mit dem Figma-Agenten arbeiten
LoslegenEin praxisnaher Spielplatz, um die Fähigkeiten des Figma-Agenten zu erkunden – von Massenbearbeitungen bis zur Umsetzung von Feedback – mit integrierter Schritt-für-Schritt-Anleitung.
So nutzt du den Figma-Agenten in deinen Design-Workflows
Jetzt ansehenLerne mit einem Schritt-für-Schritt-Tutorial vom Figma-Team, wie du den Figma-Agenten in deinen Design-Workflows einsetzt.
FAQ
Ein Figma-zu-Code-Konverter übersetzt visuelle Designs in produktionsreifen Code – HTML, CSS, React oder andere Formate. Der Figma-Agent macht das direkt auf deiner Arbeitsfläche: Er liest deine echten Ebenen, Komponenten und Design-Tokens, um Code zu generieren, der dem entspricht, was du gebaut hast. Kein separates Tool oder Exportschritt nötig.
Wähle in Figma Design den Frame oder die Komponente aus, die du konvertieren möchtest, und öffne dann den Agenten über die linke Seitenleiste oder drücke CMD + Enter. Beschreibe die gewünschte Ausgabe – React, HTML, responsives CSS – und der Agent generiert Code basierend auf deinen echten Design-Ebenen. Verfeinere mit Folge-Prompts, bis es entwicklungsbereit ist.
Der Figma-Agent kann Code aus deinen Designs generieren, wenn du ihn per Prompt dazu aufforderst. Wähle einen Frame aus, beschreibe das gewünschte Ausgabeformat, und der Agent übersetzt deine Ebenen in Code. Es ist nicht vollständig automatisch – du steuerst den Prozess mit Prompts – aber er übernimmt die Übersetzungsarbeit, damit du nicht manuell neu bauen musst.
Die Genauigkeit hängt davon ab, wie gut strukturiert dein Design ist. Der Figma-Agent liest deine echten Ebenen, Abstände und Komponentenhierarchie, sodass saubere, gut organisierte Dateien saubereren Code erzeugen. Du kannst Ergebnisse mit Folge-Prompts verfeinern – durch Anpassen von Namenskonventionen, responsivem Verhalten oder Syntax – bis der Code deinen Standards entspricht.
Der Figma-Agent ist in allen kostenpflichtigen Figma-Plänen verfügbar. Du findest ihn in der linken Seitenleiste in Figma Design. Während der aktuellen offenen Beta-Phase verbraucht er keine KI-Credits – der perfekte Zeitpunkt also, um ihn auszuprobieren, zu experimentieren und uns dein Feedback zu geben.
Schneller entwickeln mit dem Figma-Agenten