Figma verbindet Design-Canvas und GitHub. Cursor wählt den anderen Weg

Code Layers, das neue Feature von Figma, leistet etwas, das vor zwei Jahren wie eine Wunschvorstellung geklungen hätte: Es ermöglicht, ein GitHub-Repository direkt auf den Design-Canvas zu klonen. Sobald das Repository dort liegt, lassen sich bearbeitbare Design-Frames aus dem vorhandenen Code extrahieren, visuell anpassen und die Änderungen zurück ins Repository synchronisieren — alles innerhalb einer einzigen Figma-Datei, mit intakter Echtzeit-Kollaboration. Design und Entwicklung im selben Fenster.

Für Designer, die jahrelang Übergabenotizen verfasst, Spezifikationen in Jira-Tickets kopiert oder Zeplin-Links an das Entwicklungsteam geschickt haben, verändert Code Layers den Ort, an dem das Gespräch zwischen Design und Code stattfindet. Änderungen in Figma aktualisieren den zugrundeliegenden Code; Änderungen im Code aktualisieren die Design-Ebene. Die Brücke zwischen beiden Disziplinen hat immer einen Kontextwechsel erfordert — dieser Wechsel wird nun kleiner.

Figma Motion verwandelt Animationen in produktionsreifen Code

Figma kündigte außerdem Motion an, eine Keyframe-basierte Animationszeitleiste, die direkt in den Canvas integriert ist. Designer können Übergänge, Hover-Zustände und Scroll-Animationen mit einer Zeitleiste und einer Preset-Bibliothek erstellen und sie in sieben Formaten exportieren: CSS, JSON, React, MP4, WebM, Animated SVG und GIF. Eine in Figma gestaltete Ladeanimation ist kein Referenzdokument mehr, das ein Entwickler interpretieren muss — sie ist die Animation selbst.

Die dritte große Ankündigung war Shader Effects, GPU-beschleunigte Füllungen auf Basis von WebGPU — dem neuesten Grafikstandard des Browsers — die es Designern ermöglichen, komplexe, mathematisch generierte visuelle Texturen direkt auf Figma-Ebenen anzuwenden. Der KI-Agent von Figma kann diese benutzerdefinierten Shader-Füllungen aus einer Textbeschreibung oder einem hochgeladenen Bild erzeugen. Gibt man einen Satz wie „mattiertes Glas mit weichen blauen Interferenzmustern“ ein, erzeugt der Canvas etwas, das in Echtzeit gerendert wird und interaktiv angepasst werden kann.

Der KI-Agent erweitert sich um Fähigkeiten und externe Verbindungen

Der KI-Agent selbst wurde erheblich erweitert. Er kann nun wiederverwendbare „Fähigkeiten“ aus Eingaben in natürlicher Sprache erstellen — benutzerdefinierte Werkzeuge, die wiederkehrende Design-Aufgaben automatisieren, ohne API-Kenntnisse vorauszusetzen — und verbindet sich direkt mit externen Diensten wie Notion, GitHub und Microsoft Excel. Ein späteres Update in 2026 wird Weavy hinzufügen, einen Workflow-Builder, den Figma letztes Jahr übernommen hat, für knotenbasierte Automatisierung innerhalb von Design-Dateien.

Nicht alles ist heute verfügbar. Code Layers befindet sich im Early Access; Bewerbungen öffnen im Juli 2026 und erfordern einen Full-Sitz auf einem bezahlten Figma-Plan. Shader Effects und der verbesserte KI-Agent sind auf bezahlten Plänen bereits aktiv. Figma Motion steht Full-Sitz-Inhabern jetzt zur Verfügung; die allgemeine Verfügbarkeit von Code Layers wird für später in 2026 erwartet.

Figmas Anspruch, Teile des Code-Editor-Workflows zu absorbieren, stößt auf eine konkrete Frage: Code schreiben und Benutzeroberflächen gestalten sind verschiedene kognitive Tätigkeiten, und Cursor — der KI-Code-Editor, den SpaceX letzte Woche für 60 Milliarden Dollar übernommen hat — hat sein Publikum unter Ingenieuren aufgebaut, nicht unter Designern. Ob diese beiden Communities zu einem gemeinsamen Canvas zusammenfinden, bleibt offen.

Schlagwörter: GitHub, Code Layers, Config 2026, Cursor, Design-Tools, Figma