Figma MCP: Verbindung von Figma mit Claude Code und KI-Codierungsagenten

Um die gewünschte Wirkung zu erzielen, erstellen Sie einen Screenshot eines Figma-Frames und fügen ihn in Claude Code ein. Durch die Verknüpfung von Figma und MCP erhalten Sie Komponenten, die bis auf das Token genau zu Ihrem Designsystem passen.

Der Unterschied zwischen diesen beiden Arbeitsabläufen beträgt etwa fünf Minuten Einrichtungszeit. Die meisten Designer haben dies noch nicht umgesetzt, da es in Tutorials oft technisch klingt. Dabei ist es ganz einfach: Sie benötigen lediglich einen einzigen Befehl und müssen in Figma einen Schalter aktivieren. Das ist alles.

Sobald die Verbindung hergestellt ist, liest der KI-Agent nicht mehr den von Ihnen zugewiesenen Abstand (z. B. 20px Abstand), sondern verwendet Ihre tatsächliche Farbpalette. Er verwendet nicht mehr die Annäherung an Ihren Button, sondern ruft den bereits erstellten Button auf. Dies funktioniert nur, wenn Designsystem auf der anderen Seite korrekt konfiguriert ist.

MCP ist ein Übersetzer, kein Zauberstab.

MCP steht für Modellkontextprotokoll. Anthropic veröffentlichte es Ende 2024. Figma stellte 2025 einen offiziellen Server dafür bereit. Jedes KI-Tool, das 2026 etwas taugt, unterstützt es.

Stellen Sie sich MCP wie einen USB-Anschluss für KI-Agenten vor. Vor MCP musste jedes Tool, das mit einem KI-Modell kommunizieren wollte, eine eigene Integration entwickeln. Nach MCP sprechen die Tools einfach das Protokoll, und jeder MCP-fähige Agent kann sie lesen. Figma, GitHub, Slack, Linear, Ihr Dateisystem, Datenbanken, was auch immer. Ein Protokoll, standardisiert, wiederverwendbar.

Was der MCP-Server von Figma konkret leistet: Er stellt die Strukturdaten Ihrer Figma-Dateien jedem KI-Agenten zur Verfügung, mit dem Sie sich verbinden. Frame-IDs, Ebenennamen, verschachtelte Komponenten, Abstandswerte, Farbvariablen, Typografiestile, Auto-Layout-Einstellungen – alles. Die KI liest den tatsächlichen Inhalt Ihrer Datei, nicht das Aussehen eines JPEGs.

MCP ist keine Zauberei. Es ist ein Kabel. Die Arbeit muss weiterhin auf beiden Seiten einwandfrei funktionieren.

Was der Server von Figma MCP tatsächlich preisgibt

Der Server gewährt KI-Agenten Lesezugriff auf bestimmte Daten von Figma. Genau zu wissen, was die KI sehen kann und was nicht, ist sowohl für die Ergebnisse als auch für die Sicherheit wichtig.

| Was die KI lesen kann | Warum das wichtig ist |

|------------------|----------------|

| Frame-Struktur (IDs, Namen, Hierarchie) | Agent weiß, worauf er zugreifen soll |

| Einstellungen für das automatische Layout (Richtung, Abstand, Padding) | Abstände werden exakt übertragen |

| Variablenreferenzen (Farb-Tokens, Abstands-Tokens, Typografie) | Ausgabe entspricht Ihrem System |

| Komponenteninstanzen und -überschreibungen | Agent ruft vorhandene Komponenten auf |

| Textstile und -inhalte | Texte werden an der richtigen Stelle platziert |

| Bildfüllungen (standardmäßig nur URLs, keine Pixeldaten) | Bilder werden korrekt referenziert |

Was es nicht lesen kann: private Dateien, für die Sie keine Genehmigung erteilt haben, andere Teambibliotheken, die nicht mit dieser Datei verbunden sind, Kommentare, Versionsverlauf oder alles außerhalb der von Ihnen angegebenen Datei.

Dieser Umfang ist wichtig, da er verhindert, dass eine schlecht trainierte KI in Ihrem Figma-Arbeitsbereich herumstöbert. Sie liest nur die von Ihnen angegebenen Daten.

Installation in Claude Code (fünf Minuten)

Wenn Claude Code bereits läuft (falls nicht, siehe Claude Code für Designer), ist MCP nur eine Konfigurationsänderung entfernt.

Schritt 1: Gehen Sie auf Ihrem Figma-Desktop zu den Einstellungen und aktivieren Sie unter den Entwicklermodus-Einstellungen „Lokalen MCP-Server aktivieren“. Figma startet dann einen Server auf Ihrem Rechner am Standardport.

Schritt 2: Öffnen Sie in Ihrem Terminal die Konfigurationsdatei Claude Code:

claude mcp add figma http://127.0.0.1:3845/mcp --transport http

Dieser Befehl registriert den lokalen Server MCP von Figma bei Claude Code. Keine JSON-Bearbeitung, keine Suche nach der Konfigurationsdatei.

Schritt 3: Starten Sie Claude Code neu. In Ihrer nächsten Sitzung wird Claude Code automatisch Figma als verfügbar erkennen.

Überprüfen Sie dies mit: /mcp in einer Claude Code-Sitzung. Figma sollte angezeigt werden.

Um Figma zu verwenden, fügen Sie eine URL in Ihre Eingabeaufforderung ein. Claude Code löst den Frame über MCP auf, nicht über einen Screenshot, und arbeitet mit der tatsächlichen Struktur.

Installation in Cursor (ca. 5 Minuten)

Für Cursor-Benutzer ist der Ablauf etwas anders, das Prinzip jedoch dasselbe.

Schritt 1: Wie oben. Aktivieren Sie den lokalen Server MCP auf dem Desktop von Figma.

Schritt 2: Öffnen Sie in Cursor die Einstellungen, gehen Sie zum Abschnitt MCP und klicken Sie auf „Server MCP hinzufügen“. Fügen Sie Folgendes ein:

Name: figma
URL: http://127.0.0.1:3845/mcp
Transport: HTTP

Schritt 3: Speichern und Cursor neu starten. Figma wird nun als verfügbare Datenquelle im Agenten-Panel angezeigt.

Cursor bietet für MCP eine etwas intuitivere visuelle Darstellung als für Claude Code, mit einem UI-basierten Schalter pro Server. Funktionell sind beide Varianten identisch: Sie fügen eine Figma-URL ein, der Agent liest den tatsächlichen Frame, und die Ausgabe entspricht Ihrem System.

Die fünf Workflows, die dadurch ermöglicht werden

Design-to-Code mit höchster Präzision. Sie fügen eine Figma-Frame-URL ein. Claude Code übernimmt die Ebenenstruktur, die Auto-Layout-Werte, die Variablenbindungen und die Komponenteninstanzen. Die generierte React-Komponente verwendet Ihre tatsächlichen Schaltflächen, Ihre tatsächlichen Karten und Ihre tatsächlichen Abstandsmarkierungen. Keine Annäherungen, keine erfundenen Klassen. Dies ist der wichtigste Workflow und allein dafür lohnt sich die fünfminütige Installation.

Code Connect-Verifizierung. Wenn Sie bereits die Code Connect-Funktion von Figma verwenden (die Figma-Komponenten Ihren Code-Komponenten zuordnet), ermöglicht MCP dem Agenten, die Zuordnung bei der Codegenerierung zu überprüfen. Es wird keine neue Komponente erstellt, die eine bereits von Code Connect registrierte Komponente dupliziert. Dadurch werden versehentliche Neuerfindungen vermieden.

Variablen-Synchronisierungsprüfung. Angenommen, Sie haben letzte Woche ein Farbtoken umbenannt. Fragen Sie Claude Code: „Lies den Frame unter dieser Figma-URL und liste alle Variablenreferenzen auf, die nicht mit unserer aktuellen Token-Datei übereinstimmen.“ Abweichungen werden sofort erkannt. Früher dauerte das eine 45-minütige Loom-Sitzung mit einem Entwickler.

Screenshot-zu-Komponente-Fallback. Wenn MCP die Datei nicht lesen kann (Kundendatei, nicht freigegeben oder kein Auto-Layout-Frame), greift der Agent auf die Bildanalyse zurück. Sie können Folgendes kombinieren: MCP für Ihre eigene Arbeit, Screenshots für einmalige Kundenreferenzen. Gleiche Aufforderung, beides funktioniert.

Design-Qualitätssicherung. Umgekehrte Vorgehensweise. Bitten Sie Claude Code, einen Screenshot einer bereitgestellten Seite mit einem Figma-Frame zu vergleichen: „Hier ist die URL der Produktionsseite. Hier ist die Figma-URL, der sie entsprechen sollte. Listen Sie die visuellen Unterschiede auf.“ Dadurch wird das Problem „Designer hat freigegeben, aber Entwickler haben falsche Abstände ausgeliefert“ erkannt, bevor es in die Produktion gelangt.

| Workflow | Ohne MCP | Mit MCP |

----------|-------------|----------|

| Design-to-Code | Vibes-basiert, manuelle Korrektur erforderlich | Tokengenau, sofort verwendbar |

| Code Connect | Separater manueller Schritt | Automatische Verifizierung |

| Variable Abweichung | Manuelle Prüfung, Stundenaufwand | Einzeiler, Minuten |

Screenshot-Fallback | Einzige Option | Fallback, wenn MCP nicht verfügbar ist |

Design-Qualitätssicherung | Manueller Vergleich | Diff-Bericht in Sekunden |

Weitere Informationen zu KI-Workflows finden Sie unter Brainy Papiere. Wenn Sie MCP in die gesamte Design-to-Code-Pipeline Ihres Teams integrieren möchten, klicken Sie auf Brainy einstellen.

Sicherheit: Was Figma und was Ihre KI sehen

Zwei separate Fragen, die beide wichtig sind.

Was Figma sieht. Der Server MCP läuft lokal auf Ihrem Rechner, nicht auf den Servern von Figma. Figma erkennt, dass Sie MCP aktiviert haben und auf welche Dateien zugegriffen wird, da die Authentifizierung über Ihre Figma-Sitzung läuft. Bei Unternehmenskonten können Administratoren die lokale MCP-Authentifizierung auf Organisationsebene deaktivieren.

Was der KI-Agent sieht: Die von Ihnen eingefügte Figma-Datei-URL. Der Agent hat keinen Zugriff auf Ihren gesamten Figma-Arbeitsbereich. Er sieht keine anderen Teambibliotheken, es sei denn, Sie verweisen explizit darauf. Er sieht keine Kommentare, Versionsverlauf oder nicht zugehörige Dateien. Jede Eingabeaufforderung ist auf die von Ihnen angegebenen Daten beschränkt.

Was Ihren Rechner verlässt: Wenn Sie Claude Code mit der API von Anthropic verwenden, werden die angeforderten Frame-Daten als Teil des Eingabeaufforderungskontexts an Anthropic gesendet. Das ist wichtig, wenn Ihre Figma-Datei vertrauliche Kundendaten oder unveröffentlichte Produktdesigns enthält. Lesen Sie die KI-Richtlinien Ihres Teams, bevor Sie MCP für sensible Dateien verwenden.

Für die meisten Designarbeiten ist das unproblematisch. Bei regulierten Branchen oder Geheimhaltungsvereinbarungen mit strengen Datenschutzklauseln sollten Sie dies jedoch vorher prüfen.

Wo Figma MCP noch Schwächen aufweist

Seien Sie ehrlich: Dies ist Figma MCP im April 2026, keine ausgereifte Zukunftsversion.

Die Bildverarbeitung ist eingeschränkt. MCP stellt dem Agenten URLs für die Bildfüllung bereit, nicht die tatsächlichen Pixeldaten. Bei Layouts, in denen das Bild eine wichtige Rolle für die Komposition spielt, muss der Agent weiterhin raten.

Prototypen und Interaktionen werden nicht übertragen. MCP legt die statische Struktur offen. Enthält Ihre Figma-Datei Prototypverbindungen, Hover-Zustände, intelligente Animationen oder Variantenwechsel, erkennt der Agent diese nicht. Die Animationslogik muss weiterhin manuell geschrieben werden.

Plugins sind nicht lesbar. Hat ein Figma-Plugin Inhalte in Ihrer Datei generiert (Diagramme, Symbole, Datenvisualisierungen), interpretiert der Agent die Ausgabe als statische Ebene. Die Logik des Plugins kann nicht neu generiert werden.

Die Performance verschlechtert sich bei sehr großen Dateien. Eine Datei mit mehr als 500 Frames benötigt länger zum Auflösen als eine Datei mit 20 Frames. Arbeiten Sie für optimale Ergebnisse mit kleineren Seiten anstatt mit einer einzigen großen Datei.

Die Annahmen für das automatische Layout sind wichtig. Der Agent liefert die sauberste Ausgabe, wenn Ihre Figma-Frames das automatische Layout korrekt verwenden. Absolut positionierte Freiform-Layouts lassen sich schlecht übersetzen. Dies ist ein Disziplinproblem (Figma), kein Problem der Benutzerführung (MCP), tritt aber hier besonders deutlich zutage.

Keiner dieser Punkte ist ein Ausschlusskriterium. Sie alle sprechen dafür, MCP mit guter prompte Entwicklung zu kombinieren, anstatt blind darauf zu vertrauen.

FAQ

Ist Figma MCP kostenlos nutzbar?

Ja. Der Server (MCP) ist ohne zusätzliche Kosten in Figma Desktop integriert. Sie bezahlen für Figma und Ihr KI-Tool (Claude, Cursor usw.). Die Verbindung selbst ist kostenlos.

Funktioniert Figma MCP in der Webversion?

Der lokale MCP-Server ist eine Figma-Desktop-Funktion. Webnutzer haben derzeit keinen Zugriff darauf. Für anspruchsvolle Design-to-Code-Arbeiten ist die Desktop-Version ohnehin die bessere Wahl.

Kann ich MCP gleichzeitig mit mehreren KI-Tools verwenden?

Ja. Mehrere Agenten können auf denselben lokalen MCP-Server zugreifen. Claude Code, Cursor, Claude Desktop und alle anderen MCP-fähigen Clients können sich gleichzeitig verbinden.

Was passiert, wenn ich während einer Sitzung die Figma-Dateien wechsle?

Der Agent löst den Frame unter der von Ihnen angegebenen URL auf. Durch das Wechseln von URLs wird der Kontext gewechselt. Sie können in einer Konversation auf mehrere Dateien verweisen, ohne etwas neu starten zu müssen.

Ersetzt MCP den Entwicklermodus Figma?

Nein. Der Entwicklermodus ist das benutzerfreundliche Inspektionstool. MCP ist die Datenebene für Agenten. Sie ergänzen sich. Tatsächlich zeigt der Entwicklermodus dieselben Daten an, die MCP dem Agenten zur Verfügung stellt.

Schluss mit Screenshots von Figma

Jedes Designteam hat eine schlechte Angewohnheit: einen Screenshot eines Figma-Frames zu erstellen, ihn in ChatGPT oder Claude einzufügen und nach Code zu fragen. Das Ergebnis sind immer nur Vibes, nie Tokens. Dann verbringt man eine Stunde damit, die Vibes manuell zu korrigieren.

Fünf Minuten Installationszeit, und dieser Workflow ist Geschichte. Der Agent liest den tatsächlichen Frame. Die Abstände sind real. Die Komponenten sind die realen Komponenten. Die Token sind die realen Token. Der Code ist beim ersten Mal nahezu produktionsreif.

Aktivieren Sie MCP in Figma. Installieren Sie den Konnektor in Ihrem KI-Tool. Fügen Sie URLs ein, keine Screenshots.

Der Unterschied in der Ausgabequalität zwischen „vor MCP“ und „nach MCP“ ist deutlich sichtbar. Es ist die Installation mit dem größten ROI pro Minute im Werkzeugkasten des modernen Designers.

Erstellen Sie keine Screenshots mehr für Figma.