Leitfaden zum Dev Mode MCP-Server – Figma Learn - Hilfe-Center

🚧 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.

Erfahre mehr über Code Connect →

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. Füge dazu Folgendes zu deiner MCP-Serverkonfigurationsdatei hinzu:

{
  
    "mcpServers": {
    
      "Figma": {

        "url": "http://127.0.0.1:3845/sse"

    }

  }

}

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 folgende Konfiguration 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 ⌥⌘B 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.

Weitere Informationen findest du in der offiziellen Dokumentation von Windsurf.

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
```

Weitere Informationen findest du in der offiziellen Dokumentation von Anthropic.

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.

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.