Mit Code-Ebenen gemeinsam auf der Arbeitsfläche gestalten

Durch das Entwerfen mit Code kannst du erkennen, wie sich Erlebnisse – Mikrointeraktionen bis hin zu vollständigen Flows – anfühlen und wie sie sich verhalten. Doch wenn jeder separat mit einem eigenen Coding-Tool arbeitet, hast du häufig das Gefühl, isoliert zu arbeiten, was das Teilen und Vergleichen von Arbeit erschwert.

Deshalb haben wir Anfang des Jahres Code-Ebenen eingeführt, sodass Teams auf einer gemeinsamen Figma-Arbeitsfläche coden können. Vorher erfolgte Code-basiertes Erkunden in einer IDE. Viele Figma-Benutzer*innen bevorzugen jedoch eine andere Arbeitsweise. Durch Code-Ebenen können Teams visuell coden und dabei alle Zusammenarbeitstools der Figma-Arbeitsfläche nutzen. Teammitglieder können Prototypen parallel ausprobieren, Feedback hinterlassen oder eine Code-Ebene duplizieren, um eigene Ideen zu erkunden – alles an einem Ort. Ganz gleich, ob du bestehende Designs in funktionierenden Code umwandeln, einen codierten Prototypen aus einem Drittanbietertool, einem lokalen Ordner oder GitHub importieren oder mit der Chrome-Erweiterung den Live-Inhalt deiner Website erfassen möchtest, kannst du mit den Code-Ebenen weiter auf der Arbeitsfläche arbeiten.

Informiere dich über alles, was in dieser Woche gestartet wird.

Auf Grundlage deiner bisherigen Arbeit entwickeln

Wenn du eine neue Produktidee erkundest, ist es manchmal hilfreich, bei null anzufangen. In anderen Fällen (z. B. bei der Entwicklung neuer Features oder Flows) ist es effizienter, von bestehendem Code auszugehen. Code-Ebenen bieten mehrere Möglichkeiten, auf bestehender Arbeit aufzubauen. Importiere eine unterstützte, leichte Prototyp-Codebasis aus GitHub oder einem lokalen Ordner, um auf den bereits vorhandenen Bildschirmen und Interaktionen aufzubauen. Wenn du aus GitHub importierst, bleibt die Code-Ebene mit diesem Repository verbunden.

Zum Beispiel übertrug bei Cox Automotive, einem Anbieter von Software und Dienstleistungen für Autohäuser, die leitende Produktmanagerin Lindsay Brechler einen vorhandenen HTML-Prototypen in Code-Ebenen, damit sich Stakeholder bei einem neuen Feature daran orientieren können. Da jede Version auf der Arbeitsfläche verblieb, konnte Lindsay jede von ihnen als Grundlage verwenden und weiter iterieren, ohne von vorne anfangen zu müssen. „Code-Ebenen halten bei jeder Iteration jeden Bildschirm und jede Interaktion sehr gut zusammen“, sagt Lindsay.

Du kannst ein Figma-Design auch in eine interaktive Code-Ebene umwandeln. Diese Methode verwendet Derek Onay, leitender Produktdesigner für Designsysteme bei Rocket Money, zum Teilen früher Ideen mit seinem Team. Als das Team an grundlegenden Bildschirmkomponenten arbeitete, war es wichtig, Interaktionen und Barrierefreiheit frühzeitig festzulegen, bevor sie die Benutzer*innen des Produkts beeinflussten. Derek entwickelte ein Konzept in einer Code-Ebene, um diese Gespräche voranzutreiben. „Der große Vorteil von Code-Ebenen besteht darin, dass ich Ideen besser kommunizieren und mich leichter mit den Stakeholdern abstimmen kann“, sagt er. „Ich kann einen funktionierenden Prototyp teilen und mein Team dort abholen, wo sie sich bereits in Figma befinden.“

Zusätzlich zu bestehendem Code und vorhandenen Designs kannst du einen Prototyp von deinem Coding-Tool über den MCP-Server von Figma in die Arbeitsfläche übertragen oder mit der Figma Chrome-Erweiterung deine Live-Webseite als Code-Ebene erfassen.

Gemeinsames Erkunden und Entwickeln

Wenn du in einer IDE mit Coding-Agenten arbeitest, kann es schnell dazu kommen, dass du dich auf deine erste Idee konzentrierst, bevor du die Alternativen in Betracht gezogen hast. Mit Code-Ebenen können sich mehrere Versionen eines Prototyps auf der Arbeitsfläche befinden: Du und dein Team können einen Prototyp duplizieren, einen anderen Ansatz ausprobieren und beide Versionen vergleichen, ohne zwischen ihnen wechseln zu müssen.

Miguel Wermuth, ein Produktdesigner bei Dell Technologies, arbeitet an der Kundenerfahrung für Enterprise-Kund*innen und -Käufer*innen auf dell.com über Mobilgeräte, Tablets und Desktops. Er verwendet Code-Ebenen, um dialogorientierte KI-Erfahrungen zu schaffen, bei denen Stakeholder eine Frage eingeben können und der Prototyp auf der Arbeitsfläche mit dem richtigen Bildschirm darauf reagiert. Sobald ein Flow von den anderen Designer*innen genehmigt ist, baut Miguel ihn in Code-Ebenen auf, um die Zustimmung der Geschäfts-Stakeholder zu erhalten, die einen funktionierenden Prototypen leichter nachvollziehen können als eine Reihe statischer Bildschirme. Um Versionen zu vergleichen, dupliziert er Code-Ebenen nebeneinander auf der Arbeitsfläche. „Mit Code-Ebenen kann ich beim Designen auf der Arbeitsfläche mit Code arbeiten. Diese Möglichkeit zum direkten Wechsel zwischen Design und Code ist ein echter Vorteil.“

Es geht jedoch nicht nur um die Evaluierung einer Richtung: Mit Code-Ebenen hast du die Möglichkeit, herauszuzoomen und ein Produkterlebnis ganzheitlich zu betrachten. Matt Davey, Chief Experience Officer bei 1Password, beschreibt dies wie folgt: „Die wahre Superkraft von Figma war schon immer die Arbeitsfläche. Um den gleichen Effekt zu erhalten, hätten wir früher alle Seiten einer Website ausdrucken und auf ein Whiteboard kleben müssen. Die Möglichkeit, diese UI-Elemente zusammen betrachten zu können, ist unglaublich wertvoll.“

Optimieren, ohne den Code außen vor zu lassen

Wenn du eine Idee optimierst, kannst du mit Code-Ebenen Designanpassungen vornehmen und auf den funktionierenden Prototyp anwenden. Für visuelle Änderungen, die du lieber direkt vornehmen möchtest, verwandelt die Funktion Designs extrahieren einen Bildschirm oder Flow aus einer Code-Ebene in editierbare Figma-Ebenen.

Bei Checkout.com arbeitet Senior Product Designer Kris Murphy an Produkten, die Unternehmen in ihre eigenen Kundenerfahrungen integrieren. Als potenzielle Kund*innen die Technologie in Aktion sehen wollten, erstellte Kris mithilfe von Code-Ebenen eine Demo. „Mit den Code-Ebenen konnte ich die Demo rund 50 % schneller erstellen, obwohl ich mit dem Tool noch nicht ganz vertraut bin“, sagt Kris. Bevor Kris die Demo den Kund*innen präsentierte, wollte er sicherstellen, dass jeder Bildschirm perfekt ist. Anstatt den Prototyp Bildschirm für Bildschirm durchzuklicken, zog er jeden Bildschirm aus der Code-Ebene auf die Figma-Arbeitsfläche. Von dort aus war es einfach, sie nebeneinander zu überprüfen, um alles zu erfassen und zu beheben, was überarbeitet werden musste. Kris schickte dann die Überarbeitungen zurück an die Code-Ebene, und das Checkout.com-Team konnte auch den vollständigen Flow der auf der Arbeitsfläche vorgenommenen Überarbeitungen überprüfen. „Code-Ebenen fühlen sich wie eine richtige Brücke zwischen Design und Entwicklung an“, sagt er. „Dadurch konnte ich schnell Ideen entwickeln und liefern.“

Weitere Bearbeitungsoptionen umfassen das direkte Kommentieren eines Prototyps, das Hinzufügen von Anmerkungen zu Prototyp-Frames, um dem Agenten zu zeigen, wo eine Änderung erforderlich ist, oder das direkte Untersuchen und Bearbeiten von Code. Und durch die neu aktualisierte Vollbild-Option kannst du mit dem Agenten für verschiedene Teile der Arbeit in verschiedenen Threads arbeiten.

Sobald du bereit bist, deine Änderungen zu teilen, kannst du den aktualisierten Code in einen Zweig schieben, damit Teamkollegen weiterhin auf dem Prototyp aufbauen können. Bitte dein Team dann mit einer Pull-Anfrage, diese Änderungen zu überprüfen, bevor sie in das gemeinsame Projekt integriert werden.

Code-Ebenen sind ab heute als offene Beta-Version verfügbar und werden KI-Credits verwenden. Bei den kostenpflichtigen Abos ist das Erstellen und Bearbeiten innerhalb der Code-Ebenen bis zum 4. November 2026 kostenlos.