Zwei Terminseiten sehen ordentlich aus. Beide haben ein Datumsfeld und einen Speichern-Knopf. Bei der ersten ändert ein Dialog den Termin, bei der zweiten öffnet sich eine eigene Seite. Welche Variante ist besser? Ein Bildschirmfoto hilft bei Farben und Abständen. Ob Menschen den Ablauf verstehen, zeigt es nur begrenzt.
Figma öffnete Code Layers am 15. Oktober 2026 als Beta. Unterstützte Prototypen können auf der gemeinsamen Designfläche mit Code weiterentwickelt und verglichen werden; bestehender Code lässt sich unter den dokumentierten Bedingungen einbeziehen. Der redaktionell interessante Punkt ist die gemeinsame Arbeit am Verhalten. Ein Prototyp wird dadurch zum Gegenstand einer Entscheidung, statt nur ihr hübsches Ergebnis zu zeigen.
Erst dieselbe Aufgabe, dann unterschiedliche Oberflächen
Unser eigenes Beispiel ist eine Vereinsveranstaltung. Die Person soll das Datum ändern, die Teilnahmebedingung lesen und entweder speichern oder abbrechen. Beide Varianten erhalten denselben Titel, dasselbe Datum und denselben längeren Hinweis. Würde eine Version nur einen kurzen Mustertitel zeigen, wäre der Vergleich bereits verzerrt.
Der Dialog hält die Terminübersicht im Hintergrund. Eine separate Bearbeitungsseite bietet mehr Platz. Das sind unterschiedliche Gestaltungsentscheidungen, keine Qualitätsurteile. Interessant wird es bei den Übergängen: Wo befindet sich die Person nach dem Speichern? Was geschieht mit einer begonnenen Eingabe beim Abbrechen? Welche Information bleibt während der Änderung sichtbar?
Ein Zustandsmodell macht das Verhalten besprechbar
Beschreibe den Ablauf zunächst ohne Programmiersyntax. Der Termin ist sichtbar. Bearbeiten öffnet eine Eingabe. Eine unzulässige Eingabe führt zu einer Erklärung, die gültigen Eingaben bleiben erhalten. Speichern zeigt den bestätigten Stand. Abbrechen kehrt zum unveränderten Stand zurück. Das sind Anforderungen an unser Beispiel, keine Zusage über eingebaute Figma-Funktionen.
Ansicht → Bearbeiten → Eingabe
Eingabe → gültig → Speichern → Bestätigung
Eingabe → ungültig → Hinweis + Eingabe erhalten
Eingabe → Abbrechen → ursprüngliche AnsichtMit diesem kleinen Modell lässt sich jede Variante gezielt untersuchen. Vielleicht sieht der Dialog hervorragend aus, verliert aber beim Fehler den Hinweistext. Vielleicht ist die separate Seite weniger elegant, macht den Rückweg jedoch verständlicher. Die Beurteilung handelt dann von beobachtbarem Verhalten, nicht von einer allgemeinen Vorliebe für Dialoge.
Rückmeldungen brauchen einen gemeinsamen Bezug
Ein nützlicher Kommentar lautet: „Nach Abbrechen konnte ich nicht erkennen, ob mein neues Datum gespeichert wurde.“ Er benennt Stelle, Handlung und Unsicherheit. „Wirkt nicht modern genug“ liefert dagegen noch keine bearbeitbare Frage. Wenn Entwürfe und Kommentare auf derselben Arbeitsfläche liegen, kann der Bezug zur betrachteten Variante erhalten bleiben.
Halte bei jeder Änderung fest, welche Unsicherheit sie beseitigen soll. Verändere beispielsweise zuerst die Bestätigung und nicht gleichzeitig Schrift, Farben und Navigation. So lässt sich eher verstehen, weshalb eine zweite Fassung anders wirkt. Das ist keine kontrollierte Nutzungsstudie, aber eine sinnvolle Arbeitsdisziplin für die Entwurfsphase.
Die Entscheidung ist übertragbar, der Code nicht automatisch
Am Ende sollte ein kurzer Übergabetext stehen: bevorzugte Variante, unterstützte Aufgabe, relevante Zustände und verbleibende Fragen. Ein interaktiver Entwurf mit Beispieldaten ist noch keine echte Terminplattform. Anmeldung, gespeicherte Daten und tatsächliche Berechtigungen müssen in einer Anwendung gesondert funktionieren.
Für einen kleinen clientseitigen Zusatz auf einer KENJTEC-Seite kann die Entscheidung anschließend als eigenes HTML, CSS und JavaScript umgesetzt werden. Der KENJTEC WebSiteBuilder ai bietet dafür einen Entwicklermodus mit abgeschirmter Vorschau und eigener Codeveröffentlichung. Du überträgst den passenden Baustein selbst; ein Figma-Import oder das Hosting einer beliebigen Anwendung ist damit nicht gemeint.
Code Layers bleibt zum dokumentierten Stand eine Beta. Verfügbarkeit, unterstützte Ausgangsprojekte und Bedingungen gehören vor einer konkreten Anleitung erneut geprüft. Die Methode trägt trotzdem unabhängig vom Werkzeug: Vergleiche nicht nur zwei schöne Screens. Vergleiche zwei nachvollziehbare Antworten auf dieselbe Bedienungsfrage.
Quellen und Stand
Recherche- und Dokumentationsstand: 25. Oktober 2026. Design together with code layers on the canvas.
