Figmas MCP (Model Context Protocol) Server erstellt eine direkte Verbindung zwischen Ihren Figma-Designdateien und Coding-Agenten wie Claude Code und Cursor. Anstatt Designs manuell in Code zu übersetzen — Abstandswerte zu prüfen, Hex-Farben zu kopieren, Komponentenstrukturen nachzubauen — liest der Coding-Agent Ihre Figma-Datei direkt und generiert Code, der zu Ihrem Design-System passt.
Die MCP-Verbindung ist bidirektional. Coding-Agenten lesen Designdaten aus Figma (Komponenten, Variablen, Layout-Struktur). Sie können auch zurück auf die Leinwand schreiben — codierte Zustände, responsive Varianten und implementierte Bildschirme als bearbeitbare Figma-Ebenen für die Designer-Überprüfung übertragen. Dies eliminiert den traditionellen Design-Handoff-Engpass vollständig.
Wichtige Erkenntnis
Die Einrichtung dauert unter 10 Minuten, kostet nichts (MCP ist während der Beta kostenlos) und transformiert sofort den Design-zu-Code-Workflow. Der Coding-Agent sieht Ihren Design-System-Kontext — Komponenten, Farben, Abstands-Token — und generiert passenden Code. Kein Raten von Abstandswerten oder Annähern von Farben aus Screenshots mehr. Der MCP-Server ist die Brücke zwischen Design-Tools und Code-Editoren, die Produktteams seit einem Jahrzehnt gewollt haben.
Die MCP-Architektur verstehen
MCP (Model Context Protocol) ist ein offener Standard von Anthropic, der KI-Agenten ermöglicht, sich mit externen Datenquellen zu verbinden. Es ist dasselbe Protokoll, das Verbindungen zwischen Claude und Tools wie Google Drive, Slack und GitHub ermöglicht. Figmas MCP-Server macht Ihre Designdateien über dieses Protokoll zugänglich und lesbar für jeden MCP-kompatiblen Coding-Agent.
| Komponente | Was sie tut | Wer stellt sie bereit |
|---|---|---|
| Figma MCP Server | Stellt Designdaten über MCP-Protokoll bereit | Figma (gehostet auf mcp.figma.com/mcp) |
| Coding-Agent (Client) | Liest Designdaten und generiert Code | Claude Code, Cursor, Windsurf, etc. |
| Authentifizierung | OAuth über Figma-Konto | Ihr Figma-Login |
| Bereitgestellte Daten | Komponenten, Variablen, Stile, Layout | Ihre Figma-Dateien |
| Schreibzugriff | Codierte Zustände zurück auf die Leinwand übertragen | Über /figma-use-Fähigkeit |
Einrichtung: Claude Code (5 Minuten)
Schritt 1: Öffnen Sie Ihr Terminal und navigieren Sie zu Ihrem Projektverzeichnis.
Schritt 2: Starten Sie Claude Code mit konfiguriertem MCP-Server. Fügen Sie den Figma MCP-Server zu Ihrer Claude Code-Konfiguration hinzu (normalerweise in ~/.claude/mcp_servers.json oder der .mcp.json Ihres Projekts):
Schritt 3: Wenn Claude Code sich zum ersten Mal mit dem Figma MCP-Server verbindet, werden Sie zur Authentifizierung über OAuth aufgefordert — melden Sie sich mit Ihrem Figma-Konto an. Dies gewährt Lesezugriff auf Ihre Designdateien.
Schritt 4: Testen Sie die Verbindung, indem Sie Claude Code bitten, eine Figma-Datei zu beschreiben: „Lies die Figma-Datei unter [Figma-Datei-URL einfügen] und beschreibe ihre Komponentenstruktur." Wenn Komponentennamen, Variablen und Layout-Informationen zurückgegeben werden, funktioniert die Verbindung.
Einrichtung: Cursor (5 Minuten)
Schritt 1: Öffnen Sie Cursor-Einstellungen → MCP-Server.
Schritt 2: Fügen Sie einen neuen MCP-Server mit der URL hinzu: https://mcp.figma.com/mcp
Schritt 3: Authentifizieren Sie sich über OAuth, wenn dazu aufgefordert — derselbe Figma-Login wie oben.
Schritt 4: Verweisen Sie in Cursors KI-Chat auf Ihre Figma-Datei: „Lies das Design unter [Figma-URL] und generiere eine React-Komponente für den Header-Bereich mit Tailwind CSS." Cursor liest den Design-Kontext und generiert passenden Code.
📬 Ziehen Sie Nutzen daraus?
Eine umsetzbare KI-Erkenntnis pro Woche. Plus ein kostenloses Prompt-Paket bei der Anmeldung.
Kostenlos abonnieren →Welche Daten der MCP-Server bereitstellt
Zu verstehen, was der Coding-Agent „sehen" kann, hilft Ihnen, bessere Prompts zu schreiben und Ihre Figma-Dateien für MCP-Lesbarkeit zu organisieren:
| Datentyp | Was bereitgestellt wird | Wie Coding-Agenten es nutzen |
|---|---|---|
| Komponenten | Name, Eigenschaften, Varianten, Instanzen | Ordnet Code-Komponentenbibliotheken zu |
| Farbvariablen | Name, Hex-Wert, Sammlungen | Ordnet CSS-Variablen oder Tailwind-Konfiguration zu |
| Textstile | Schrift, Größe, Gewicht, Zeilenhöhe | Ordnet Typografie-Klassen zu |
| Abstände | Padding-, Gap-, Margin-Werte | Ordnet Abstands-Token zu |
| Layout | Auto-Layout-Richtung, Ausrichtung, Umbruch | Ordnet Flexbox-/Grid-Eigenschaften zu |
| Ebenenhierarchie | Eltern-Kind-Beziehungen | Ordnet DOM-Struktur zu |
Die praktische Bedeutung: Je besser Sie Dinge in Figma benennen, desto besser versteht sie der Coding-Agent. „Button/Primary/Large" ordnet sich sauber einer Code-Komponente zu. „Frame 147" sagt dem Agent nichts Nützliches. Dies ist dasselbe Prinzip wie die Vorbereitung für den Design-Agent — gut organisierte Design-Systeme produzieren bessere KI-Ausgaben, unabhängig davon, ob die KI designt oder programmiert.
Der bidirektionale Workflow in der Praxis
Die wahre Stärke von MCP liegt nicht nur im Lesen aus Figma — es ist die Rückschreibfunktion, die den Kreislauf vervollständigt. Wenn ein Entwickler Grenzfälle implementiert, die der Designer nicht spezifiziert hat (Fehlerzustände, Ladezustände, leere Zustände, responsive Breakpoints), können diese Implementierungen als bearbeitbare Frames zurück auf die Figma-Leinwand übertragen werden. Der Designer überprüft tatsächliche codierte Zustände, ohne zu einer Code-Vorschau zu wechseln.
Dieser Workflow eliminiert die häufigste Quelle von Design-Entwicklungs-Reibung: die Lücke zwischen „was designed wurde" und „was gebaut wurde". Mit MCP arbeiten beide Seiten von derselben Wahrheitsquelle aus, und Änderungen propagieren bidirektional. Der detaillierte Schritt-für-Schritt-Workflow findet sich in unserem Figma + Claude Code Leitfaden.
Für bessere Prompts bei der Verwendung MCP-verbundener Agenten — ob zum Lesen von Designs oder Generieren von Code — fügt der kostenlose Prompt Optimizer die Struktur hinzu, die genauere Ausgaben produziert. Für Ein-Klick-Optimierung innerhalb von ChatGPT, Claude und Gemini bringt TresPrompt es direkt in Ihre Seitenleiste.
Häufig gestellte Fragen
Ist der MCP-Server kostenlos?
Ja — der MCP-Server ist während der Beta-Phase kostenlos. Für MCP-Verbindungen werden keine KI-Credits verbraucht. Figma hat keine Preise für MCP nach der Beta angekündigt, aber die Server-Infrastrukturkosten sind minimal (es ist Lesezugriff, keine Berechnung), daher wird es wahrscheinlich kostenlos oder sehr kostengünstig bleiben.
Funktioniert MCP mit anderen Tools als Claude Code und Cursor?
Ja — jeder MCP-kompatible Agent kann sich verbinden. Dies schließt Windsurf, Cline und andere Tools ein, die das MCP-Protokoll unterstützen. Die Server-URL (https://mcp.figma.com/mcp) ist dieselbe, unabhängig davon, welcher Client sich verbindet.
Kann MCP jede Figma-Datei lesen, auf die ich Zugriff habe?
Ja — MCP übernimmt Ihre Figma-Kontoberechtigungen. Wenn Sie eine Datei in Figma ansehen können, kann MCP sie lesen. Wenn Sie keinen Zugriff haben, kann MCP sie nicht lesen. Das bedeutet, Team-Dateien, geteilte Dateien und Ihre persönlichen Dateien sind alle über MCP zugänglich.
Besteht das Risiko, dass der Coding-Agent meine Figma-Datei verändert?
Die Rückschreibfunktion ist opt-in und verwendet eine spezifische Fähigkeit (/figma-use). Der Agent wird Ihre Datei nicht ändern, es sei denn, er wird explizit angewiesen, codierte Zustände zurück auf die Leinwand zu übertragen. Lesezugriff ist Standard; Schreibzugriff erfordert bewusste Aktivierung. Selbst mit Schreibzugriff erstellt der Agent neue Frames, anstatt bestehende zu ändern, sodass Ihre ursprünglichen Designs erhalten bleiben.
Sollte ich MCP einrichten, auch wenn ich nicht programmiere?
Wenn Sie ein Designer sind, der nicht programmiert, hat MCP begrenzten direkten Wert — es ist hauptsächlich für Coding-Agenten, die Ihre Designs lesen. Das Verständnis, wie MCP funktioniert, hilft Ihnen jedoch, effektiver mit Entwicklern zusammenzuarbeiten, die es verwenden. Sie können auch experimentieren, indem Sie Claude.ai mit Ihren Figma-Dateien für Designanalyse, Forschung und Dokumentationsgenerierung verbinden (auch ohne Code zu schreiben).
Offenlegung: Einige Links in diesem Artikel sind Affiliate-Links. Wir empfehlen nur Tools, die wir persönlich getestet haben und regelmäßig verwenden. Siehe unsere vollständige Offenlegungsrichtlinie.