News · Figmas Code Layers und MCP-Server machen aus Design-Mockups ein Handoff-Artefakt

Jul, 224 Min. Lesezeit
Frontend

Figmas Code Layers und MCP-Server machen aus Design-Mockups ein Handoff-Artefakt

David Kossnick beschreibt, wie Figma KI über die visuelle Ebene hinaus in editierbaren Code trägt – und was das für die Grenze zwischen Designer und Entwickler bedeutet.

Was Figma für den Code-Pfad tatsächlich ausgeliefert hat

Kossnick nennt drei klar getrennte Bausteine statt einer vagen KI-Funktion. Figma Make ist ein Prompt-zu-App-Tool, das aus Sprache, Bildern oder strukturierten Frames das erzeugt, was er als produktionsreifen Code bezeichnet. Dev Mode übernimmt das Handoff mit strukturierten Daten wie CSS und Tokens. Der Dev Mode MCP Server setzt darauf auf und erlaubt Entwicklern, einen Coding-Agenten aufzurufen, der Mockups mit vollem Kontext in produktionsreifen Code übersetzt.

Der rote Faden: KI-Output bleibt editierbar. Kossnick beschreibt einen Code-Composer und „Code Layers“, mit denen Nutzer KI-unterstützten Code direkt in der Datei schreiben und veröffentlichen können. Das ist die entscheidende Abgrenzung zu anderen Tools: Agenten bringen einen weit, aber viele Produkte sperren die Anpassung nach der Generierung. Figmas Versprechen lautet, dass man die Code-Ebene weiterhin öffnen und ändern kann.

Das Durchsickern von Prototyp zu Produktion

Das folgenreichste Detail geht fast unter. Figma Make ist, nach Kossnicks eigener Einordnung, primär für Prototyping gebaut. Aber er sagt, Designer könnten Interaktionen so präzise per Prompt gestalten, dass Ingenieure den Code direkt übernehmen.

Auch wenn Make primär für Prototyping gebaut ist, können Designer Interaktionen oft so präzise per Prompt gestalten, dass Ingenieure den Code direkt übernehmen – wodurch es beginnt, zu einem Handoff-Artefakt für das Engineering zu werden.Montana Labs

Das ist eine bedeutsame Verschiebung der Grenze zwischen Design und Engineering. Historisch war das Handoff-Artefakt eine Spezifikation: Mockups, Redlines, Tokens, die ein Ingenieur neu implementierte. Wenn Prototyp-Code zu dem wird, was Ingenieure tatsächlich ausliefern, wandert die Frage, wer für Codequalität, Barrierefreiheit und Wartbarkeit verantwortlich ist, vorgelagert in ein Tool, das eigentlich für Exploration gedacht war. Kossnick präsentiert das als Erfolg; Frontend-Teams sollten es als eine Grundsatzentscheidung lesen, die sie nun treffen müssen.

Das Workday-Spiel und die Frage nach internen Tools

Das konkreteste Beispiel im Interview ist ein HR-Teammitglied ohne Programmier- oder Design-Hintergrund, das eine Workday-API fand und in etwa zwei Stunden mit Figma Make ein Name-Gesicht-Zuordnungsspiel baute, das nun im Onboarding eingesetzt wird. Kossnick sagt ausdrücklich, dass kein Team für interne Tools dies priorisiert hätte.

Das ist der eigentliche Produktanspruch: nicht, dass KI besseren Code schreibt, sondern dass sie die Kosten fürs Ausprobieren einer Idee so weit senkt, dass Ideen umgesetzt werden, die nie die Priorisierungshürde genommen hätten. Die Vorabkosten des Prototypings waren der Filter, und dessen Wegfall verändert, welche Tools überhaupt entstehen. Für Frontend-Organisationen ist das zweischneidig – nützliche Wegwerf-Tools entstehen häufiger, aber ebenso wächst die Menge ungeprüfter, halbfertig ausgerollter Software außerhalb der normalen Engineering-Pipeline.

Wie OpenAI tatsächlich in Figma eingebunden ist

Ohne die Interview-Rahmung betrachtet, ist die technische Beziehung eng und spezifisch. Figma nutzt OpenAI-APIs, um FigJam AI und die plattforminterne Bildgenerierung anzutreiben. Getrennt davon hat Figma ChatGPT Enterprise intern für die eigene Belegschaft eingeführt. Die FigJam-Jubiläumskarten, bei denen Teammitglieder Avatare remixen, nutzen die Bildbearbeitung von OpenAI.

Das sollte man klar benennen, denn der Beitrag vermischt Produktintegration mit interner Kulturarbeit. Figma Make, Dev Mode und der MCP-Server sind Figmas eigene Workflow-Oberflächen; die OpenAI-Abhängigkeit zeigt sich bei Bildgenerierung und Textfunktionen, nicht als Antrieb hinter der Code-Generierungs-Geschichte. Die konkrete Implikation: Ein Frontend-Team, das diesen Stack bewertet, bewertet in Wirklichkeit zwei getrennte Wetten – Figmas editierbare Code-Ebene als Handoff-Mechanismus und Bild- sowie Textgenerierung über eine Drittanbieter-API – und sollte nicht davon ausgehen, dass beide dasselbe Zuverlässigkeits- und Governance-Profil haben.

Find this story relevant to you?

Contact us to find a unique solution

Contact us

Brauchen Sie einen KI-Engineering-Partner, der auch liefern kann?

Wir helfen Unternehmen dabei, KI in Produkte und Prozesse zu integrieren, wertvolle Workflows zu automatisieren und die zugrunde liegenden Softwaresysteme zu modernisieren.

Get in touch

Weiterführende Beiträge

Weitere Analysen rund um Produktbereitstellung, operative KI und die Systemarbeit, die dafür sorgt, dass der Einsatz in der Praxis Bestand hat.

Jul, 134 Min. Lesezeit
Frontend

DNP führte ChatGPT Enterprise in zehn Abteilungen ein und machte das Chatfenster zur zentralen Oberfläche

Jul, 134 min to read
Frontend

AdventHealth deploys ChatGPT across nine states by treating adoption as the product

Jul, 134 Min. Lesezeit
Frontend

AP+ nutzt Codex, um funktionierende Zahlungsprototypen zu bauen – nicht nur klickbare Bildschirme