Figma Code Layers holt echten Code auf die Designfläche

Worum es geht

Figma hat am 24. Juni 2026 auf der Config 2026 mehrere konkrete Werkzeuge fuer Produktteams vorgestellt: Code Layers, Figma Motion, Shaders, generative Plugins und Weave-Workflows. Der wichtigste Teil fuer Teams, die zwischen Design und Entwicklung arbeiten, sind Code Layers: Code soll nicht mehr nur am Ende als Spezifikation exportiert werden, sondern als bearbeitbares Material direkt auf der Figma-Canvas liegen.

Das ist deshalb ein AI-Tools-Thema, weil Figma seinen Agenten nicht nur zum Erzeugen von Ideen nutzt. Der Agent kann Code-Layer aus Beschreibungen erzeugen, mit bestehendem Code arbeiten und wieder in den Teamprozess zurueckspielen. Fuer Designer, Frontend-Entwickler und Produktmanager wird Figma damit weniger Uebergabe-Dokument und mehr gemeinsamer Arbeitsraum.

Was Figma Code Layers tatsächlich macht

Code Layers sind Ebenen in Figma Design, die aus echtem Code bestehen. Laut Figma kann ein Team einen Code Layer aus der Toolbar anlegen, aus einem bestehenden Frame erzeugen oder den Figma-Agenten bitten, eine Variante zu bauen. Es kann mit Templates starten, ein lokales Verzeichnis hochladen oder ein GitHub-Repository importieren.

Der praktische Ablauf ist greifbar: Ein Team kann mehrere UI-Richtungen nebeneinander ausprobieren, mit Code statt nur mit Vektorformen. Aus Figma Make generierter oder bearbeiteter Code kann auf die Canvas gebracht werden. Aenderungen sollen spaeter wieder in Code zurueckfliessen. Dazu kommen Figma Motion fuer Animationen mit Timeline, Shaders fuer WebGPU-basierte Effekte und generative Plugins, die wiederkehrende Teamaufgaben in eigene Werkzeuge verwandeln.

Warum das wichtig ist

Der klassische Design-to-code-Prozess bricht oft an der gleichen Stelle: Ein Design sieht stimmig aus, aber die technische Realitaet entsteht erst spaeter im Repository. Figma versucht, diesen Abstand zu verkleinern. Wenn Code, Designsystem, Agent und Teamkommentar im gleichen Arbeitsraum liegen, koennen Produktteams frueher sehen, ob eine Idee wirklich baubar ist.

Die unabhaengige Berichterstattung von The Verge beschreibt Code Layers als eine der zentralen Config-2026-Neuerungen neben AI-generierter Motion und Shader-Effekten. Figma selbst positioniert die Neuerungen als neue Materialien auf der Canvas: Code, Motion, Shaders und Weave-Tools. Das ist fuer UI-lastige Produktteams relevant, weil genau dort viele kleine Iterationen zwischen Design und Frontend entstehen.

Einfach erklärt

Stell dir vor, ein Architekt zeichnet nicht mehr nur einen Grundriss auf Papier, sondern legt echte Bauteile auf den Tisch. Die Wand ist nicht nur eine Linie, sondern ein Teil, das spaeter wirklich eingebaut werden kann. Code Layers machen aus manchen Figma-Elementen solche Bauteile: noch nicht automatisch fertige Produktion, aber viel naeher an dem, was am Ende im Produkt landen soll.

Praktisches Beispiel

Ein SaaS-Team baut ein neues Onboarding fuer 12.000 monatliche Testnutzer. Bisher erstellt Design drei Varianten, Engineering baut eine davon nach, und erst im Pull Request fallen Abstaende, Responsiveness und Edge-Cases auf. Mit Code Layers koennte das Team drei interaktive Varianten direkt auf der Canvas erzeugen, eine bestehende Komponente aus dem GitHub-Repository importieren und den Login-Schritt mit realistischeren States pruefen.

Wenn die Conversion im ersten Schritt nur um 0,4 Prozentpunkte steigt, waeren das bei 12.000 Testnutzern 48 zusaetzliche Menschen pro Monat, die den kritischen Schritt erreichen. Der eigentliche Nutzen liegt aber im Tempo: weniger Uebersetzung zwischen Figma-Datei, Ticket, Slack und Repository.

Einordnung und Grenzen

Erstens ersetzt Code auf der Canvas keinen sauberen Review-Prozess. Was gut aussieht, muss weiterhin getestet, versioniert und im echten Produktkontext geprueft werden.

Zweitens ist Verfuegbarkeit wichtig: Figma nennt fuer einige Config-2026-Funktionen Beta- oder Coming-soon-Status. Admins sollten vor einer Einfuehrung pruefen, welche Funktionen im eigenen Plan und in der eigenen Region wirklich aktiv sind.

Drittens bleiben Datenschutz und IP-Fragen zentral. Wer GitHub-Repositories, lokale Ordner oder interne Designsysteme in ein AI-gestuetztes Tool bringt, braucht klare Regeln fuer Zugriff, Freigaben und sensible Kundendaten.

SEO- und GEO-Schlüsselbegriffe

Figma Code Layers, Figma Config 2026, Figma Motion, Figma Shaders, Figma Weave, Design-to-code, AI design tools, product design workflow, GitHub integration, generative plugins, frontend collaboration, design systems