Figma MCP einrichten: Remote, Desktop und erster Abruf

Bereiten Sie einen eigenen Test-Frame mit einem eindeutigen Namen, einer kurzen Textzeile und einer bekannten Farbe vor. Notieren Sie seine Adresse und den erwarteten Inhalt. So können Sie später unterscheiden, ob tatsächlich das richtige Objekt gelesen wurde oder nur ein ähnlich benannter Bereich. Dieser Leitfaden beschreibt einen vorgeschlagenen Test für Ihre Umgebung; ein angemeldeter Figma-Kontotest wurde hier nicht durchgeführt.

Remote und Desktop gezielt unterscheiden

Figma dokumentiert den entfernten Endpunkt https://mcp.figma.com/mcp mit OAuth-Anmeldung. Dafür ist die Desktop-App nicht erforderlich. Der Desktop-Server wird in der Figma-App im Dev Mode aktiviert und ist unter http://127.0.0.1:3845/mcp erreichbar. Prüfen Sie in der Herstellerdokumentation, ob Ihr Client unterstützt wird. Eine entfernte Entwicklungsumgebung erreicht unter ihrer eigenen Loopback-Adresse nicht automatisch Ihren Rechner.

Vollständiges Beispiel für VS Code

Öffnen Sie in VS Code die MCP-Konfiguration für den gewünschten Arbeitsbereich und tragen Sie diese vollständige Struktur ein. Bei einer vorhandenen Datei ergänzen Sie nur den Eintrag unter servers, damit andere Verbindungen erhalten bleiben. Starten Sie den Server und schließen Sie die angebotene Figma-Anmeldung ab. Das Beispiel enthält keine Zugangsdaten. Weitere Dateidetails stehen in der VS-Code-Anleitung.

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Für den Desktop-Weg verwenden Sie einen getrennten Eintrag mit der lokalen Adresse. Beschriften Sie die beiden Verbindungen eindeutig und lassen Sie für den ersten Vergleich nur die gewünschte Verbindung aktiv. Andernfalls bleibt unklar, welche Quelle ein Ergebnis geliefert hat. Der Konfigurationsbaukasten erzeugt Vorlagen aus Registerangaben; dieses Herstellerbeispiel ist davon unabhängig.

Einen Frame lesen und das Ergebnis prüfen

1. Öffnen Sie den Test-Frame selbst und kopieren Sie seinen direkten Link. Halten Sie Name und erwartete Textzeile getrennt vom späteren Ergebnis fest.

2. Fordern Sie ausschließlich Designkontext zu diesem Frame an. Figma dokumentiert dafür get_design_context; prüfen Sie die tatsächlich angebotene Werkzeugliste.

3. Vergleichen Sie Objekt, Text und eine bekannte Eigenschaft. Ein Screenshot kann den visuellen Abgleich ergänzen, ersetzt aber keine Prüfung der gelieferten Werte.

4. Ändern Sie anschließend eine unkritische Testzeile selbst in Figma und wiederholen Sie den Abruf. Notieren Sie, ob die Antwort den neuen Stand enthält.

Fehlende Auswahl und große Antworten eingrenzen

Beim Remote-Weg bezeichnet ein Frame- oder Layer-Link das gewünschte Objekt. Der Desktop-Weg unterstützt zusätzlich die Auswahl in der App. Beginnen Sie deshalb bei einem fehlenden Ergebnis mit einem expliziten Link. Kommt sehr viel Inhalt zurück, wählen Sie einen kleineren Frame und vergleichen Sie erneut. Prüfen Sie bei Verbindungsfehlern Adresse, Anmeldung und Erreichbarkeit einzeln im Fehler-Navigator.

Eine erfolgreiche Leseprobe sagt nichts über Schreibfunktionen, alle Dateien des Kontos oder die Qualität einer späteren Umsetzung aus. Prüfen Sie zusätzliche Aufgaben getrennt. Für Teamrechte und Freigaben hilft der Berechtigungsplan. Die Figma-Suche im Register führt auch andere Implementierungen; ein gleicher Produktname belegt keine Herausgabe durch Figma.

Häufige Fragen zur Figma-Verbindung

Brauche ich für Remote die Desktop-App?

Für den dokumentierten Remote-Weg nicht. Für den lokalen Desktop-Server ist die App erforderlich.

Warum hilft localhost in einem Container nicht?

Die Loopback-Adresse zeigt auf die Umgebung des aufrufenden Prozesses. Prüfen Sie, von welchem Rechner der Client tatsächlich verbindet.

Ist eine Verbindung automatisch nur lesend?

Nein. Prüfen Sie die angebotenen Funktionen und begrenzen Sie den ersten Test ausdrücklich auf den Abruf.

Warum ist das ausgewählte Objekt nicht eindeutig?

Verwenden Sie einen direkten Frame-Link und vergleichen Sie ihn mit der erwarteten Datei. Gleiche Namen reichen als Nachweis nicht aus.

Herstellerquellen geprüft am 2. Oktober 2026. Der Prüfablauf ist ein redaktioneller Vorschlag.

1. Figma: Remote-Server
   Abrufbefehl anzeigen

   curl -s https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
2. Figma: Desktop-Server
   Abrufbefehl anzeigen

   curl -s https://developers.figma.com/docs/figma-mcp-server/local-server-installation/
3. Figma: Tools and prompts
   Abrufbefehl anzeigen

   curl -s https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/

Alle Beiträge