Wenn Sie dies über die Suche nach „figma mcp server not connecting“ oder „where is the MCP toggle in Figma“ gefunden haben, sind Sie hier richtig. Die meisten ersten Versuche, den Figma MCP-Server einzurichten, scheitern aus denselben zwei Gründen: fehlende Voraussetzungen und das Überspringen des Authentifizierungsschritts nach der Konfiguration. Der gesuchte Schalter wird möglicherweise noch gar nicht angezeigt – und das hat nichts mit dem verwendeten Tool zu tun.
Die korrekte Einrichtung des Figma MCP-Servers, ob remote oder auf dem Desktop, erfordert eine bestimmte Reihenfolge und einige nicht offensichtliche Voraussetzungen, die die meisten Einrichtungsanleitungen vollständig auslassen. Deshalb scheitern die meisten ersten Versuche.
Der Schalter erscheint erst, wenn Sie das gelesen haben
- Beginnen Sie mit dem Remote-MCP-Server – er funktioniert mit allen Tarifen und macht die Desktop-App überflüssig.
- Der häufigste Blocker: Dev Mode ist kostenpflichtig, und die Authentifizierung für den Remote-MCP-Server muss im Browser abgeschlossen werden, bevor etwas verbunden wird.
- Figma-Konten im kostenlosen Tarif können überhaupt nicht auf Dev-Mode-MCP-Server-Funktionen zugreifen – diese Voraussetzung wird in den meisten Anleitungen verschwiegen oder übersprungen.
Was der Figma MCP-Server tatsächlich für Ihren Workflow leistet
Der Figma MCP-Server ist eine Implementierung des Model Context Protocol, eines offenen Standards, über den KI-Clients strukturierten Kontext aus externen Tools nutzen können. Praktisch bedeutet das: Figma wird direkt in den Entwicklungs-Workflow eingebunden, indem MCP-fähige KI-Coding-Tools strukturierten Zugriff auf Ihre Designdateien erhalten – keine Screenshots, keine Exporte, sondern echte Komponentenbäume, Design-Token, Layout-Beschränkungen und Variantendaten.
Ohne ihn rät ein KI-Coding-Assistent anhand dessen, was Sie einfügen. Mit ihm kann das Tool den tatsächlichen Designkontext sehen und LLMs dabei helfen, designinformierten Code zu generieren, der Ihr reales Designsystem widerspiegelt. Genau darin liegt der Unterschied. Der Unterschied zwischen „Generiere eine React-Komponente“ und „Implementiere diesen Frame als React-Komponente mit den Token und dem Layout, die ich gerade tatsächlich lesen kann“ ist der Unterschied zwischen Code, der drei Review-Runden benötigt, und Code, der beim ersten Durchlauf größtenteils funktioniert. Don't Panic Labs hat diesen Wandel klar dokumentiert: Der Wechsel von Vermutungen zu strukturiertem Kontext ist die eigentliche Veränderung, die MCP bei der Design-zu-Code-Übergabe bewirkt.
Was Sie benötigen, bevor Sie den Figma MCP-Server verbinden können
Bevor Sie Konfigurationsdateien anfassen, prüfen Sie alle folgenden Punkte. Wenn einer fehlt, verbringen Sie 45 Minuten mit dem Debugging von etwas, das eigentlich nicht kaputt ist.
Einen passenden kostenpflichtigen Figma-Tarif für Desktop-/Dev-Mode-Funktionen
Figma-Nutzer im kostenlosen Tarif können überhaupt nicht auf Dev Mode zugreifen. Damit ist die Desktop-MCP-Server-Option schlicht nicht verfügbar. Wenn Sie einen kostenlosen Tarif nutzen und Figma mit einem KI-Tool verbinden möchten, ist der Remote-Server Ihr einziger Weg.
Die installierte und aktualisierte Figma-Desktop-App für den lokalen Serverpfad
Der Desktop-MCP-Server läuft innerhalb der Figma-Desktop-Anwendung. Wenn Sie nur die Browserversion verwenden, existiert der Schalter für den lokalen Server für Sie nicht. Laden Sie zuerst Figma Desktop herunter und aktualisieren Sie die Anwendung.
Einen MCP-fähigen MCP-Client für den Remote-Serverpfad
Nicht jedes KI-Coding-Tool unterstützt das Model Context Protocol. Unterstützt wird es von Claude Code, Cursor, VS Code mit aktiviertem GitHub Copilot und Codex. Wenn Ihre aktuellen Coding-Tools nicht auf dieser Liste stehen, hat der Server nichts, womit er sich verbinden kann.
Figma-Kontoberechtigungen für den Zugriff auf die betreffende Figma-Datei
Der OAuth-Authentifizierungsschritt schlägt stillschweigend fehl, wenn Ihr Konto nicht mindestens Lesezugriff auf die Datei hat, auf die Sie verweisen möchten. Prüfen Sie die Dateiberechtigungen, bevor Sie die Verbindung debuggen.
Aktivierter GitHub Copilot in VS Code, bevor Sie Figma MCP hinzufügen
Das überrascht viele. Entwickler müssen Copilot aktiv nutzen – nicht nur installiert haben –, bevor der Figma MCP-Server in VS Code funktioniert. Die Verbindung scheint erfolgreich zu sein, aber Tool-Aufrufe liefern keine Ergebnisse.
So aktivieren Sie Dev Mode und den MCP-Server in Figma
Die Reihenfolge ist hier wichtiger, als die meisten Anleitungen erkennen lassen. Der MCP-Server-Schalter in Figma befindet sich nicht im Hauptmenü für Einstellungen. Er erscheint nur innerhalb einer Datei, die aktiv im Dev Mode geöffnet ist – und erst, nachdem Sie diese Datei in den Dev Mode umgeschaltet haben. Dieses Muster begegnet mir ständig: Jemand öffnet die Figma-Einstellungen, sucht nach einem MCP-Bereich, findet nichts, schließt daraus, dass die Funktion im eigenen Tarif nicht verfügbar ist, und eröffnet ein Ticket. Meistens befindet sich die Datei einfach noch nicht im Dev Mode.
Hier ist die richtige Reihenfolge:
Schritt 1: Öffnen Sie die betreffende Figma-Datei. Wechseln Sie zu der Datei, in der sich Ihre Designs befinden und mit der Ihr Entwickler arbeiten wird.
Schritt 2: Wechseln Sie in den Dev Mode. Suchen Sie in der Symbolleiste oben rechts nach dem Schalter zum Wechsel zwischen Design Mode und Dev Mode. Klicken Sie darauf. Die Oberfläche ändert sich: Sie sehen codeorientierte Panels, Annotationswerkzeuge und entwicklerorientierte Metadaten. Wenn der Schalter nicht vorhanden ist, hat Ihr Konto oder Tarif keinen Zugriff auf Dev Mode. Hier liegt die Bezahlschranke. Für den Desktop-Pfad gibt es keine Umgehung.
Schritt 3: Suchen Sie den MCP-Server-Schalter. Jetzt, da Sie sich im Dev Mode befinden, suchen Sie in den Panel-Einstellungen oder im Bereich für Entwicklertools. Der Figma MCP-Server bietet einen Schalter speziell zum Aktivieren des MCP-Endpunkts – er wird erst sichtbar, nachdem Dev Mode für die Datei aktiv ist. Aktivieren Sie ihn.
Dass sich der Schalter an dieser Stelle befindet, ist nicht offensichtlich. Er erscheint weder in den Kontoeinstellungen noch in Plugin-Menüs oder an einer anderen Stelle, an der Nutzer Serverkonfiguration erwarten würden. Figma hat ihn in der Dev-Mode-Dateiansicht platziert, weil der MCP-Server auf bestimmte Inhalte in Figma beschränkt ist und nicht auf Ihr gesamtes Konto. Das ist tatsächlich eine sinnvolle Designentscheidung. Sie entspricht nur nicht dem Ort, an dem Nutzer beim ersten Mal danach suchen, wenn Coding-Tools ihn benötigen.
Aktivieren des Desktop-MCP-Servers und Kopieren der lokalen Server-URL
Sobald der Schalter im Dev Mode aktiviert ist, generiert die Figma-Desktop-App eine lokale Server-URL. Sie sieht etwa so aus: http://127.0.0.1:[port], wobei zur Laufzeit eine spezifische Portnummer zugewiesen wird. Sie müssen diese URL kopieren und in die MCP-Konfiguration Ihres Code-Editors einfügen.
Dieser Schritt wird häufig übersprungen. Der Desktop-MCP-Server läuft, in Figma sieht alles korrekt aus, und dann verbindet sich in der IDE nichts. Der Grund: Ihre MCP-Server-Konfiguration in der IDE weiß weiterhin nicht, wo sie suchen soll. Kopieren Sie die vollständige lokale Server-URL aus dem Dev-Mode-Panel der Figma-Desktop-App, öffnen Sie die Editor-Konfiguration und fügen Sie sie als Server-Endpunkt ein. Ohne dieses Einfügen sind Sie nur theoretisch mit Figma MCP verbunden. Das Coding-Tool und Figma laufen in getrennten Universen.
Einrichten des Remote-MCP-Servers: Der empfohlene Weg
Für die meisten Setups sollten Sie hier beginnen. Der Remote-Server unter https://mcp.figma.com/mcp ist der von Figma empfohlene Weg, weil er keine Figma-Desktop-App erfordert, mit jedem MCP-fähigen Client funktioniert und für mehr Tariftypen verfügbar ist als die Desktop-/Dev-Mode-Route.
Das allgemeine Muster zum Hinzufügen: In Ihrem MCP-fähigen Tool fügen Sie einen neuen MCP-Server-Eintrag hinzu, der auf https://mcp.figma.com/mcp verweist. Wie das funktioniert, hängt vom Tool ab – Claude Code, Cursor, VS Code und Codex haben jeweils leicht unterschiedliche Oberflächen, die weiter unten behandelt werden. Das Muster ist jedoch überall gleich: URL hinzufügen, Authentifizierung auslösen, im Browser abschließen.
Der letzte Teil ist nicht optional. Das Hinzufügen der URL ist nicht dasselbe wie das Verbinden des Servers. Die Authentifizierung ist ein separater erforderlicher Schritt, der nach der Konfiguration in einem Browserfenster erfolgt. Führen Sie beispielsweise in Claude Code nach dem Hinzufügen des Servers /mcp aus, um den Verbindungsstatus zu bestätigen. Wenn der Figma MCP-Server ohne Authentifizierungsfehler gelistet wird, sind Sie verbunden. Wenn er mit dem Status „disconnected“ oder „pending“ erscheint, wurde die Browser-Authentifizierung noch nicht abgeschlossen.
Bei agentischen Tools wie Claude Code verwendet der KI-Agent Figma als Tool, das er während einer Sitzung aufrufen kann. Sobald die Verbindung hergestellt und authentifiziert ist, kann er den Figma MCP-Server in seiner Liste verfügbarer Tools sehen und den Designkontext direkt abfragen. Neue MCP-Server-Einträge erscheinen unmittelbar nach erfolgreicher Authentifizierung im Tool-Panel. Fehlende Authentifizierung ist hier der häufigste Fehlerfall – und derjenige, den die meisten Einrichtungsanleitungen eher als Checkbox denn als erforderlichen Schritt in einer festen Reihenfolge behandeln.
🤔 Moment.
Das Hinzufügen der Server-URL zu Ihrer Konfiguration bedeutet nicht, dass der Server verbunden ist. Die Authentifizierung muss im Browser innerhalb derselben Sitzung abgeschlossen werden – der MCP-Server von Figma bleibt getrennt, bis OAuth genehmigt wurde, unabhängig davon, wie korrekt die URL eingegeben wurde. Konfiguration und Verbindung sind zwei unterschiedliche Dinge. Die meisten Fehler beim ersten Versuch entstehen in der Lücke dazwischen.
Cursor, VS Code und Codex für die Nutzung des Figma MCP-Servers konfigurieren
Jedes KI-Coding-Tool hat einen leicht anderen Einrichtungsweg. Die Authentifizierungsanforderung ist bei allen drei identisch – unterschiedlich sind nur der Ort, an dem Sie den Server hinzufügen, und die Oberfläche. Denken Sie in der Kategorie „MCP-Client“: Alles, was das Model Context Protocol spricht, kann sich verbinden, aber jeder Client in Ihrem Codebestand hat sein eigenes Einrichtungsritual. KI-gestützte Tools ohne native MCP-Unterstützung lassen sich unabhängig von Ihrer Konfiguration nicht verbinden.
Den Figma MCP-Server in Cursor hinzufügen
In Cursor ist die Plugin-Methode der schnellste Weg. Geben Sie /add-plugin figma in die Befehlsleiste ein oder verwenden Sie den direkten Deep Link aus Figmas MCP-Tool-Dokumentation. Beide Methoden konfigurieren den MCP-Server automatisch und registrieren den Figma MCP-Katalog mit Agent-Fähigkeiten, sodass KI-Agenten direkt aus dem Editor mit dem Figma-Designkontext interagieren können. Für diesen Pfad müssen Sie keine Konfigurationsdatei manuell bearbeiten.
Wichtig: Nach der Plugin-Installation ist weiterhin eine Authentifizierung erforderlich. Das Plugin konfiguriert die Client-Seite. Auf der Figma-Seite ist weiterhin eine OAuth-Genehmigung notwendig. Gehen Sie nicht davon aus, dass die Plugin-Installation die Verbindung abgeschlossen hat. Das hat sie nicht. Führen Sie eine Testabfrage aus und achten Sie auf eine Authentifizierungsaufforderung im Browser, bevor Sie den Vorgang als erledigt betrachten.
Den Figma MCP-Server in VS Code einrichten
Das Model Context Protocol ist ein offener Standard, und die VS-Code-Implementierung verwendet eine JSON-Konfigurationsdatei zur Registrierung von Servern. Öffnen Sie die Befehlspalette und führen Sie MCP: Open User Configuration aus, um auf mcp.json zuzugreifen. Fügen Sie einen Eintrag für Figma mit der HTTPS-Remote-URL als Serveradresse hinzu. Speichern Sie die Datei und klicken Sie dann im MCP-Panel auf Start. VS Code fordert Sie auf, den Zugriff in einem Browserfenster zu genehmigen – bestätigen Sie ihn.
Eine nicht offensichtliche Voraussetzung: GitHub Copilot muss aktiviert sein, bevor der Figma MCP-Server in VS Code funktioniert. Die standardisierte Schnittstelle, die das offene Context Protocol bereitstellt, benötigt Copilot als Client-Schicht. Ohne aktiven Copilot erscheint der Server-Eintrag in der Konfiguration, aber die Coding-Tools rufen ihn nie tatsächlich auf. Dies ist eine jener Situationen, in denen ein Protokoll zwar ein offener Standard ist, „unterstützt“ und „funktioniert“ aber ohne Prüfung der Voraussetzungen nicht dasselbe bedeuten.
Figma MCP in Codex verbinden
Verwenden Sie in Codex die Plugins-Oberfläche oder die CLI-Methode: codex mcp add figma --url https://mcp.figma.com/mcp. Dadurch wird der Server registriert und Figma als Tool verfügbar gemacht, für das Agenten Abfragen erstellen können. Figmas Tools erscheinen erst nach Abschluss der Authentifizierung in der Chat-Oberfläche – derselbe Browser-OAuth-Schritt, den jeder andere Client benötigt. Wenn Sie direkt nach Ausführung des Hinzufügebefehls eine designbezogene Eingabe machen und keine brauchbare Antwort erhalten, prüfen Sie zuerst die Authentifizierung, bevor Sie davon ausgehen, dass der Befehl fehlgeschlagen ist.
So grenzen Sie Prompts mit Figma-Node-URLs für bessere Codegenerierung ein
Hier erhalten die meisten Nutzer, die den Server erfolgreich verbunden haben, dennoch mittelmäßige Ergebnisse. Der Figma MCP-Server kann Ihre gesamten Figma-Designdateien lesen. Das bedeutet nicht, dass Sie ihn dazu auffordern sollten. Einem KI-Tool eine vollständige Datei-URL zu geben, ist wie jemandem ein 200-seitiges Dokument zu überreichen und zu sagen: „Implementieren Sie das Ding.“ Die generierte Codeausgabe spiegelt wider, was das LLM tatsächlich verarbeiten kann – und eine vollständige Datei überfordert entweder das Kontextfenster oder liefert generische Ergebnisse, die den konkreten Frame ignorieren, der Sie interessiert.
Der richtige Ansatz: Klicken Sie mit der rechten Maustaste auf den konkreten Frame, die Komponente oder Ebene, die Sie implementieren möchten, wählen Sie „Copy link to selection“ oder kopieren Sie die URL aus der Browser-Adressleiste mit angehängter Node-ID und fügen Sie diese spezifische Figma-Frame-URL in Ihren Prompt ein. Die Node-URL sagt dem über MCP verbundenen Tool präzise, welchen Ausschnitt der Figma-Komponente oder des Layouts es lesen soll. Die resultierende Codegenerierung berücksichtigt die tatsächlichen Layout-Beschränkungen, Design-Token und die Komponenten-Hierarchie für genau diesen Node – nicht einen statistischen Durchschnitt von allem in der Datei.
So finden Sie die Node-ID: Klicken Sie in Figma auf einen Frame oder eine Ebene. Die Browser-URL wird aktualisiert und enthält einen node-id-Parameter. Kopieren Sie die vollständige URL. Das ist Ihre eingegrenzte Referenz. Klicken Sie in der Figma-Desktop-App mit der rechten Maustaste auf ein beliebiges ausgewähltes Element und wählen Sie „Copy link to selection“. Das Ergebnis ist dasselbe.
Wenn Sie damit Code-Prompts schreiben: Fügen Sie die URL direkt in den Prompt-Text ein. Das KI-Tool ruft den MCP-Server mit dieser spezifischen Node-Referenz auf und schreibt Code auf Grundlage dessen, was es tatsächlich sieht.
📊 In der Praxis:
Ein Prompt wie „Implementieren Sie das Design unter [nodespezifische Figma-URL] als React-Komponente mit den Token unseres Designsystems“ generiert Code, der tatsächliche Abstände, Schrift-Token und Komponentenstrukturen widerspiegelt. Ein Prompt wie „Generiere eine React-Komponente für eine Karte“ erzeugt das, was das Modell für eine Karte hält. Der einzige Unterschied ist die URL. Ob der generierte Code zu Ihrem Design passt, hängt fast vollständig von dieser einen Entscheidung zur Eingrenzung ab.
Das ist der ganze Trick. Grenzen Sie auf den Node ein, nicht auf die Datei.
So überprüfen Sie, ob der Figma MCP-Server tatsächlich funktioniert
Ein verbundener Server und ein funktionierender Server sind nicht dasselbe. So sieht „funktionierend“ tatsächlich aus, damit Sie nicht raten müssen.
Prüfung 1: Der MCP-Client listet „figma“ ohne Authentifizierungsfehler auf. Führen Sie in Claude Code /mcp aus. Öffnen Sie in VS Code das MCP-Panel. Prüfen Sie in Cursor den Plugin-Status in der Seitenleiste. Der MCP-Server stellt dem Client eine Tool-Liste bereit – wenn Figma-Tools ohne Status „disconnected“ oder Fehlerstatus aufgelistet sind, ist die Verbindung aktiv. Wenn die Liste eine Authentifizierungswarnung oder einen grauen Status zeigt, kehren Sie zum Browser zurück und schließen Sie OAuth ab, bevor Sie etwas anderes tun.
Prüfung 2: Führen Sie eine Testabfrage mit einer Node-URL aus. Fügen Sie eine spezifische Figma-Frame-URL in einen Prompt ein und bitten Sie den KI-Agenten, das Layout zu beschreiben. Wenn er tatsächlichen Designkontext zurückgibt – Abstände, Komponentennamen, Token-Referenzen, Farbsyntax –, liest die Integration echte Daten aus der Figma-Datei. Wenn er eine allgemeine Beschreibung zurückgibt oder angibt, dass er nicht auf die Datei zugreifen kann, ist etwas in der Authentifizierungs- oder Berechtigungskette noch fehlerhaft.
Prüfung 3: Die Codeausgabe spiegelt das tatsächliche Designsystem wider. Generierter Code sollte auf echte Komponenten, reale Design-Token und die Layout-Struktur Ihres Figma-Designs verweisen. Wenn die Ausgabe auch ohne jeden Figma-Kontext hätte generiert werden können, wird der MCP-Server nicht aufgerufen. Dies ist der in der Praxis wichtigste Test für einen Entwicklungs-Workflow, der LLMs bei designinformiertem Code unterstützt: Ändert sich die Codeausgabe, wenn Sie den Prompt auf einen anderen Frame eingrenzen? Wenn ja, funktioniert MCP. Wenn die Ausgabe unabhängig von der übergebenen Frame-URL identisch ist, liest das Tool den Kontext nicht.
Für Desktop-Setups: Figma zeigt im Dev-Mode-Panel eine Bestätigung wie „server enabled and running“ an. Suchen Sie danach, bevor Sie die Editor-Seite testen. Wenn dort „running“ steht, der Editor aber keine Verbindung herstellen kann, prüfen Sie erneut, ob Sie die lokale Server-URL in die Editor-Konfiguration kopiert und eingefügt haben – und nicht die Remote-URL mcp.figma.com.
[Der Changelog von GitHub zu Figma MCP weist außerdem darauf hin, dass Sie mit VS Code und Copilot native Figma-Inhalte direkt aus dem Editor erstellen und bearbeiten können – gerenderte Benutzeroberflächen werden dabei als bearbeitbarer Frame zurück an Figma gesendet. Wenn diese bidirektionale Schleife Ihr Ziel ist: Sie ist jetzt real, und dieselbe Verbindung, die Sie gerade eingerichtet haben, unterstützt sie.]
Ein Muster, das Sie kennen sollten: Wenn Sie komplexere, mehrstufige Design-zu-Code-Pipelines aufbauen – etwa solche, bei denen Code überprüft, in ein Repository übertragen und regelmäßig gegen das Designsystem geprüft wird –, kann ein Tool wie Latenode die MCP-Verbindung umgeben und orchestrieren, was nach der Codegenerierung geschieht. Latenodes AI Agent Builder kann einen „Reader“-Agenten koordinieren, der Figma-Kontext abfragt, und einen „Writer“-Agenten, der Code ausgibt, während ein JavaScript-Node die Ausgabe nachverarbeitet, um Namenskonventionen durchzusetzen, bevor etwas in den Codebestand gelangt. Die Abrechnung pro Ausführung bedeutet, dass ein Workflow mit sechs Schritten wie dieser als ein Durchlauf zählt, nicht als sechs. Das sollten Sie wissen, wenn Sie über die Einrichtung für einzelne Nutzer hinausgehen und teamweite Automatisierung benötigen.
