Stand: 23. Oktober 2026. KI kann aus einer Idee in kurzer Zeit einen klickbaren Prototyp erzeugen. Genau an dieser Stelle beginnt jedoch oft die schwierige Arbeit: Varianten müssen vergleichbar, Entscheidungen dokumentiert und Gestaltung, Verhalten sowie Code wieder zusammengeführt werden. Figma reagiert darauf mit zwei neuen Bausteinen. Code Layers bringen funktionierenden Prototyp-Code auf die gemeinsame Designfläche; Specs halten Anforderungen und Entscheidungen direkt daneben fest.
Das ist mehr als eine neue Prompt-Funktion. Der eigentliche Ansatz lautet: KI soll nicht nur schneller produzieren, sondern mit nachvollziehbarem Kontext arbeiten. Für Websites ist das relevant, weil ein beeindruckender erster Entwurf noch nichts über mobile Zustände, Tastaturbedienung, Ladezeit, Inhaltslogik oder die spätere Pflege im CMS aussagt.
Seit dem 15. Oktober 2026 befinden sich Code Layers laut Figma in einer offenen Beta. Teams können ein Figma-Design in eine interaktive Code-Ebene umwandeln, leichte Prototyp-Codebasen aus GitHub oder einem lokalen Ordner importieren und eine bestehende Website über die Chrome-Erweiterung auf die Canvas holen. Mehrere Varianten lassen sich nebeneinander duplizieren, kommentieren und ausprobieren. Das ist besonders nützlich, wenn nicht nur die Optik, sondern ein kompletter Ablauf beurteilt werden soll.
Ein konkretes Beispiel: Für eine Unternehmenswebsite entstehen drei Varianten eines Anfrageformulars. Auf statischen Screens wirken alle schlüssig. Erst im klickbaren Ablauf zeigt sich, ob Fehlermeldungen verständlich sind, ob ein optionales Feld an der richtigen Stelle erscheint und ob die Bestätigung nach dem Absenden eindeutig ist. In Code Layers können diese Varianten parallel stehen, ohne dass Beteiligte zwischen Designlink, lokalem Prototyp und Bildschirmvideo wechseln müssen.
Mit „Extract designs“ lassen sich einzelne Zustände oder ganze Abläufe wieder in bearbeitbare Figma-Ebenen überführen. Visuelle Korrekturen können anschließend zurück in die Code-Ebene fließen. Laut Figmas Ankündigung zu Code Layers sind auch Branches und Pull Requests für die Weitergabe möglich. Trotzdem bleibt die Bezeichnung wichtig: Unterstützt werden zunächst leichte Prototyp-Codebasen. Ein Code Layer ist kein Nachweis, dass eine komplexe produktive Website bereits sauber integriert, getestet und wartbar ist.
Specs sind kollaborative Markdown-Dokumente auf der Figma-Canvas. Sie können Designs, Diagramme, FigJam-Inhalte und Code Layers referenzieren. Damit liegt die Beschreibung nicht mehr als veralteter Anhang irgendwo neben dem Projekt, sondern direkt bei den Varianten, auf die sie sich bezieht. Bestehende Markdown-Dateien lassen sich hineinziehen; der Figma-Agent kann Kommentare lesen und beantworten oder aus Entwürfen eine strukturierte Spezifikation ableiten.
Für eine Website-Spezifikation sollten mindestens diese Punkte festgehalten werden:
Der Vorteil liegt nicht darin, dass KI diese Entscheidungen übernimmt. Sie macht Widersprüche sichtbarer: Wenn im Design ein Dialog erscheint, aber Öffnen, Schließen, Fokus und Mobilverhalten nirgends beschrieben sind, fehlt eine überprüfbare Vorgabe. Die offizielle Einführung von Figma Specs beschreibt genau dieses Zusammenspiel aus schriftlicher Absicht, visueller Exploration und technischen Details.
Ein Agent erzeugt ohne Vorgaben leicht neue Farben, Abstände oder Komponenten, obwohl passende Bausteine bereits existieren. Figma setzt deshalb auf veröffentlichte Bibliotheken mit Komponenten und Variablen sowie ergänzende Guidelines. Darin stehen nicht nur Regeln, sondern auch Ausnahmen, typische Fehler und Kriterien für die Wahl ähnlicher Varianten.
Praktisch könnte eine Guideline festlegen: Im Anfrageprozess gibt es genau eine primäre Aktion pro Schritt; „Zurück“ bleibt sekundär; Fehlermeldungen stehen am Feld und zusätzlich in einer Übersicht. Ein Beispiel-Frame zeigt anschließend, wie Felder gruppiert werden. Das ist belastbarer als ein langer Einzelprompt, weil die Regeln bei neuen Aufgaben wiederverwendet werden.
Figma weist selbst auf eine Grenze hin: Guidelines funktionieren derzeit zuverlässiger beim Erzeugen neuer Designs als beim Bearbeiten vorhandener. Ergebnisse müssen weiterhin geprüft werden. Der am 23. Oktober 2026 veröffentlichte Beitrag „How to put your design system to work with the Figma agent“ empfiehlt deshalb klare Namen, Varianten, Variablen, Beispiele und eine anschließende menschliche Kontrolle.
Nicht jedes Projekt braucht den kompletten Werkzeugkasten. Für eine kleine Website genügt oft ein schlanker Ablauf:
Auch die Verfügbarkeit sollte in die Entscheidung einfließen: Code Layers laufen als offene Beta und verbrauchen KI-Credits; Figma nennt für bezahlte Pläne eine kostenlose Erstellungs- und Bearbeitungsphase bis zum 4. November 2026. Specs werden als offene Beta für bezahlte Pläne ausgerollt. Design-System-Guidelines sind ebenfalls Beta, während Code Sources zunächst geschlossen getestet werden.
Der nützlichste Wechsel ist damit organisatorisch: Der KI-Prototyp wird nicht als fertige Website behandelt, sondern als überprüfbare Hypothese. Code Layers zeigen das Verhalten, Specs halten die Entscheidung fest, und das Designsystem begrenzt die gestalterische Beliebigkeit. Was tatsächlich online geht, braucht danach weiterhin saubere Entwicklung und Abnahme.
