Figma führt auf der Config 2026 Code Layers ein: Designer können Code direkt auf der Zeichenfläche schreiben und ausführen

Figma hat das letzte Jahrzehnt damit verbracht, Designer und Ingenieure davon zu überzeugen, in derselben Datei zu arbeiten. Auf der Config 2026, die am 24. Juni stattfand, unternahm das Unternehmen seinen aggressivsten Schritt, um die Grenze zwischen ihnen vollständig zu beseitigen.

Die zentrale Ankündigung ist Code Layers: ein System, das ausführbaren Code direkt auf Figmas kollaborativer Zeichenfläche bereitstellt. Benutzer können jede Design-Ebene mit einem Klick in eine interaktive Code-Ebene umwandeln, Repositories klonen, um Produktionsabläufe zu extrahieren, und npm-Pakete ausführen, ohne Figma zu verlassen. KI-Chat kann Code-Ebenen auf Anfrage erstellen und ändern. Das Ergebnis wird innerhalb von Figma Sites ausgeliefert, unterstützt durch benutzerdefinierten React-Code.

„Code sollte wie jedes andere Designmaterial behandelt werden“, sagte Dylan Field, CEO von Figma. „Code Layers behandelt Designer und Ingenieure als Kollaborateure auf einer gemeinsamen Oberfläche, auf der Design- und Produktionslogik nebeneinander existieren.“

Die praktische Auswirkung ist, dass der traditionelle Übergabeschritt (handoff) optional wird. Teams können Code-Ebenen duplizieren, um mehrere Richtungen gleichzeitig zu erkunden, Design-Frames zurück in bearbeitbare Ebenen extrahieren und interaktive Elemente in derselben Datei behalten, in der Designentscheidungen getroffen wurden.

Neben Code Layers brachte Figma einen KI-Plugin-Builder in natürlicher Sprache auf den Markt, der es Benutzern ermöglicht, die gewünschte Funktionalität zu beschreiben und ohne JavaScript-Schreiben ein funktionierendes Plugin zu erhalten. Das System unterstützt wiederverwendbare Skills – gebündelte Workflows, die der KI-Assistent auf Anfrage ausführen kann. Der Assistent verbindet sich mit Notion, Slack, GitHub, Atlassian, Granola und Excel für einen reichhaltigeren Kontext. Der Agent steht heute allen Benutzern zur Verfügung; der Zugriff auf FigJam und Slides befindet sich in einer Warteliste.

Der dritte große Start ist Figma Motion, ein natives Animationssystem mit Timeline und Keyframes, das sofort verfügbar ist. Der Dev Mode unterstützt Exporte in CSS, JSON, React, MP4, WebM, animiertes SVG und GIF sowie MCP-Kompatibilität. KI-generierte Shader-Füllungen und 3D-Transformationen sind enthalten. Bisher erforderte Animationsarbeit externe Tools wie After Effects oder Rive.

Figmas Antwort auf KI-native Design-Tools auf der Config 2026 ist, die Zeichenfläche zum Ort zu machen, an dem Produktionscode landet. Code Layers ist jetzt in der Warteliste, die Einführung beginnt im Juli 2026. Figma Motion ist ab heute verfügbar. Es wurden keine Preisänderungen angekündigt.