🚧 Der Dev Mode MCP-Server befindet sich derzeit in der offenen Beta-Version. Einige Funktionen und Einstellungen sind möglicherweise noch nicht verfügbar. Die Funktion kann sich in der Beta-Version ändern und es können Fehler oder Leistungsprobleme auftreten.
Vor dem Start
Wer kann diese Funktion verwenden?
Der Dev Mode MCP-Server befindet sich in der offenen Beta-Version.
Verfügbar in einer Dev- oder Full-Lizenz bei Professional-, Organization- oder Enterprise-Abos.
Du musst einen Code-Editor oder eine Anwendung verwenden, die MCP-Server (z. B. VS Code, Cursor, Windsurf, Claude Code) unterstützt
Du kannst den Dev Mode MCP-Server nur von der Figma Desktop-App aus verwenden. Figma Desktop-App herunterladen →
Der Dev Mode MCP-Server integriert Figma direkt in deinen Workflow, indem er KI-Agenten, die Code aus Dateien in Figma Design generieren, wichtige Designinformationen und Kontext zur Verfügung stellt.
MCP-Server sind Teil einer standardisierten Benutzeroberfläche, über die KI-Agenten mithilfe des Model Context Protocol mit Datenquellen interagieren können.
Bei aktiviertem Server kannst du:
-
Code aus ausgewählten Frames generieren
Wähle einen Figma Frame und wandle ihn in Code um. Ideal für Teams, die neue Flüsse erstellen oder App-Funktionen weiterentwickeln.
-
Designkontext extrahieren
Ziehe Variablen, Komponenten und Layoutdaten direkt in deine IDE. Diese Option ist vor allem für Designsysteme und komponentenbasierte Workflows nützlich.
-
Mit Code Connect effizienter programmieren
Steigere die Ausgabequalität durch die Wiederverwendung deiner tatsächlichen Komponenten. Code Connect gewährleistet die Einheitlichkeit des generierten Codes mit deiner Codebasis.
Schritt 1: Aktiviere den MCP-Server
- Öffne die Figma Desktop-App und stelle sicher, dass du auf die neueste Version aktualisiert hast.
- Erstelle oder öffne eine Datei in Figma Design.
- Öffne das Figma-Menü in der oberen linken Ecke.
- Wähle unter Einstellungen die Option MCP-Server für den Dev Mode aktivieren aus.
Am unteren Rand des Bildschirms sollte eine Bestätigungsmeldung angezeigt werden, die dir mitteilt, dass der Server aktiviert ist und ausgeführt wird.
Der Server wird lokal unter http://127.0.0.1:3845/sse
ausgeführt. Halte diese Adresse für deine Konfigurationsdatei im nächsten Schritt bereit.
Schritt 2: Richte deinen MCP-Client ein
Sobald der Server lokal auf der Figma Desktop-App ausgeführt wird, können MCP-Clients eine Verbindung zu deinem Server herstellen. Befolge die Anweisungen für deinen spezifischen Client, um den Dev Mode MCP-Server hinzuzufügen.
-
Gehe zu Code → Einstellungen → Einstellungen oder verwende das Tastenkürzel
⌘ ,
-
Gib im Suchfeld „MCP“ ein.
-
Wähle Bearbeiten in settings.json aus.
-
Füge die MCP-Konfiguration von Figma Dev Mode zu deinen Servern hinzu:
"chat.mcp.discovery.enabled": true, "mcp": { "servers": { "Figma Dev Mode MCP": { "type": "sse", "url": "http://127.0.0.1:3845/sse" } } }, "chat.agent.enabled": wahr
-
Öffne die Chat-Symbolleiste mit
⌥⌘B
oder⌃⌘I
und wechsle in den Agent-Modus. -
Öffne das Menü des Auswahltools und suche nach dem Abschnitt mit der Bezeichnung:
MCP-Server: Figma Dev Mode MCP
. Wenn keine Tools aufgeführt sind, starte die Figma Desktop-App und VS Code neu.
Hinweis: Um MCP in VS Code verwenden zu können, muss GitHub Copilot in deinem Konto aktiviert sein.
Weitere Informationen findest du in der offiziellen Dokumentation von VS Code.
-
Öffne Cursor → Einstellungen → Cursor-Einstellungen.
-
Wechsle zur Registerkarte MCP.
-
Klicke auf + Neuen globalen MCP-Server hinzufügen.
-
Gib die folgende Konfiguration ein und speichere sie:
{ "mcpServers": { "Figma": { "url": "http://127.0.0.1:3845/sse" } } }
Weitere Informationen findest du in der offiziellen Dokumentation von Cursor.
- Öffne Windsurf → Einstellungen → Windsurf-Einstellungen oder verwende das Tastenkürzel
⌘ ,
. - Navigiere zu Cascade-Einstellungen und wähle Plugin-Store öffnen aus.
- Suche nach Figma und installiere das Plugin.
- Öffne Cascade und du solltest den Figma MCP-Server und die verfügbaren Tools sehen.
Hinweis: Für Windsurf änderst du die Eigenschaft der URL
in der Konfigurationsdatei zu serverUrl
, um Fehler zu vermeiden.
- Öffne dein Terminal und führe Folgendes aus:
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
- Verwende die folgenden Befehle, um die MCP-Einstellungen zu überprüfen und Server zu verwalten:
- Alle konfigurierten Server auflisten
Claude MCP-Liste
- Details für einen bestimmten Server abrufen
claude mcp get my-server
- Einen Server entfernen
claude mcp remove my-server
- Alle konfigurierten Server auflisten
Andere Code-Editoren und -Tools, die SSE (Server-Sent Events) unterstützen, können ebenfalls eine Verbindung zum Dev Mode MCP-Server herstellen.
Falls du einen anderen Editor oder ein anderes Tool verwendest, überprüfe die Dokumentation, um sicherzustellen, dass die auf SSE basierende Kommunikation unterstützt wird. Ist dies der Fall, kannst du den Dev Mode MCP-Server mit dieser Konfiguration manuell hinzufügen:
{
"mcpServers": {
"Figma Dev Mode MCP": {
"url": "http://127.0.0.1:3845/sse"
}
}
}
Hinweis: Der Dev Mode MCP-Server kommuniziert über das SSE-Protokoll. Verwende die Schritte deines Editors zum Einrichten eines SSE-kompatiblen MCP-Servers und verwende die URL: http://localhost:3845/sse
Aktualisiere oder starte den Server nach der Konfiguration. Du solltest eine erfolgreiche Verbindung und die verfügbaren Tools sehen. Falls die Verbindung fehlgeschlagen ist oder du keine Tools siehst, überprüfe bitte, ob der Server in der Figma Desktop-App aktiv ist.
Schritt 3: Prompte deinen MCP-Client
Der Dev Mode MCP-Server stellt eine Reihe von Tools bereit, die LLMs dabei unterstützen, Designs in Figma zu übersetzen. Sobald die Verbindung hergestellt ist, kannst du deinen MCP-Client dazu auffordern, auf einen bestimmten Designknoten zuzugreifen.
Es gibt zwei Möglichkeiten, deinem KI-Client den Figma Designkontext bereitzustellen:
Auswahlbasiert
- Wähle mit der Desktop-App einen Frame oder eine Ebene in Figma aus.
- Prompte deinen Client, um dir bei der Implementierung deiner aktuellen Auswahl zu helfen.
Link-basiert
- Kopiere den Link zu einem Frame oder einer Ebene in Figma.
- Prompte deinen Client, um dir bei der Implementierung des Designs unter der ausgewählten URL zu helfen.
Hinweis: Ihr Client kann nicht zur ausgewählten URL navigieren, wird jedoch die Knoten-ID extrahieren, die der MCP-Server benötigt, um zu erkennen, über welches Objekt er Informationen zurückgeben soll.
Tools und Nutzungsvorschläge
get_code
Verwende diese Option, um mit dem MCP-Server Code für deine Figma-Auswahl zu generieren. Die Standardausgabe lautet React + Tailwind, aber du kannst sie durch deine Prompts anpassen:
-
Framework ändern
- „Generiere meine Figma-Auswahl in Vue.“
- „Generiere meine Figma-Auswahl in einfachem HTML + CSS.“
- „Generiere meine Figma-Auswahl in iOS.“
-
Komponenten verwenden
- „Generiere meine Figma-Auswahl mit Komponenten aus src/components/UI“
- „Generiere meine Figma-Auswahl mit Komponenten aus src/UI und gestalte sie mit Tailwind“
Du kannst Links einfügen oder den Frame oder die Komponente in Figma vor dem Prompten auswählen.
Erfahre, wie du Code Connect für eine bessere Wiederverwendung von Komponenten einrichtest →
get_variable_defs
Gibt Variablen und Stile zurück, die in deiner Auswahl verwendet werden, wie Farben, Abstände und Typografie.
- Listet alle verwendeten Tokens auf
- „Erhalte die Variablen, die in meiner Figma-Auswahl verwendet werden.“
- Konzentriere dich auf einen bestimmten Typ
- „Welche Farb- und Abstands-Variablen werden in deiner Figma-Auswahl verwendet?“
- Erhalte sowohl die Namen als auch die Werte
- „Liste die Variablennamen und ihre Werte auf, die in meiner Figma-Auswahl verwendet werden.“
get_code_connect_map
Ruft eine Zuordnung zwischen Figma-Knoten-IDs und den entsprechenden Code-Komponenten in deiner Codebasis ab. Insbesondere gibt es ein Objekt zurück, bei dem jeder Schlüssel eine Figma-Knoten-ID ist und der Wert Folgendes enthält:
-
codeConnectSrc
: Der Ort der Komponente in deiner Codebasis (z. B. ein Dateipfad oder eine URL). -
codeConnectName
: Der Name der Komponente in deiner Codebasis.
Diese Zuordnung wird verwendet, um Figma-Designelemente direkt mit ihren React- (oder anderen Framework-) Implementierungen zu verbinden, was nahtlose Design-to-Code-Workflows ermöglicht und sicherstellt, dass die richtigen Komponenten für jeden Teil des Designs verwendet werden. Wenn ein Figma-Knoten mit einer Code-Komponente verbunden ist, hilft dir diese Funktion, die genaue Komponente in deinem Projekt zu identifizieren und zu verwenden.
get_image
Für die Verwendung dieses Tools gehe zu Einstellungen > Dev Mode MCP Server-Einstellungen > Tool get_image aktivieren
Dadurch wird ein Screenshot deiner Auswahl erstellt, um die Layout-Treue zu erhalten. Lass diese Option aktiviert, es sei denn, du verwaltest Token-Limits.
Dev Mode MCP-Servereinstellungen
Hierbei handelt es sich um zusätzliche Einstellungen, die du unter „Einstellungen“ ändern und mit dem MCP-Client verwenden kannst.
Tool get_image aktivieren
- Platzhalter verwenden: Überspringt die Bildextraktion und fügt stattdessen generische Platzhalter ein – hilfreich, wenn du sie lieber manuell im Code austauschen möchtest. Andernfalls werden echte Bilder aus deiner Datei abgerufen.
Code Connect aktivieren
Enthält Code Connect-Mappings in der Antwort, damit der generierte Code Komponenten aus deiner verbundenen Codebasis wiederverwenden kann, wo immer dies möglich ist.
Wenn du den Dev Mode MCP-Server verwendest, wird möglicherweise ein Popup in Figma angezeigt, das dich um Feedback bittet. Um uns Feedback zu geben, verwende bitte dieses Formular.
Best Practices für MCP
Die Qualität des generierten Codes hängt von mehreren Faktoren ab. Einige werden von dir gesteuert, und einige von den Tools, die du verwendest. Hier sind einige Vorschläge für eine klare und konsistente Ausgabe.
Strukturiere deine Figma-Datei für besseren Code.
Gib den besten Kontext für deine Designabsicht an, damit das MCP und dein KI-Assistent Code generieren können, der klar, konsistent und auf dein System abgestimmt ist.
-
Verwende Komponenten für alles, was wiederverwendet wird (Schaltflächen, Karten, Eingabefelder usw.)
-
Verknüpfe Komponenten mit deiner Codebasis über Code Connect. Dadurch wird eine konsistente Wiederverwendung von Komponenten im Code am besten gewährleistet. Ohne sie kann das Modell nur raten.
-
Verwende Variablen für Abstände, Farben, Radien und Typografie.
-
Benenne Ebenen semantisch (z. B.
CardContainer
, nichtGroup 5
) -
Verwende Auto-Layout, um die responsive Absicht zu kommunizieren.
Tipp: Ändere die Größe des Frames in Figma, um zu prüfen, ob er sich wie erwartet verhält, bevor du den Code generierst.
-
Verwende Annotationen und Entwicklerressourcen, um Designabsichten zu vermitteln, die sich nur schwer allein durch visuelle Darstellungen erfassen lassen, z. B. wie sich etwas verhalten, ausrichten oder reagieren soll.
Schreibe effektive Eingabeaufforderungen, um die KI zu leiten
MCP liefert deinem KI-Assistenten strukturierte Figma-Daten, aber dein Prompt bestimmt das Ergebnis. Gute Prompts können Folgendes:
- Passe das Ergebnis an dein Framework oder Stil-System an
- Befolge die Dateistruktur und Namenskonventionen
- Füge Code zu bestimmten Pfaden hinzu (z. B.
src/components/ui
) - Füge Code in vorhandene Dateien hinzu oder ändere ihn, anstatt neuen Code zu erstellen.
- Befolge spezifische Layoutsysteme (z. B. Raster, Flexbox, absolut)
Beispiele:
- „Generiere iOS SwiftUI-Code aus diesem Frame“
- „Verwende Chakra UI für dieses Layout“
- „Verwende
src/components/UI
-Komponenten“ - „Füge dies zu
src/components/marketing/PricingCard.tsx
hinzu“ - „Nutze unsere
Stack
-Layout-Komponente“
Stell dir Prompts wie eine kurze Anweisung an eine*n Teamkolleg*in vor. Klare Absichten führen zu besseren Ergebnissen.
Bei Bedarf spezifische Auslöser verwenden
Die MCP unterstützt verschiedene Tools. Jedes Tool bietet deinem KI-Assistenten eine andere Art von strukturiertem Kontext. Manchmal wählt der Assistent nicht automatisch das Richtige aus, besonders wenn mehr Tools verfügbar werden. Wenn die Ergebnisse nicht stimmen, versuche, deinen Prompt präzise zu formulieren.
- get_code bietet eine strukturierte React + Tailwind Darstellung deiner Figma-Auswahl. Hierbei handelt es sich um einen Ausgangspunkt, den dein KI-Assistent je nach deinem Prompt in jedes Framework oder jeden Code-Stil übersetzen kann.
- get_variable_defs extrahiert die Variablen und Stile, die in deiner Auswahl verwendet wurden (Farbe, Abstand, Typografie usw.). Das hilft dem Modell, deine Tokens direkt im generierten Code zu referenzieren.
Zum Beispiel, wenn du Rohcode anstelle von Tokens erhältst, probiere Folgendes:
- „Hol dir die in diesem Frame verwendeten Variablennamen und -werte.“
Benutzerdefinierte Regeln hinzufügen
Lege projektspezifische Richtlinien fest, um die Ergebnisse konsistent zu halten – ähnlich wie Onboarding-Notizen für neue Entwickler*innen. Dazu gehören:
- Bevorzugte Layout-Grundelemente
- Dateiorganisation
- Benennungsmuster
- Was nicht hart kodiert werden sollte
Du kannst sie in dem Format bereitstellen, das dein MCP-Client für Anweisungsdateien verwendet.
Beispiele:
---
Beschreibung: Figma Dev Mode MCP-Regeln
Globs:
alwaysApply: true
---
- Der Figma Dev Mode MCP-Server bietet einen Assets-Endpunkt, der Bild- und SVG-Assets bereitstellen kann
- WICHTIG: Wenn der Figma Dev Mode MCP-Server eine localhost-Quelle für ein Bild oder ein SVG zurückgibt, verwende dieses Bild oder diese SVG-Quelle direkt
- WICHTIG: Importiere/füge keine neuen Icon-Pakete hinzu, alle Assets sollten sich in der Figma-Nutzlast befinden
- WICHTIG: Verwende oder erstelle KEINE Platzhalter, wenn eine localhost-Quelle angegeben wird
# MCP-Server
## MCP-Regeln für den Figma Dev Mode
- Der Figma Dev Mode MCP-Server bietet einen Assets-Endpunkt, der Bild- und SVG-Assets bereitstellen kann
- WICHTIG: Wenn der Figma Dev Mode MCP-Server eine localhost-Quelle für ein Bild oder ein SVG zurückgibt, verwende dieses Bild oder diese SVG-Quelle direkt
- WICHTIG: Importiere/füge keine neuen Icon-Pakete hinzu, alle Assets sollten sich in der Figma-Nutzlast befinden
- WICHTIG: Verwende oder erstelle KEINE Platzhalter, wenn eine localhost-Quelle angegeben wird
- WICHTIG: Verwende nach Möglichkeit immer Komponenten aus `/path_to_your_design_system`
- Priorisiere die Figma-Wiedergabetreue, um Designs genau abzugleichen
- Vermeide hard codierte Werte und verwende Design-Tokens von Figma, sofern verfügbar
- Befolge die WCAG-Anforderungen für Barrierefreiheit
- Füge Komponentendokumentation hinzu
- Platziere UI-Komponenten in `/path_to_your_design_system`; vermeide Inline-Stile, es sei denn, sie sind wirklich notwendig
Indem du diese einmal hinzufügst, kannst du den Bedarf an wiederholten Prompts deutlich reduzieren und sicherstellen, dass Teammitglieder oder Agenten konsequent die gleichen Erwartungen erfüllen.
Stelle sicher, dass du die Dokumentation deiner IDE oder deines MCP-Clients überprüfst, um zu erfahren, wie du Regeln strukturieren kannst, und experimentiere, um herauszufinden, was für dein Team am besten funktioniert. Klare, konsistente Anleitungen führen oft zu besserem, wiederverwendbarerem Code mit weniger Hin und Her.
Große Auswahlen aufteilen
Zerlege Bildschirme in kleinere Teile (wie Komponenten oder logische Abschnitte), um schnellere und zuverlässigere Ergebnisse zu erzielen.
Große Auswahlen können die Tools verlangsamen, Fehler verursachen oder zu unvollständigen Antworten führen, besonders wenn zu viel Kontext für das Modell zu verarbeiten ist. Stattdessen:
- Generiere Code für kleinere Abschnitte oder einzelne Komponenten (z. B. Karte, Header, Seitenleiste)
- Wenn es sich langsam anfühlt oder feststeckt, verkleinere deine Auswahlgröße
Dies hilft, den Kontext überschaubar zu halten und die Ergebnisse vorhersehbarer zu machen, sowohl für dich als auch für das Modell.
Wenn etwas in der Ausgabe nicht ganz richtig aussieht, hilft es normalerweise, die Grundlagen noch einmal zu überprüfen: wie die Figma-Datei strukturiert ist, wie der Prompt formuliert ist und welcher Kontext gesendet wird. Das Befolgen der oben genannten Best Practices kann einen großen Unterschied machen und führt oft zu konsistentem, wiederverwendbarem Code.