Wir stellen unseren MCP-Server vor: Figma in deinen Workflow einbinden

Bis vor Kurzem erfolgte die Versorgung von KI-Tools mit Designkontext dadurch, dass einem Chatbot das Bild eines Designs oder eine API-Antwort zugeführt wurden. Dies hat sich mit der kürzlichen Einführung des Model Context Protocol (MCP) geändert, einem Standard dafür, wie Anwendungen Kontext für LLMs bereitstellen. Wir haben uns zum Ziel gesetzt, diesen Standard mit dem MCP-Server von Figma anzuwenden, der es Entwicklern ermöglicht, Kontext von Figma in agentische Codierungstools wie Copilot in VS Code, Cursor, Windsurf und Claude Code zu integrieren. Ganz gleich, ob es darum geht, neue atomare Komponenten mit den richtigen Variablen und Styles oder mehrschichtige Anwendungs-Flows zu entwickeln: Wir sind davon überzeugt, dass dieser Server einen effizienteren und präziseren Design-to-Code-Workflow ermöglicht.

Da es sich um eine Betaversion handelt, ist dies nur der Anfang. In den kommenden Monaten planen wir die Veröffentlichung einer Reihe von Updates, darunter Funktionen wie Remote-Server-Fähigkeiten und stärkere Codebasis-Integrationen. Mit deinem Feedback werden wir unser Angebot weiter iterieren und ausbauen. Du kannst uns direkt über dieses Formular Feedback geben. Es gibt noch viel mehr zu berichten, aber lass uns erst einmal einen Schritt zurückgehen und erzählen, wie wir hierher gekommen sind.

Kontext ist alles

Heute können LLMs funktionsfähigen Code erstellen. Nehmen wir an, du bittest ein Tool, Code zu schreiben, und gibst als Kontext lediglich an, dass es sich um Trainingsdaten handeln. Dann wird die Ausgabe zwar nutzbar sein, aber wahrscheinlich nicht mit den Mustern übereinstimmen, die du in deiner restlichen Codebasis findest. Das liegt daran, dass jedes Team seine Codebasis anders angeht – mit einer anderen Struktur, einem anderen Framework, einem anderen Vokabular und einem anderen Workflow – und Entscheidungen trifft, die die Codebasis auf Grundlage der spezifischen Anforderungen beeinflussen. Alle diese Unterschiede ergeben zusammen einen einzigartigen Fingerabdruck, der für LLMs schwer zu erschließen ist.

Das Erkennen und Verstehen dieser Muster erfordert zusätzlichen Kontext. An dieser Stelle kommen die agentischen Codierungstools ins Spiel. Sie erfassen Kontext – indem sie vorhandenen Code lesen, den Repository-Verlauf untersuchen, auf Dokumentationen zugreifen und Datenbankschemata verstehen – und geben diesen an LLMs weiter, damit diese in deiner IDE präzisen, fundierten und mit deinen bestehenden Systemen kompatiblen Code generieren können. MCP-Server wie der MCP-Server von Figma erweitern dies, indem sie externen Kontext von anderen Tools wie Figma in diesen Workflow einbringen, sodass dein Code nicht nur mit dem Fingerabdruck deiner Codebasis übereinstimmt, sondern auch mit dem deines Designs.

Der Designkontext ist für den Übergang vom Design zum Code entscheidend. Wenn es darum geht, die Absicht eines Designs zu verstehen, müssen wir eine Reihe von Informationen berücksichtigen. Je nachdem, was wir von einem LLM verlangen, könnten diese wertvoll sein. Es ist wichtig, diese Informationen richtig zu verstehen, denn der Prozess der Umsetzung von Design in Code ist mehr als nur eine detaillierte Überprüfung.

Wie wir Designabsichten für LLMs übersetzen

Wenn Entwickler*innen eine Figma-Datei öffnen, zoomen sie wahrscheinlich zuerst ganz heraus, um ein Gefühl für Ordnung und Struktur zu bekommen. Dann könnten sie eine Abfolge von Bildschirmen oder eine abgeleitete Logik bearbeiten und darüber nachdenken, wie sie die Funktion für verschiedene Dateien im Code strukturieren könnten. Sie prüfen während der Erstellung, ob die Muster korrekt sind, und interpretieren Platzhalterinhalte als echte Daten, die sie aus dem Backend abrufen müssen. Während des gesamten Prozesses zur Designimplementierung generieren sie verschiedene Arten von Code und arbeiten auf verschiedenen Ebenen – von zugrundeliegenden Details bis hin zu übergeordneten Mustern. Um sicherzustellen, dass die Designabsicht in Code übersetzt wird, benötigen LLMs auch dieses ganzheitliche Bild.

Der Figma MCP-Server vermittelt LLMs dieses Bild auf verschiedene Weise, indem er visuelle Informationen durch nuanciertere Details zur Designabsicht ergänzt und gleichzeitig auf bestehende Muster und Systeme zurückgreift. Verschiedene Aufgaben können unterschiedliche Kombinationen dieser Kontextpunkte erfordern, und oft ist der Kontext, den wir ausschließen, genauso wichtig wie der, den wir bereitstellen. Aus diesem Grund bieten MCP-Server (wie auch unserer) Tools zur Darstellung bestimmter Kontexttypen für LLMs. Auf unserem Server kannst du außerdem über die Einstellungen konfigurieren, was diese Tools zurückgeben. Hier findest du einen Überblick darüber, wann du diese Kontextpunkte – je nach deiner Konfiguration und deinen Prioritäten – erhöhen oder verringern solltest.

Muster-Metadaten

Wenn du bereits in ein Designsystem investiert hast und Muster wie Komponenten, Variablen und Stile nutzt, die zwischen Design und Code abgestimmt sind, ist der Figma MCP-Server ein Multiplikator. Wir möchten sicherstellen, dass auch das LLM von diesen Mustern profitieren kann. Die Suche nach richtigen Mustern mit agentischen Suchtechniken kann einige Zeit in Anspruch nehmen, vor allem, wenn die Codebasis sehr umfangreich ist. Dabei können auch gültige Muster gefunden werden, die von referenzierten Mustern abweichen. Durch das Bereitstellen von Verweisen auf bestimmte Variablen, Komponenten und Stile kann der Figma MCP-Server generierten Code präziser und effizienter gestalten und die Nutzung von LLM-Token reduzieren.

Nehmen wir zum Beispiel an, du hast eine starke Abstimmung zwischen Design und Code erreicht. Wenn du nur einen Screenshot einer Komponenteninstanz bereitstellst, wird das KI-Tool viel Zeit damit verbringen, die Codebasis (z. B. Icon- und Komponentenbibliotheken) zu durchsuchen, um die richtige Komponente zu finden. Wenn es keine Übereinstimmung findet, wird es wahrscheinlich eine neue Komponente auf der Grundlage des Screenshots erstellen. Wenn Figma hingegen weiß, welche Komponenten du verwendest, kann es mit Code Connect den genauen Pfad zur benötigten Codedatei teilen.

Ein weiteres Beispiel: Du erstellst einen Screenshot eines roten Rechtecks und forderst dein agentenbasiertes Tool auf, Token zu verwenden. Wenn es viele verschiedene Token mit demselben roten Wert gibt, weiß Figma, welches spezifische Token verwendet wird, und kann den Namen dieser Variablen per MCP an das LLM weitergeben. Noch besser: Wenn du in Figma eine Codesyntax für diese Variable bereitgestellt hast, kann der Figma MCP-Server genau diesen Code für das LLM bereitstellen.

Screenshots

Teams erstellen alle Arten von komplizierten und überzeugenden Entwürfen, und es ist oft hilfreich, herauszuzoomen und über die Gesamtansicht eines Designs nachzudenken, bevor man sich mit den Details befasst. Wenn du zum Beispiel versuchst, ein Gefühl für den Gesamtkontext zu bekommen – Abfolge von Bildschirmen, Abschnitten, mobilem und Desktop-responsivem Kontext –, kann ein High-Level-Screenshot dem LLM Informationen über die Beziehung zwischen Abschnitten und Knoten liefern und den Gesamtablauf auf eine Weise erfassen wie es Stildetails nicht können.

Diese visuellen Informationen verraten in erster Linie viel über die Absicht des Designs und sind weniger als Vorgabe für das LLM gedacht. Der perfekte Code soll die Designabsicht umsetzen und nicht nur Pixel anzeigen. Wir sehen Screenshots als Ergänzung für die Code-Antwort, d. h. ein Screenshot in Kombination mit den Code-Ausgaben von Figma liefert bessere Ergebnisse als beides einzeln.

Interaktivität

Codebeispiele können das Designverhalten beschreiben, das bereits in Figma definiert oder mit der Codebasis verbunden ist. Pseudocode, den du dir als Code-Prototyp vorstellen kannst, ist häufig eine hervorragende Möglichkeit, einem LLM Kontext bereitzustellen, der effektiver ist als die bloße Beschreibung von Eigenschaften. Dies gilt vor allem dann, wenn der Pseudocode auch von der Codebasis beeinflusst wird und Funktionen wie Codesyntax für Variablen und Code Connect für Komponenten enthält.

Dieser Beispielcode kann in einigen Szenarien hilfreich sein, z. B. wenn du eine vollständig verschachtelte Funktionalität beschreiben möchtest. Eine Pseudodarstellung einer zustandsbehafteten Komponente bietet einem LLM Informationen, die ein Baum von Figma-Metadaten nicht liefern kann. Sie bietet die Möglichkeit, eine Sequenz von UI-Elementen darzustellen, sodass sie nicht unabhängig voneinander als Metadaten überprüft werden müssen. Dadurch ist es einfacher, sich auf die Unterschiede zwischen ihnen zu konzentrieren.

Inhalt

Wir möchten sicherstellen, dass wir auch aus Figma das herausholen, was ein Design impliziert. Sogar Platzhalterinhalte in Figma können für den Designkontext repräsentativ und für LLMs informativ sein. LLMs können mithilfe von Inhalten wie Text, SVG, Bildern, Ebenennamen und Annotationen ableiten, wie die Benutzeroberfläche mit dem Datenmodell auf der Codeseite gefüllt werden kann.

Designbasierte Codegenerierung

Viele Entwickler*innen nutzen bereits KI, um in ihren IDEs effizienter zu arbeiten. Wir freuen uns, diese Workflows zu beschleunigen und gleichzeitig konsistente und hochwertige Ausgaben zu gewährleisten. Heute beginnt dies mit drei Tools auf dem MCP-Server, mit denen du den Kontext von Figma für die aktuelle Auswahl oder eine bestimmte Knoten-ID abrufen kannst: Ein Tool für Code, ein weiteres für Bilder und ein drittes für Variablendefinitionen. Du kannst die Art der Antwort ändern, die das Code-Tool in deinen Servereinstellungen zurückgibt. Dies ermöglicht die Feinabstimmung basierend auf der jeweiligen Aufgabe. Du kannst die interaktivere Codedarstellung mit React und Tailwind aktivieren, wobei im Laufe der Zeit weitere Optionen hinzukommen. Code Connect stellt sicher, dass der generierte Code mit deiner Codebasis übereinstimmt, sodass du Komponentenzuordnungen sehen kannst. Jede Codesyntax, die du für deine Variablen hinzufügst, wird ebenfalls angezeigt.

Da wir den Figma MCP-Server in der Beta-Version starten, freuen wir uns auf dein Feedback zu den aktuellen Funktionen. Wir nutzen dies für unsere zukünftigen Entwicklungen. Auf der Grundlage erster Tests arbeiten wir bereits an einigen Verbesserungen. Erster Schritt ist die Bereitstellung des MCP-Erlebnisses, ohne dass die Figma-Desktop-App erforderlich ist. Dies vereinfacht den Einstieg von überall aus und die Zusammenarbeit für Teams. Außerdem arbeiten wir an einer stärkeren Codebasis-Integration und einem einfacheren Code Connect-Erlebnis mit einer intuitiveren Einrichtung. Zukünftige Versionen werden Funktionen hinzufügen, die Annotationen, Raster und mehr unterstützen.

Dies ist nur der erste Schritt auf dem Weg zu unserem Ziel, bessere Design-to-Code-Erlebnisse mit schnellerer Übergabe, intelligenteren Ausgaben und effizienteren Workflows zu schaffen. Du kannst mit jeder Dev- oder Full-Lizenz auf den MCP-Server von Figma zugreifen. Halte außerdem nach weiteren Updates Ausschau, denn wir investieren weiterhin in diesen Bereich. Wir sind gespannt auf dein Feedback.