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.

  Erfahre mehr über Code Connect →

Schritt 1: Aktiviere den MCP-Server

1. Öffne die Figma Desktop-App und stelle sicher, dass du auf die neueste Version aktualisiert hast.
2. Erstelle oder öffne eine Datei in Figma Design.
3. Öffne das Figma-Menü in der oberen linken Ecke.
4. 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.

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.

{
  "mcpServers": {
    "Figma Dev Mode MCP": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

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

1. Wähle mit der Desktop-App einen Frame oder eine Ebene in Figma aus.
2. Prompte deinen Client, um dir bei der Implementierung deiner aktuellen Auswahl zu helfen.
   

Link-basiert

1. Kopiere den Link zu einem Frame oder einer Ebene in Figma.
   
2. Prompte deinen Client, um dir bei der Implementierung des Designs unter der ausgewählten URL zu helfen.

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.

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, nicht Group 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:

1. Generiere Code für kleinere Abschnitte oder einzelne Komponenten (z. B. Karte, Header, Seitenleiste)
2. 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.