Vor dem Start
Wer kann diese Funktion verwenden?
Der Remote-Server ist für alle Lizenzen und Abos verfügbar.
Der Desktop-Server ist für eine Dev- oder Full-Lizenz für alle kostenpflichtigen Abos verfügbar.
Du musst einen Code-Editor oder eine Anwendung verwenden, die MCP-Server unterstützt (z. B. VS-Code, Cursor, Windsurf, Claude Code). In unserem MCP-Katalog findest du eine komplette Liste der unterstützten Clients ->
Benutzer*innen mit Starter-Abo oder mit View- oder Collab-Lizenzen in kostenpflichtigen Abos sind auf bis zu 6 Toolaufrufe pro Monat beschränkt.
Benutzer*innen mit einer Dev- oder Full-Lizenz der Professional-, Organization- oder Enterprise-Abos haben minutenbasierte Quotenlimits, die denselben Beschränkungen wie die Tier-1 Figma REST API unterliegen. Wie bei der REST API von Figma behält sich Figma das Recht vor, die Quotenlimits zu ändern.
Der Figma MCP-Server hilft Entwickler*innen, Designs schnell und genau umzusetzen, indem er wichtigen Kontext für KI-Agenten bereitstellt, die Code aus Figma-Design-, FigJam und Make-Dateien generieren. Die Tools des MCP-Servers von Figma bringen zusätzlichen Kontext von Figma in deinen Workflow, sodass dein Code nicht nur zu deinen bestehenden Systemen, sondern auch zu deinem Design passt.
MCP-Server sind Teil einer standardisierten Benutzeroberfläche, über die KI-Agenten mithilfe des Model Context Protocol mit Datenquellen interagieren können.
Hinweis: Diese Seite enthält einen allgemeinen Überblick über den Figma MCP-Server. Detaillierte Anleitungen und Codebeispiele findest du in der Figma MCP Server-Entwicklerdokumentation →
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.
-
FigJam-Ressourcen abrufen
Greife auf Inhalte aus deinen FigJam-Diagrammen zu und verwenden sie in deinem Workflow zur Code-Generierung. Integriere frühzeitige Ideen, Flows oder Architekturkarten direkt in die Entwicklung.
-
Make-Ressourcen abrufen
Erfasse Code-Ressourcen aus Make-Dateien und stelle sie dem LLM als Kontext zur Verfügung. Dies kann beim Übergang vom Prototyp zu einer Produktionsanwendung hilfreich sein.
-
Halte deine Designsystem-Komponenten mit Code Connect konsistent
Steigere die Ausgabequalität durch die Wiederverwendung deiner tatsächlichen Komponenten. Code Connect gewährleistet die Einheitlichkeit des generierten Codes mit deiner Codebasis.
MCP-Server einrichten
Du kannst eine Verbindung mit dem Figma MCP-Server auf zwei Arten herstellen:
- Desktop-MCP-Server: Wird lokal über die Figma Desktop-App ausgeführt.
-
Remote-MCP-Server: Verbindet sich direkt mit dem von Figma gehosteten Endpunkt auf
https://mcp.figma.com/mcp.
Desktop-MCP-Server aktivieren
Öffne die Figma Desktop-App und stelle sicher, dass du auf die neueste Version aktualisiert hast.
Erstelle oder öffne eine Datei in Figma Design.
Schalte unten in der Symbolleiste auf Dev Mode um oder verwende die Tastenkombination Umschalttaste+D.
Klicke im MCP-Server -Abschnitt des Inspektionsfensters auf Desktop MCP-Server aktivieren.
Am unteren Rand des Fensters wird eine Bestätigungsmeldung angezeigt, sobald der Server ausgeführt wird.
Der Server wird lokal unter http://127.0.0.1:3845/mcp ausgeführt. Halte diese Adresse für deine Konfigurationsdatei im nächsten Schritt bereit.
MCP-Server mit deinem Editor verbinden
Befolge die Anweisungen für deinen spezifischen Editor, um eine Verbindung zum Figma MCP-Server herzustellen, entweder lokal oder remote:
| Client | Desktop-Server-Unterstützung | Remote-Server-Unterstützung |
| Amazon Q | ✓ | |
| Android Studio | ✓ | ✓ |
| Claude Code | ✓ | ✓ |
| Codex von OpenAI | ✓ | ✓ |
| Cursor | ✓ | ✓ |
| Gemini CLI | ✓ | ✓ |
| Kiro | ✓ | |
| OpenHands | ✓ | |
| Replit | ✓ | |
| VS-Code | ✓ | ✓ |
| Warp | ✓ | ✓ |
Tipp: Die aktuelle Liste der unterstützten Editoren und Clients findest du in unserem MCP-Katalog.
Prompte deinen MCP-Client
Der Figma 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 (nur Desktop-Server)
- Wähle mit der Desktop-App einen Frame oder eine Ebene in Figma aus.
- Prompte deinen Client, um Unterstützung bei der Implementierung deiner aktuellen Auswahl zu erhalten.
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
Der Figma MCP-Server enthält mehrere Tools, die deinem KI-Assistenten helfen, Code zu generieren, anzupassen und mit deinen Designs abzustimmen. Jedes Tool unterstützt unterschiedliche Workflows, von der Codeerstellung über die Zuordnung von Komponenten bis hin zum Abrufen von Design-Token. Mehr über verfügbare Tools und Nutzungsvorschläge erfährst du in der Figma MCP-Server-Entwicklerdokumentation.
Wenn du den Figma 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.