Figma Make ist jetzt ein echtes Design-to-Code-Tool

Die Kurzfassung: Figma Make liefert dir jetzt Code, den ein Frontend-Engineer nicht sofort löschen würde. Genau das ist der Grund, warum Designer darüber reden, und es ist bedeutsamer als ein weiterer Performance-Schub.

Am 18. Juni hat Figma ein produktionsreifes Make-Update ausgeliefert. Die Schlagzeile lautet nicht "es ist schneller". Die Schlagzeile lautet Fidelity. Make exportiert jetzt Komponenten, die mit deinen echten Design-Tokens und Code Connect-Mappings verdrahtet sind, statt dem lockeren, einmaligen Markup, das der Export bisher produzierte.

Dieser Unterschied ist die Grenze zwischen einem Partygag und einem Werkzeug. Wegwerfcode wird weggeworfen. Code, der auf dein System verweist, wird gemergt.

Die Diffs, die alle zeigen

Live ansehen auf figma.com

Dieses Update hat für Aufsehen gesorgt, weil Leute Belege liefern. Der @figma-Announcement-Thread kam innerhalb weniger Tage auf rund 9.200 Reposts, und die Antworten füllten sich mit nebeneinandergestellten Figma-to-React-Diffs von Teams, die es gegen ihre eigenen Systeme laufen ließen.

Das ist das Zeichen, das man beachten sollte. Das lauteste Signal ist nicht Figmas Marketingtext, sondern Engineers, die Vorher-Nachher-Diffs posten und das Ergebnis nicht verabscheuen. Wenn die Skeptiker still werden, hat sich etwas verändert.

Designer hören seit einem Jahrzehnt Versprechen zu "Design to Code". Das Versprechen ist immer beim Aufeinandertreffen mit einer echten Codebase gestorben, weil der Output das System ignorierte, auf dem die Codebase aufgebaut war. Diesmal überleben die Diffs die Begegnung.

Was sich wirklich geändert hat (Tokens und Code Connect, kein rohes Hex und Markup)

Live ansehen auf figma.com/make

Das alte Make hat einen Frame gelesen und beschrieben, was es sah. Es sah einen blauen Button und schrieb #2D7FF9. Es sah Padding und schrieb einen Pixelwert. Das Ergebnis sah richtig aus und war mit nichts verbunden.

Das neue Make liest denselben Frame und löst ihn gegen dein System auf. Der blaue Button kompiliert zu einer Token-Referenz, nicht zu einem eingefrorenen Hex-Wert. Die Komponente kompiliert zu deinem tatsächlichen Code Connect-Mapping, sodass sie auf die echte Komponente in deiner Codebase zeigt, statt eine neue zu erfinden.

Das ist der gesamte Wandel in einem Satz. Der Export hat aufgehört, Pixel zu beschreiben, und begonnen, auf deine Single Source of Truth zu verweisen.

Warum das in der Praxis wichtig ist: Token-Referenzen bedeuten, dass dein Code Theme-Änderungen kostenlos erbt. Ändere den Token, jeder Export folgt. Code Connect-Mappings bedeuten, dass der Export den Button wiederverwendet, den dein Team bereits pflegt, statt ein Beinahe-Duplikat zu erzeugen, das sich sofort verändert, wenn jemand es anfasst.

Alter Make-Output vs. das Update vom 18. Juni

Hier ist der Vergleich, denn der Vergleich ist das Argument.

Die rechte Spalte ist die einzige, die einen Platz in einem Pull Request verdient. Die linke Spalte erklärt, warum bis jetzt niemand "Design to Code" vertraut hat.

Wo es dich noch braucht

Make baut den Körper, nicht das Gehirn. Diese Grenze zu übertreiben hilft niemandem, also hier die ehrliche Grenze dessen, was das Update vom 18. Juni für dich tut.

Layout, Tokens und statische Komponenten-Gerüste kommen sauber raus. Alles, was eine Entscheidung erfordert, erfordert immer noch dich. Der Export weiß nicht, wie sich ein Loading-State anfühlen soll, was bei einem Fehler passiert, oder ob dein Empty State aufmuntern oder sich entschuldigen soll.

Accessibility verdient eine eigene Zeile. Make kann Alt-Attribute und halbwegs semantische Tags setzen, aber es kann keine Fokus-Reihenfolge festlegen, keine Live Region ankündigen oder verstehen, dass dein Modal den Fokus einfangen und zurückgeben muss. Das sind Ermessensentscheidungen darüber, wie ein Mensch deine Oberfläche durchnavigiert, und Ermessen ist nicht im Export enthalten.

Echte Daten sind der andere stille Killer. Ein Frame zeigt eine perfekte Zeile. Die Produktion zeigt den Nutzer, dessen Name 40 Zeichen hat, den Preis, der null ist, die Liste, die am ersten Tag leer ist.

Make baut das Gerüst für den Happy Path. Du handhabst die Realität.

Ein vernünftiger Figma-Make-in-the-Loop-Workflow diese Woche

Du musst deinen Prozess nicht neu aufbauen. Du musst Make am richtigen Punkt einsetzen und einen Menschen an den Nahtstellen behalten. Hier ist eine Version, die du diese Woche an einer echten Komponente ausprobieren kannst.

1. Bring zuerst deine Tokens und Code Connect wirklich zum Laufen. Das ist die unattraktive Voraussetzung. Make ist nur so gut wie das System, auf das es verweist. Wenn deine Tokens halb benannt sind und deine Code Connect-Abdeckung dünn ist, fix das, bevor du den Export beschuldigst.
2. Führe Make an einer gut aufgebauten Komponente aus, nicht an einem ganzen Screen. Nimm etwas mit klarer Struktur und einer sauberen Token-Geschichte. Du testest Fidelity, nicht ein Wunder.
3. Lies den Diff wie ein Code-Reviewer, nicht wie ein Fan. Bestätige, dass er zu Token-Referenzen aufgelöst und auf deine echte Komponente gemappt wurde. Wenn er einen Hex-Wert oder eine doppelte Komponente erfunden hat, war dieser Frame nicht system-sauber. Fix die Quelle.
4. Gib das Gerüst dem Engineer mit State-, Daten- und Accessibility-Arbeit, die klar als seine Aufgabe markiert ist. Der Export ist die Ausgangsstruktur. Die Entscheidungen sind die eigentliche Arbeit.
5. Speise das Gelernte wieder in das System ein. Jede Stelle, an der Make geraten hat, ist eine Stelle, an der deine Tokens oder Code Connect-Mappings unklar waren. Sie zu schärfen macht den nächsten Export besser. Das System wirft Zinsen ab.

Das Muster ist Human-in-the-Loop, nicht Human-out-of-the-job. Make entfernt den mühsamen Übersetzungsschritt. Es entfernt nicht das Denken.

Was das mit deinem Deliverable macht

Live ansehen auf atlassian.design

Das verändert still und leise, was "fertig" für einen Designer bedeutet. Jahrelang war das Deliverable ein pixelgenaues Frame und die höfliche Hoffnung, dass Engineering es nachbildet. Die Übereinstimmung war immer mit Verlust verbunden.

Jetzt ist das Frame näher am Vertrag. Wenn dein Design echte Tokens referenziert und deine Komponenten durch Code Connect gemappt sind, trägt der Export deine Intention mit weniger Abweichung in Code. Das Handoff hört auf, eine Übersetzung zu sein, und wird zu einer Übertragung.

Das erhöht den Wert von Systemarbeit und senkt den Wert von hübschen Screenshots. Die Designer, die das nächste Jahr gewinnen, sind diejenigen, deren Dateien so strukturiert sind, dass Make sauberen Output produziert. Eine unordentliche Datei produziert unordentlichen Code schneller, während ein diszipliniertes System vererbbaren Code produziert.

Das eigentliche Upgrade ist also nicht die KI. Es ist der Druck, endlich deine Tokens richtig zu benennen und deine Komponenten zu mappen. Make hat dafür gesorgt, dass sich diese Disziplin sofort auszahlt, nicht irgendwann.

FAQ

Das Update vom 18. Juni ändert die echten Antworten auf die Fragen, die Designer am häufigsten zu Figma Make stellen.

Schreibt Figma Make jetzt produktionsfertiges React?

Näher dran, aber nicht allein. Das Update produziert React, das mit deinen echten Tokens und Code Connect-Mappings verdrahtet ist, was solide und behaltenswert ist. State, Accessibility und echte Daten überlässt es immer noch dir. Behandle es als starken ersten Entwurf, nicht als fertiges Feature.

Was ist Code Connect und warum ist es für den Export wichtig?

Code Connect mappt eine Komponente in deiner Figma-Datei auf die echte in deiner Codebase. Das ist der Unterschied zwischen Make, das einen neuen Button erfindet, und Make, das den Button wiederverwendet, den dein Team bereits pflegt, sodass der Export auf deine Single Source of Truth zeigt, statt ein Duplikat zu erzeugen.

Verwendet Make meine Design-Tokens oder erfindet es eigene Werte?

Es verwendet deine Tokens, das Kernstück der Änderung vom 18. Juni. Alte Exports haben rohes Hex direkt ins Markup eingebacken. Das Update löst Werte zu Token-Referenzen auf, sodass dein Code Theme-Änderungen erbt, statt einen Snapshot einzufrieren. Ein rohes Hex im Output bedeutet, dass dieser Frame nie einem Token zugeordnet war.

Wo bleibt Make noch hinter den Erwartungen zurück?

Fünf Stellen brauchen noch einen Menschen, dieselben, die die Tabelle oben auflistet:

• State-Logik: loading, error, empty, success
• Interaktions- und Animationsverhalten
• Accessibility jenseits des Offensichtlichen
• Echte Daten, Edge Cases und lange Strings
• Wann eine Komponente wiederverwendet vs. neu erstellt werden soll

Make übernimmt Layout, Token-gemapptes Styling und statische Gerüste. Die Ermessensentscheidungen sind der Ort, an dem die eigentliche Arbeit lebt.

Sollte ich meinen Workflow diese Woche ändern?

Ja, auf eine kleine Art. Führe Make an einer einzigen sauberen Komponente aus, überprüfe den Diff wie ein Engineer, und nutze, was er offenbart, um deine Tokens und Code Connect-Abdeckung zu schärfen. Stell nicht dein ganzes Team über Nacht auf KI-Handoff um.

Das Fazit

Figma Make hat am 18. Juni die Grenze von Demo zu Tool überschritten. Der Beweis sind nicht die rund 9.200 Reposts im @figma-Announcement-Thread, sondern die Produktions-Diffs, die Engineers darunter gepostet und nicht gelöscht haben.

Der Mechanismus ist einfach. Make hat aufgehört, Pixel mit rohem Hex und einmaligem Markup zu beschreiben, und begonnen, auf deine echten Tokens und Code Connect-Mappings zu verweisen. Das ist der Unterschied zwischen Code, den du wegwirfst, und Code, den du mergst.

Übertreib es nicht gegenüber deinem Team. Make baut das Skelett. State, Interaktion, Accessibility und Edge Cases sind immer noch dein Job, und das wird auch immer so bleiben. Der klügste Schachzug diese Woche ist, das Update als Anlass zu nehmen, endlich deine Tokens und Code Connect in Ordnung zu bringen, denn ein sauberes System ist das, was dieses Feature von einem Spielzeug in ein Tool verwandelt, mit dem du wirklich ausliefern kannst.