Mobile-Menu

Figma Config India Figma holt Coding-Agenten auf die Design-Canvas

Von Berk Kutsal 4 min Lesedauer

Anbieter zum Thema

Kestra S.A.S.

Mit Code Layers, Specs und einem erweiterten MCP-Server will Figma Prototypen aus KI-Coding-Tools zurück in die gemeinsame Arbeitsfläche holen. Vieles davon startet als Beta, einiges nur für zahlende Kunden.

Figma-Mitgründer und CEO Dylan Field auf der Config India in Bengaluru. Die Konferenz fand zum ersten Mal in Indien statt.(Bild: Figma)
Figma-Mitgründer und CEO Dylan Field auf der Config India in Bengaluru. Die Konferenz fand zum ersten Mal in Indien statt.
(Bild: Figma)

„KI hat Programmieren billig gemacht“, schreibt Figma-Mitgründer und CEO Dylan Field zur Config India, die am 15. Oktober in Bengaluru stattfand. Indien ist nach täglicher Nutzung Figmas zweitgrößter Markt, die Konferenz fand dort zum ersten Mal statt.

Früher habe jede Codeänderung Zeit und Geld gekostet, heute bauten Teams zuerst und dächten dabei. Field unterscheidet zwei Arten: „building to think“, schnell und unordentlich, um eine Idee zu prüfen, und „building to ship“, präzise und detailgetrieben.

Das Problem sieht er im Übergang. Prototypen aus Vibe-Coding-Tools entstünden meist allein im Terminal oder in der IDE. Kollegen sähen am Ende einen Link oder ein Video, aber nicht den Weg dorthin. Ein Kunde fasse das als „fast, fast, fast … then slow“ zusammen. Figma will diesen Prozess auf die eigene Arbeitsfläche holen, die das Unternehmen inzwischen „Full-Stack Creative Canvas“ nennt.

Code Layers: Prototypen als Ebene auf der Canvas

Mit Code Layers liegen lauffähige, codebasierte Prototypen als eigene Ebene auf der Design-Canvas. Teams können sie dort gemeinsam bearbeiten und Varianten nebeneinander vergleichen. Vorgestellt hatte Figma die Funktion bereits im Juni auf der Config 2026 in San Francisco, seit dem 15. Oktober ist sie als offene Beta auf allen Plänen verfügbar.

Der Code kann aus mehreren Quellen kommen:

  • per Prompt an den Figma-Agenten, auch auf Basis bestehender Designs
  • als Import aus einem GitHub-Repository oder einem lokalen Ordner
  • aus einem externen Coding-Agenten über MCP
  • als Abbild einer Live-Website über Figmas Chrome-Erweiterung

Aus einem Code Layer lassen sich wieder editierbare Design-Ebenen gewinnen.(Bild: Figma)
Aus einem Code Layer lassen sich wieder editierbare Design-Ebenen gewinnen.
(Bild: Figma)

Umgekehrt lassen sich aus einem Code Layer wieder editierbare Design-Ebenen erzeugen. Komplexere Codebasen sollen später folgen. Derek Onay, Lead Product Designer bei Rocket Money, hat mit dem Figma-Agenten ein bestehendes Design in Code nachgebaut, um Interaktionen und Barrierefreiheit zu prüfen. Der Mehrwert liege vor allem in der Abstimmung: „Ich kann einen funktionsfähigen Prototyp teilen und mein Team dort abholen, wo es ohnehin arbeitet.“

Designsysteme als Kontext für Agenten

Figma begründet den Ausbau der Designsysteme mit den Agenten: Diese bauten nur so konsistent, wie es die Muster und Regeln zuließen, die ein Team ihnen mitgebe. Veröffentlichte Bibliotheken können deshalb künftig Guidelines enthalten, also schriftliche Richtlinien, an denen sich der Agent orientiert. Dazu kommen Code Sources aus einem GitHub-Repository oder einem npm-Paket, damit der Agent Komponenten und Code Layers näher am tatsächlichen Code erzeugt.

Der Designsystem-Hub bündelt Bibliotheken und Code-Quellen und meldet Lücken. Die Funktion ist bislang nur als Vorschau verfügbar.(Bild: Figma)
Der Designsystem-Hub bündelt Bibliotheken und Code-Quellen und meldet Lücken. Die Funktion ist bislang nur als Vorschau verfügbar.
(Bild: Figma)

Als Vorschau zeigt Figma außerdem einen zentralen Bereich, in dem Teams alle Bibliotheken eines Designsystems zusammenführen und verwalten. Eine „System map“ soll Änderungen und Abhängigkeiten sichtbar machen, ein „System check“ Lücken wie fehlende Beschreibungen oder Interaktionszustände finden. Guidelines sind in offener Beta, Code Sources in geschlossener Beta, beides auf bezahlten Plänen. Für den Hub selbst nennt Figma keinen Termin.

Specs: Markdown mit Bezug zum Projekt

Markdown ist durch die Arbeit mit Agenten allgegenwärtig geworden, doch die Dateien stehen meist isoliert neben dem Projekt. Verweise auf Bilder, URLs oder andere Dateien bleiben für Kollegen oft undurchsichtig. Figmas Antwort darauf heißt Specs, ein eingebauter Markdown-Editor.

Specs sind Markdown-Dokumente, die Teams gemeinsam kommentieren und an Agenten übergeben können.(Bild: Figma)
Specs sind Markdown-Dokumente, die Teams gemeinsam kommentieren und an Agenten übergeben können.
(Bild: Figma)

Specs lassen sich als eigene Datei oder direkt neben Designs auf der Canvas anlegen. Sie können auf Inhalte der Canvas verweisen und FigJam-Diagramme, Code Layers und Designs einbetten. Einsatzzwecke sind laut Figma Produktanforderungen (PRDs), Datenreports und die Übergabe an einen Coding-Agenten per MCP. Über den GitHub-Connector kann ein Agent eine technische Spezifikation direkt aus der Codebasis entwerfen. Specs startet als offene Beta im Web, auf dem Desktop und mobil, auf bezahlten Plänen.

MCP-Server und 20 neue Partner

Alle neuen Funktionen sollen sich über den Figma-Agenten und den MCP-Server von Figma ansteuern lassen. Der Agent ist seit Anfang Oktober allgemein verfügbar und direkt in die Design-Canvas eingebaut. Über MCP können externe KI-Tools nun Code Layers erzeugen, mit Specs arbeiten, visuelle Assets erstellen und veröffentlichte Weave-Workflows starten. Nach Figmas Angaben arbeitet der Server zudem mit weniger Fehlern und geringerem Tokenverbrauch, Zahlen dazu nennt das Unternehmen nicht.

Jetzt Newsletter abonnieren

Täglich die wichtigsten Infos zu Big Data, Analytics & AI

Mit Klick auf „Newsletter abonnieren“ erkläre ich mich mit der Verarbeitung und Nutzung meiner Daten gemäß Einwilligungserklärung (bitte aufklappen für Details) einverstanden und akzeptiere die Nutzungsbedingungen. Weitere Informationen finde ich in unserer Datenschutzerklärung. Die Einwilligungserklärung bezieht sich u. a. auf die Zusendung von redaktionellen Newslettern per E-Mail und auf den Datenabgleich zu Marketingzwecken mit ausgewählten Werbepartnern (z. B. LinkedIn, Google, Meta).

Aufklappen für Details zu Ihrer Einwilligung

Hinzu kommen 20 neue Partner-Integrationen. Figma hebt vier hervor:

Partner Was die Anbindung leisten soll
OpenCode Der Coding-Agent erhält Kontext aus dem Designsystem. Prototypen gehen zur Durchsicht zurück nach Figma.
Dia (KI-Browser) Web-Oberflächen als editierbare Design-Ebenen nach Figma übernehmen.
Junie (JetBrains) Programmierte Prototypen als Code Layers nach Figma holen.
Meta Muse In Figma gestaltete Marken in Muse weiterverwenden und Weave-Workflows starten.

Ebenfalls dabei ist laut Figma das indische KI-Unternehmen Sarvam AI.

Payload: Backend und CMS für Figma Make

Das Team hinter Payload, einem Open-Source-Framework für Inhalte, interne Tools und Websites, kam im vergangenen Jahr zu Figma. Die Downloads haben sich nach Figma-Angaben in zwölf Monaten versechsfacht, damit sei Payload das am schnellsten wachsende Open-Source-CMS auf npm.

Payload liefert Apps aus Figma Make ein CMS mit Administrationsoberfläche.(Bild: Figma)
Payload liefert Apps aus Figma Make ein CMS mit Administrationsoberfläche.
(Bild: Figma)

Jetzt wandert Payload in Figma Make, Figmas Werkzeug, das Apps aus Prompts erzeugt. Solche Apps bekommen damit Inhalte, Workflows, APIs und eine Administrationsoberfläche. Designer arbeiten mit echten Inhalten statt mit Platzhaltern, Marketingteams pflegen Texte ohne Zugriff auf den Quellcode, Entwickler passen die App über das Payload-Framework an. Figma hostet Inhalte und Daten, die App lässt sich aber auch außerhalb von Figma weiterbetreiben. Payload steht auf allen Plänen zur Verfügung, der Zugang soll in den kommenden Wochen schrittweise freigeschaltet werden.

Figma als Kontextschicht für Agenten

Figma will mit den Neuerungen nicht gegen Coding-Agenten antreten, sondern will der Ort werden, an dem deren Ergebnisse gemeinsam geprüft und weiterentwickelt werden. Der eigentliche Hebel ist MCP. Je mehr Agenten Designsysteme, Guidelines und Specs aus Figma lesen, desto mehr wird Figma zur zentralen Ablage für Produktkontext, und das über das Design hinaus.

Die meisten Funktionen sind Betas, der Designsystem-Hub nur eine Vorschau, und Guidelines, Code Sources und Specs bleiben bezahlten Plänen vorbehalten. Für die versprochene Effizienz des MCP-Servers sind keine Messwerte bekannt.

(ID:50993438)

Weiterführende Inhalte