Figma »Code to Canvas« und bidirektionale Workflows mit Claude
Von: Jonas Figmas MCP-Feature »Code to Canvas«-ermöglich den Import fertig gecodeter Benutzeroberflächen aus dem Browser auf die Figma-Arbeitsfläche. Dank sog. bidirektionaler Workflows können anschließend Änderungen, die im Design vorgenommen wurden zurück in den Code übertragen werden.
Video
Vom Wasserfall zum iterativen Prozess
Jahrelang war der typische Weg zwischen Design und Code eine Einbahnstraße: Im Design-Tool entstand ein Entwurf, Entwicklerinnen und Entwickler übertrugen ihn in Code. MCP-Integrationen haben diesen Transfer zuletzt automatisiert – aber die Richtung blieb meist dieselbe – wenn es auch bereits seit Jahren Gegentrends gab. Mit »Code to Canvas« dreht Figma diesen Prozess nun konsequent um. Eine fertig umgesetzte Benutzeroberfläche im Browser, bestehend aus HTML, CSS und JavaScript, wird dabei automatisch auf die Figma-Arbeitsoberfläche übertragen.
Ein Figma-Plugin für Claude Code
Im Zuge einer Kooperation zwischen Figma und Anthropic, dem Hersteller von Claude, ist ein offizielles Plugin entstanden, das die Integration deutlich vereinfacht. Statt den Figma-MCP-Server manuell einzurichten und Skills separat herunterzuladen, liefert das Plugin beides als Bundle. Die Installation erfolgt über das Terminal im jeweiligen Projektordner mit einem einzigen Befehl.
Nach der Installation und einem Neustart von Claude Code erscheint das Figma-Plugin als »Built-in MCP«. Wer bereits die klassischen Figma-MCP-Integration eingerichtet hat, kann diese weiternutzen.
Vom Browser in die Figma-Datei
Der Transfer vom Browser in den Code läuft über einen Prompt in Claude Code. Dieser enthält zwei Informationen: die localhost-URL der laufenden Web-App und den Link zur Zieldatei in Figma. Ein einfacher Satz wie »Implementiere dieses Design (localhost-URL) in diese Figma-Datei (Figma-URL)« genügt.
Claude Code greift automatisch auf den passenden Figma-Skill zurück und analysiert die Figma-Datei und die HTML-Quelle. Für den Prozess wird ein kleines JavaScript-Snippet temporär in die HTML-Datei eingefügt. Dieses Script ermöglicht Figma, einen visuellen Snapshot der Seite zu erstellen, und aktiviert zusätzlich eine interaktive Toolbar im Browser, mit der ihr auch einzelne Elemente zur selektiven Übertragung auswählen könnt.
Das Ergebnis in Figma ist überzeugend: Die Elemente erscheinen mit korrekten Abmessungen und Auto-Layout-Interpretation so, wie sie im Code definiert wurden.
Bidirektional: Änderungen aus Figma zurück in den Code
Der wirklich interessante Teil des Features liegt im bidirektionalen Workflow. Figma verfolgt das Ziel, die strikte Trennlinie zwischen Design und Entwicklung aufzuweichen. Änderungen sollen nicht nur von Design zu Code fließen, sondern auch in die umgekehrte Richtung.
In der Praxis funktioniert das so: Ein Element in Figma wird bearbeitet, anschließend genügt ein kurzer Prompt wie »Ziehe die Designänderungen im Code nach«, damit der Agent die Figma-Datei ausliest, die Änderung identifiziert und den Code aktualisiert. Das Resultat ist unmittelbar im Browser sichtbar.
Der Grundstein ist gelegt
Code to Canvas ist ein wichtiger und überzeugender erster Schritt. Was in vielen Fällen Drittanbieter-Plugins wie HTML to Design ermöglichten, ist jetzt zumindest in Anfängen nativ in Figma verfügbar und tief mit KI-gestützten Coding-Tools wie Claude Code verzahnt.
Der bidirektionale Ansatz beschreibt allerdings letztlich einen Workflow, den Designer mit Coding-Kenntnissen schon immer intuitiv genutzt haben. Das dauerhafte Wechseln zwischen Design-Tool und Code-Editor um Änderungen in beide Richtungen zu übertragen. Neu ist, dass diese Übergänge jetzt durch KI und MCP-Integrationen automatisiert werden und somit auch für Teams ohne tiefes Coding-Wissen zugänglich werden.
