6 Wege, wie Teams mit Code-Ebenen experimentieren

Als wir Code auf die Arbeitsfläche brachten, waren wir gespannt, wie Teams visuell entwickeln, gemeinsam Ideen formen und die Grenzen des Möglichen verschieben würden. Viele von ihnen nutzen Code-Ebenen bereits, um codebasierte Ideen auf der Arbeitsfläche zu erkunden und schneller zwischen Design und Code zu wechseln. Ob du eine Mikrointeraktion testest oder einen kompletten Flow durchdenkst: Teams von Dell bis Cox Automotive bieten dir einen guten Ausgangspunkt.

Erfahre mehr über Code-Ebenen.

Superside: Komplexe Interaktionen aus statischen Designs

Superside ist Kreativpartner globaler Marken, und Leonardo Rica, Leiter Motion Design, wollte mit Code-Ebenen neue Möglichkeiten für interaktive Animationen ausloten. Als Testprojekt entwickelte Leonardo das Konzept für eine interaktive Kreditkarten-Wallet: Man scrollt durch einen Kartenstapel, tippt auf eine Karte, um sie nach vorne zu holen, und dreht sie um, um ihre Details zu sehen. Leonardo gestaltete die statischen Frames in Figma, bat den Figma-Agenten, sie in eine Code-Ebene umzuwandeln, und ergänzte diese dann per Prompts um Animationen. Dazu lieferte er Referenz-Screenshots und exakte Werte für Position, Größe und Federbewegung jeder Karte. „Code-Ebenen funktionieren am besten, wenn ich ihnen konkrete Zahlen vorgebe“, sagt Leonardo. Das Ergebnis ist ein Maß an Interaktivität, das sich mit einem klassischen Prototyp seiner Meinung nach kaum umsetzen ließe.

Statt alles auf einmal zu generieren, ging Leonardo schrittweise vor. „Zuerst habe ich das Scrollen hinbekommen, dann habe ich Tippen und Umdrehen ergänzt, ohne zu zerstören, was schon funktionierte“, sagt er. Einmal wurde eine Karte, die zurück in den Stapel glitt, kurzzeitig vor den Karten angezeigt, die eigentlich über ihr hätten liegen sollen. Leonardo beschrieb die Ursache in einem einzigen, präzisen Prompt, und der Figma-Agent behob den Fehler „wie von Zauberhand“. Als Nächstes sieht er Code-Ebenen als Motor für interaktive Animationssysteme von Marken, vom Scroll- und Tippverhalten bis zu Momenten in der Produkt-UI. Die Kundschaft kann all das erleben, bevor überhaupt etwas in die Entwicklung geht.

Dell: Funktionierende Alternativen im Vergleich

Miguel Wermuth, Produktdesigner bei Dell, arbeitet am Kundenkonto-Erlebnis für Geschäftskund*innen und Käufer*innen auf dell.com – mobil, auf dem Tablet und am Desktop. Seit das Designsystem-Team von Dell seine in Code umgesetzten React-Komponenten in Figma verfügbar gemacht hat, entstehen Miguels Code-Ebenen aus denselben Komponenten, die auch die Entwickler*innen nutzen. So bekommen Teammitglieder ein realistischeres Bild davon, wie ein vorgeschlagenes Design im fertigen Produkt aussehen und sich verhalten würde. Mit Code-Ebenen bringt Miguel dialogbasierte KI-Erlebnisse auf die Arbeitsfläche: Stakeholder können eine Frage stellen, und der Prototyp antwortet mit dem passenden Screen. „Dass Stakeholder tatsächlich etwas in ein Textfeld eintippen können, hebt das Erstellen von Prototypen auf ein Level, das wir vorher nicht hatten“, sagt er.

Sobald andere Designer*innen einen Flow abgesegnet haben, setzt Miguel ihn in Code-Ebenen um. So holt er die Freigabe funktionsübergreifender Partner*innen ein, die einem funktionierenden Prototyp leichter folgen können als einer Reihe statischer Screens. Bei Änderungen dupliziert er Code-Ebenen, um Versionen nebeneinander zu behalten. So fällt die Wahl zwischen Alternativen leichter, als wenn er sich durch den Versionsverlauf klicken müsste. „Es ist, als würde man vor einer Wand stehen und sich erst A und dann B ansehen“, sagt Miguel. Auch in Review-Zyklen macht der funktionierende Prototyp Eindruck: „Wenn ich ihn Produktmanager*innen und Stakeholdern aus dem Business zeige, gibt es diesen Wow-Effekt. Er ist extrem funktional.“

Cox Automotive: Zehnmal schneller zum Prototyp

Cox Automotive, ein Unternehmen von Cox Enterprises, entwickelt VinSolutions, ein CRM-System, mit dem Autohäuser ihre Kundenbeziehungen verwalten. Lindsay Brechler, Senior-Produktmanagerin, bringt KI in diese Workflows – unter anderem mit dem Virtual Contact Assistant, einem vom Team entwickelten Agenten, der im Namen des Autohauses E-Mails und SMS an die Kundschaft senden kann. Um die Stakeholder bei vier vorgeschlagenen Stufen einer neuen Funktion für Autohäuser auf eine Linie zu bringen, holte Lindsay einen großen HTML-Prototyp in Code-Ebenen und verfeinerte ihn mit dem Figma-Agenten. „Ich bin keine Designerin, ich bin Produktmanagerin“, sagt sie. „Die Bearbeitung hat der Agent übernommen, also konnte ich mich auf die Konzepte hinter den einzelnen Stufen konzentrieren.“

Weil jede Version auf der Arbeitsfläche erhalten blieb, konnte Lindsay an jeder beliebigen Version anknüpfen und weiter iterieren, ohne bei null anzufangen. „Ich habe 19 Versionen durchlaufen und dabei nur etwa eine Stunde selbst an der Tastatur gesessen, weil der Agent den Großteil der Verarbeitung übernommen hat“, sagt sie. „Verglichen damit, das als Nicht-Designerin selbst in Figma zu bauen, ist das mindestens zehnmal effizienter, also rund 90 Prozent Zeitersparnis.“ Als der Prototyp fertig war, lud Lindsay eine einzige, komplexe HTML-Datei herunter, um sie auf der internen Website von Cox Automotive zu teilen. „Von Iteration zu Iteration halten Code-Ebenen alle Screens und Interaktionen sehr gut zusammen“, sagt sie. Der klickbare Prototyp zeigt, was ein langes Produktanforderungsdokument nicht kann, und hält Design, Entwicklung und Produktmanagement auf einer Linie, während sie die Funktion gemeinsam gestalten.

Rocket Money: Details früh klären

Rocket Money, eine operative Tochtergesellschaft von Rocket, LLP, hilft Menschen, die Kontrolle über ihre persönlichen Finanzen zu übernehmen. Derek Onay, leitender Produktdesigner für Designsysteme, nutzt Code-Ebenen, um frühe Ideen als funktionierende Prototypen mit dem Team zu teilen. Designsysteme stecken im Detail: vom Aussehen und Verhalten einzelner Komponenten bis hin zu ihrem Zusammenspiel im gesamten Produkt. Als das Team grundlegende Screen-Komponenten entwickelte, war es wichtig, Interaktionsdetails früh festzulegen und anhand der Standards für Barrierefreiheit zu prüfen, bevor sich diese Details auf die Menschen auswirkten, die das Produkt nutzen. Um diese Gespräche voranzubringen, erstellte Derek ein Konzept in Code-Ebenen. „Über Interaktionsmuster zu sprechen, ist für mich der größte Gewinn, denn genau diese Dinge lassen sich mit statischen Frames nur schwer vermitteln“, sagt er.

Derek bat den Figma-Agenten per Prompt, ein bestehendes Design in Code nachzubauen und dabei die exakten Komponentennamen aus dem Designsystem des Teams zu verwenden. Nach ein paar Minuten und zwei Prompts zum Aufräumen teilte er das Ergebnis mit den Stakeholdern, um zu entscheiden, ob es sich lohnt, das Konzept weiterzuverfolgen. „Code-Ebenen sind ein großer Gewinn für die Abstimmung und das Erstellen von Prototypen“, sagt Derek. „Statt zu versuchen, ein Interaktionsmuster zu beschreiben, kann ich einfach einen Link zu einer Code-Ebene teilen und es mit meinem Team durchsprechen.“

Merkle: Weniger Übergaben zwischen Design und Entwicklung

Merkle, eine globale Unternehmensberatung, setzt Code-Ebenen im gesamten Design- und Entwicklungsprozess ein, von der Ideenfindung auf einer leeren Arbeitsfläche bis zur Iteration von Funktionen, die bereits in Code umgesetzt sind. Dadurch sind Iteration und Funktionsentwicklung 30 Prozent schneller, weil es weniger Übergaben gibt und seltener auf verfügbare Designer*innen oder Entwickler*innen gewartet werden muss. Außerdem verbringen die Teams bis zu 50 Prozent weniger Zeit mit Dokumentation wie Interaktionsspezifikationen in Tickets. „Code-Ebenen verbessern unsere Möglichkeiten enorm, Ideen bestmöglich zu vermitteln“, sagt Dave Calleja, VP und globaler Leiter Experience Design. „Sie geben Teams mehr Optionen, nicht weniger, um Neues zu erkunden, Ideen weiterzuentwickeln und zusammenzuarbeiten – auf eine Weise, die ohne erheblichen Mehraufwand bisher nicht möglich war.“

Vor allem stehen Code-Ebenen für einen Wandel von Übergaben hin zu einer Zusammenarbeit Hand in Hand, sodass Merkle und seine Kundschaft schneller arbeiten und die Arbeit gleichzeitig weiter vorantreiben können. „Die Stärke der Code-Ebenen von Figma liegt darin, dass die vermeintliche Entscheidung zwischen codebasierten und arbeitsflächenbasierten Tools wegfällt und man trotzdem die volle Leistung beider bekommt“, sagt Dave.

Checkout.com: Funktionierenden Code im Design verfeinern

Checkout.com ist eine globale Zahlungsplattform, und Kris Murphy, Senior-Produktdesigner, gestaltet dort Zahlungsfunktionen. Als ein potenzieller Kunde die Technologie in Aktion sehen wollte, baute Kris eine Demo in Code-Ebenen und teilte Screenshots der App des Kunden, damit der Figma-Agent Farben, Schriftarten und Designmuster daran angleichen konnte. „Mit Code-Ebenen konnte ich schnell Ideen entwickeln und umsetzen“, sagt er.

Bevor Kris die Demo mit dem Kunden teilte, wollte er sicherstellen, dass jeder Screen den letzten Schliff hatte. Statt sich Screen für Screen durch den Prototyp zu klicken, zog er alle Screens aus der Code-Ebene auf die Figma-Arbeitsfläche. Dort konnte er sie ganz einfach nebeneinander prüfen und alles finden und korrigieren, was noch überarbeitet werden musste. Anschließend schickte Kris diese Änderungen zurück an die Code-Ebene, und das Team von Checkout.com konnte zusätzlich den gesamten Verlauf der Überarbeitungen auf der Arbeitsfläche prüfen.

Code-Ebenen werden als offene Beta-Version eingeführt und verbrauchen KI-Credits. In kostenpflichtigen Abos ist das Erstellen und Bearbeiten in Code-Ebenen bis einschließlich 4. November 2026 kostenlos.