Was der Design-zu-Code-Zyklus freischaltet
Da die Arbeit nun fließender zwischen Code und Arbeitsfläche hin- und herwechselt, ändern sich Workflows nicht nur, sie konvergieren geradezu.
Was der Design-zu-Code-Zyklus freischaltet teilen
Hero-Illustration von Kelli Anderson
Während die Grenze zwischen Code und Arbeitsfläche schwindet, finden Designer*innen und Entwickler*innen neue Wege, gemeinsam zu entwickeln. Alex Kern und Gui Seiz gestalten, wie dies bei bei Figma genau aussieht – Alex als Softwareingenieur mit Fokus auf KI-gesteuerter Kreation, Gui als Designdirektor für KI. Hier sprechen sie darüber, wie KI die Distanz zwischen Design und Technik verringert und was eine kontinuierlichere Arbeitsweise ermöglicht.
Wie verändert KI die Beziehung zwischen Design und Code?
Aus designtechnischer Sicht haben sich Workflows drastisch verändert. Code war früher teuer – komplex, mühsam und schwer zu überarbeiten. Im Vergleich dazu fühlte sich die Designerkundung günstig an. Man konnte breit gefächert vorgehen, schnell agieren und so bessere Entscheidungen treffen. KI hat diese Dynamik umgekehrt.
Anstatt 50 statische Frames zu entwerfen, kann ich etwas als funktionalen Wireframe erstellen und das Verhalten iterieren, nicht nur das Layout. Vom Code zur Arbeitsfläche zu wechseln, hilft, dieses festgefahrene Gefühl zu überwinden. Jetzt kannst du einen Schritt zurücktreten, die Richtung überdenken und auf eine Weise erkunden, die sich immer noch flüssig anfühlt.
Historisch gesehen war es mühsam, Code in den Designprozess einzubringen – Figma mit dem Codebestand synchron zu halten, eine konsistente Struktur in beiden zu bewahren und Entscheidungen zwischen Design und Engineering abzustimmen. KI ändert dies. Modelle können jetzt zuverlässig mit Code als kreativem Medium arbeiten.
Die Veränderung ist nicht nur die schnellere Codeerstellung. Es geht auch darum, die Übersetzung zwischen Arbeitsfläche und Code semantischer und weniger mechanisch zu gestalten.
Die Veränderung ist nicht nur die schnellere Codeerstellung. Es geht auch darum, die Übersetzung zwischen Arbeitsfläche und Code semantischer und weniger mechanisch zu gestalten.
Was bedeutet diese neue Beziehung für die Zusammenarbeit?
Code eignet sich gut für Single-Player-Umgebungen, in denen man sich in eine Richtung bewegt. Aber wenn du eine ganz andere Richtung erkunden möchtest, ist das Modell oft in Bezug auf das voreingenommen, was bereits im Code vorhanden ist. Das kann einschränkend sein. Die Fähigkeit, auf der Figma-Arbeitsfläche bidirektional zu denken, hilft Teams, aus diesem Muster auszubrechen.
Die alte Debatte war: Sollten Designer*innen coden? Jetzt codet die KI, also ist die interessantere Frage: Sollten Designer*innen die KI bitten, zu coden? Und warum nicht?
KI verändert, wer teilnehmen kann. Wenn jemand keinen Zugriff auf das interne Designsystem hat, kann er das Live-Produkt trotzdem als editierbare Frames in Figma importieren und von dort aus arbeiten. Manchmal ist das der eigentliche Wandel: keine Philosophie, nur ein Zugang. Die Eintrittsbarriere ist jetzt viel niedriger.
Wie verändert KI die Lernkurve für Designer*innen und Entwickler*innen?
In der Vergangenheit gab es eine große Lernkurve. KI fühlt sich eher für eine Startrampe an. Dein Ausgangspunkt ist viel höher und du bist von Anfang an fähiger. Wenn du tiefer gehen möchtest, ist es keine enorme Investition mehr. Du kannst am Arbeitsplatz lernen und im Laufe der Zeit deine Fähigkeiten verbessern – entweder als starke Spezialistin oder starker Spezialist in deinem Problemfeld oder als tiefgehende Expertin bzw. tiefgehender Experte für die spezifischen technischen Komponenten deines Produkts. Jetzt ist alles viel kontextbezogener.
Ich habe an sehr vielen Code-Bootcamps teilgenommen und es hat nicht klick gemacht. Damals war alles abstrakt. Jetzt bist du bei der Arbeit inspiriert und kannst die KI fragen: „Erkläre mir das im Kontext dessen, was ich tatsächlich entwickele.“ Ich verstehe jetzt Routen und React, weil ich konkrete Arbeiten habe, auf die ich es beziehen kann. Meine Ideen endeten früher an der Grenze meines technischen Wissens. Jetzt probiere ich mich an Shadern, arbeite in 3D und entwickle meine eigenen Tools. Früher hätte ich es nicht einmal in Erwägung gezogen.
Was ist der echte Unterscheidungsmerkmal, wenn alle Zugang zu den gleichen Tools haben?
Neugier, ebenso wie Geschmack, wird der eigentliche Unterschied sein. KI ermöglicht es Designer*innen, auf eine andere Weise als zuvor zu coden, und fungiert als sehr geduldiger Tutor. Sich einzurichten fühlte sich früher intensiv an, von neuen Tools und Frameworks bis hin zu Umgebungen und Syntax – all das. Jetzt ist es ein Eingabefeld. Um im Zeitalter der KI relevant zu bleiben, muss man sein Handwerk weiterentwickeln, und es war nie einfacher. Die neugierigen Designer*innen werden hier gewinnen.
Es wird wichtiger werden, dass sich Software durch Design auszeichnet – nicht durch das reine Kopieren von Bestehendem, sondern durch das Experimentieren damit, was es überhaupt bedeutet, Software zu liefern. Benutzeroberflächen, die Ingenieurwesen und Design verbinden, um Dinge zu entwickeln, die nur Software leisten kann: Visualisierungen von Daten, Echtzeitverständnis von Absichten, generative UI, ephemere Werkzeuge und bedarfsbasiertes Rechnen von überall. Die Technologie, dies zu tun, existiert heute bereits, aber es benötigt immer noch eine kreative Person mit einer eigenen Sichtweise, um zu definieren, was als Nächstes kommt.
Um im Zeitalter der KI relevant zu bleiben, muss man sein Handwerk weiterentwickeln, und es war nie einfacher. Die neugierigen Designer*innen werden hier gewinnen.
Wie bewährt sich dieser Roundtrip-Workflow in der Praxis wirklich?
Auf der Figma-Arbeitsfläche zu beginnen und zum Code zu gelangen, war früher für Ingenieur*innen teuer. Das liegt daran, dass es nicht nur darum geht, funktionierenden Code im Abstrakten zu erhalten, sondern es geht darum, ergonomischen Code zu erzeugen, der Bestand haben kann. Code hat eine Lebensdauer von Jahren und Jahrzehnten, daher wird unordentlicher Code zu einem langfristigen Problem. In der Vergangenheit war der Schritt der Designübersetzung wirklich mechanisch, mühsam und fehleranfällig. KI hat ein semantischeres Verständnis dieser Übersetzung ermöglicht.
Code zu Arbeitsfläche, Arbeitsfläche zu Code– ein echter Roundtrip-Workflow existiert. Die Designer*innen können Code zur Arbeitsfläche und die Entwickler*innen die Arbeitsfläche zum Code bringen, oder umgekehrt. Es ermöglicht es Teammitgliedern, autarker zu sein, da viele Design- und Textänderungen im Code jetzt von Designer*innen durchgeführt werden können.
Früher war Figma der Ort, an dem man sich abstimmte. Code war die Quelle der Wahrheit. Die Brücke zwischen ihnen waren Screenshots: Jemand würde ihre App erfassen, die Bilder in Figma bringen, Änderungen kennzeichnen und sagen: „Das ist, was ich mir vorstelle.“ Dann musste es jemand anderes neu aufbauen.
Jetzt kann man das Storybook, Blogbeiträge, Grafiken, Tabellen importieren und echte Daten sehr schnell in Figma importieren. Früher war es schwer, dieses Maß an Genauigkeit zu erreichen. Jetzt gibt es viel mehr Überschneidungen. Man kann die beiden Ebenen synchronisieren und fast 100 % Abdeckung erzielen.
Was passiert mit den Timelines, wenn Modelle keine Zeit erfahren?
Für Ingenieur*innen war die Zeit schon immer eine entscheidende Einschränkung. Jetzt, mit Agents, nehmen Ingenieur*innen Projekte in Angriff, die vorher eine unvernünftige Zeitverschwendung gewesen wären – große Open-Source-Projekte in verschiedenen Sprachen und Frameworks neu zu schreiben, Browser von Grund auf zu erstellen, Backlogs in beispiellosem Tempo zu durchforsten, massive Unternehmungen mit kleinen Teams, manchmal sogar solo, zu bewältigen. Diese Agents können sich wirklich schnell bewegen, aber Modelle haben kein Zeitgefühl. Es ist lustig, Claude Code wird mir eine Schätzung geben, dass etwas drei Monate dauern wird. Und ich denke mir: „Nein, du wirst das in fünf Minuten machen.“
Es ist lustig, weil es wahr ist – niemand schätzt mehr. Man probiert es einfach aus. So verschiebt sich die Frage von „Wie lange wird das dauern?“ zu „Was wollen wir entwickeln?“
Dieser Artikel erschien in unserem jährlichen Printmagazin „Start Anywhere“. Schau dir die digitale Version an oder kauf dir ein Exemplar.
