24. Juni 2026

Code auf der Figma-Arbeitsfläche

Nikolas KleinProduct Manager, Figma

Produktkonzept mit geteiltem Bildschirm, das eine Ausstellungswebseite, eine generierte Schnittstelle zur Ticketbuchung und die dazugehörige React-Code-Implementierung nebeneinander zeigt und so den Workflow vom Design bis zum Code veranschaulicht.

Mit den Code-Ebenen in Figma Design kannst du gemeinsam mit deinem Team verschiedene Ansätze mit Code ausprobieren.

Code auf der Figma-Arbeitsfläche teilen

Der Kreis der Entwickler, die etwas erstellen können, und die Bandbreite der Gestaltungsmöglichkeiten haben sich erweitert. Allzu oft findet dieser Prozess jedoch im Alleingang statt, in separaten Chats, in unzusammenhängenden Workflows und durch isolierte Erkundungen.

Der Einstieg ist flexibel:

Füge in Figma Design über die Symbolleiste eine Code-Ebene hinzu, erstelle eine aus einem vorhandenen Frame oder bitte den Figma-Agenten, eine zu generieren. Beginne von dort aus mit einer Vorlage oder beschreibe, was du erstellen möchtest. Du kannst auch eine vorhandene Codebasis einbinden, indem du ein GitHub-Repository importierst oder einen lokalen Ordner direkt hochlädst.

In Make kannst du Code generieren und bearbeiten, ihn dann in eine Code-Ebene auf der Arbeitsfläche bringen, um ihn dann mit deinem Team zu erkunden, zu vergleichen und zu verfeinern.

Mit Code-Ebenen in Figma Design wird interaktiver Code Teil der Arbeitsfläche selbst, sodass Teams Ideen gemeinsam an einem Ort leichter erkunden, weiterentwickeln und gestalten können.

Erkunde die Möglichkeiten mit Code-Ebenen auf der Figma-Arbeitsfläche.

Zieh alle deine Alternativen in Betracht

Designer haben schon immer Frames dupliziert, um Alternativen auszuprobieren—Code-Ebenen funktionieren auf die gleiche Weise. Die Benutzererfahrungen lassen sich auf der Arbeitsfläche nachstellen, sodass du nicht nur sehen, sondern auch hautnah erleben kannst, wie sich die verschiedenen Optionen tatsächlich anfühlen. Verschiebe, pass an und ändere die Größe von Elementen – und erhalte sofort eine Rückmeldung im Code.. Probiere immer wieder neue Eingabeaufforderungen aus. Der Agent generiert dann eine neue Version, wobei das Original erhalten bleibt. Da deine gemeinsam genutzte Datei Code-Ebenen enthält, können sich deine Teammitglieder einklinken, Kommentare hinterlassen und auf derselben Ebene Eingaben machen.

Ein Kartendesign mit einer Positionsmarkierung, neben einem Menü, das „Mit Code bauen“ hervorgehoben zeigt. — Verwandel jeden Frame auf der Arbeitsfläche in funktionierenden Code, indem du den Agenten bittest, es für dich zu erstellen.

Wechsele zwischen deinen Materialien

Code-Ebenen machen Software erforschbar. Durch die Auswahl von Designs extrahieren kannst du den Code visuell verständlich machen, indem du den aktuellen Zustand wieder in bearbeitbare Figma-Ebenen umwandelst. Du entscheidest, was auf die Arbeitsfläche kommt—einzelner Bildschirm, ein bestimmter Zustand oder ein vollständiger Flow. Von dort aus aktualisiert ein Klick die Code-Ebene mit deinen Änderungen. So kannst du flüssig zwischen Arbeitsfläche und Code arbeiten.

Zwei Mockups von mobilen Apps in einem Design-Tool, mit einer Symbolleiste, auf der „Designs extrahieren“ und „Code-Editor öffnen“ steht. — Extrahiere wichtige Abläufe und Zustände aus dem Code und übertrage sie als bearbeitbare Design-Ebenen auf die Arbeitsfläche.

Verfeinere alles mit deinem Urteilsvermögen

Wenn du mehr Detailgenauigkeit benötigst, kannst du im Code-Editor Anmerkungen hinzufügen und den Agenten bitten, die gewünschte Änderung vorzunehmen, oder direkt in den Code klicken und die Änderung selbst vornehmen. Wenn du zufrieden bist, konvertiere es zurück in die Code-Ebene und pushe es in dein Repo, damit dein Quellcode die Änderungen widerspiegelt, die du vorgenommen hast. Jetzt kann dein gesamtes Team das Update sehen.

Ein Code-Editor zeigt React-Code von App.tsx und überlagert ein dunkles Veranstaltungsseitendesign. — Nimm Änderungen an dem im Code-Editor generierten Code vor.

Mit den Code-Ebenen in Figma Design wird die Arbeitsfläche zu einem gemeinsamen Raum, in dem Design und Code sich gemeinsam weiterentwickeln—ein Ort, an dem man Dinge ausprobieren, vergleichen und die richtige Idee für die Umsetzung finden kann.

Code-Ebenen werden in den nächsten Wochen in der geschlossenen Beta-Version eingeführt. Melde dich hier an, um einen frühen Zugang zu beantragen. Besuch unser Hilfecenter, um eine Zusammenfassung dessen zu sehen, was wir bei Config vorgestellt haben, und um zu erfahren, wie du loslegen kannst. Hier findest du Antworten und Inspirationen zu allem von Figma unter Figma Learn.