Figma MCP ist ein Konnektor, mit dem ein AI-Assistent deine Figma-Dateien direkt auslesen kann: Frames, Ebenen, Komponenten, Abstände, Farbstile und Text, statt anhand eines eingefügten Screenshots zu raten. Es basiert auf MCP, dem Model Context Protocol, einem offenen Standard, den Anthropic veröffentlicht hat, damit Assistenten über eine gemeinsame Schnittstelle mit externen Tools kommunizieren können. Figma stellt einen offiziellen Server bereit, und die Community hat mehrere weitere entwickelt. Für die Einrichtung musst du einen kleinen Konfigurationsblock zu deinem AI-Client hinzufügen und den Zugriff auf dein Figma-Konto autorisieren. Je nachdem, wie sicher du dich beim Bearbeiten von Konfigurationsdateien fühlst, dauert das zwischen zehn Minuten und einem Nachmittag. Wenn dieser Satz bereits nach einem frustrierenden Nachmittag klingt, findest du weiter unten auf dieser Seite einen einfacheren Weg.
Was ist Figma MCP eigentlich?
MCP ist ein Standard, kein Produkt. Er legt fest, wie ein AI-Assistent ein externes System nach Informationen fragt und wie dieses System antwortet. Alles, was diesen Standard unterstützt, wird als MCP-Server bezeichnet, und ein Server ist im Grunde nur ein Adapter: Auf der einen Seite kommuniziert er mit Figma, auf der anderen mit Claude in einem Format, das Claude bereits versteht.
Figma MCP ist also eine Kurzbezeichnung für einen Server, der zwischen deinem Assistenten und deinen Designdateien sitzt. Sobald er läuft, arbeitet Claude nicht mehr anhand eines flachen Bildes, sondern mit Strukturen. Es kann erkennen, dass der Button eine Komponenteninstanz ist, dass der Innenabstand 16 und nicht 15 beträgt und dass der Textstil body/regular statt "der kleinere graue".
Es gibt einen offiziellen Server von Figma für Design-to-Code-Workflows sowie Community-Implementierungen, die Dateien über die öffentliche Figma-API auslesen. Sie unterscheiden sich darin, wie du dich authentifizierst und wie viel der Datei sie offenlegen, aber aus Claudes Sicht sehen sie alle gleich aus: als Liste verfügbarer Tools, die es aufrufen kann, wenn deine Anfrage sie benötigt. Wenn du zuerst den größeren Zusammenhang verstehen möchtest, haben wir eine leicht verständliche Erklärung dazu verfasst, was MCP ist und warum es existiert.
Was kann Figma MCP Claude tatsächlich tun lassen?
Das Interessante ist nicht, dass "Claude deine Datei sehen kann". Es geht um die Aufgaben, die nicht mehr manuell erledigt werden müssen.
- Einen ausgewählten Frame in Frontend-Code umwandeln, der mit der Datei übereinstimmt. Keine grobe Annäherung anhand eines Bildes, sondern Abstände, Hierarchie und Komponentennamen, die direkt aus dem Design stammen. Du prüfst den Code weiterhin. Du musst Werte nicht mehr abtippen.
- Design-Tokens aus einer Datei extrahieren. Farbstile, Typoskala, Abstände und Eckenradien als Variablen in dem Format exportieren, das deine Codebasis verwendet.
- Eine Datei gegen ihr eigenes System prüfen. Welche Ebenen verwenden einen fest codierten Hex-Wert statt eines Stils, welche Frames nutzen Abstandsangaben, die sonst nirgends vorkommen, welche Komponenten wurden gelöst und unbemerkt bearbeitet.
- Verfasse Übergabenotizen und Spezifikationen. Zustände, Sonderfälle, leere Zustände und was im Fehlerfall passiert - beschrieben anhand der tatsächlichen Frames statt aus dem Gedächtnis.
- Überprüfe UX-Texte im Kontext. Jede Zeichenfolge in einem Ablauf, in der richtigen Reihenfolge gelesen, damit du die drei verschiedenen Wörter erkennst, die für dieselbe Aktion verwendet werden.
- Beantworte Fragen zu einer großen Datei. Wo wird diese Komponente verwendet, was hat sich in diesem Branch geändert, welche Screens verweisen noch auf das alte Logo?
Allen diesen Lösungen liegt dasselbe Muster zugrunde: Figma MCP entfernt den Copy-and-paste-Schritt zwischen Design und allem, was danach kommt. Das ist wirklich nützlich - und zugleich der gesamte Nutzen. Es trifft keine Designentscheidungen.
Wie richtest du einen Figma-MCP-Server ein?
Die Einzelheiten unterscheiden sich je nach Server und Client, und beide ändern sich häufig genug, dass ein kopierter Befehl aus einem Blogbeitrag eine gute Möglichkeit ist, zwanzig Minuten zu verschwenden. Der grundlegende Ablauf bleibt stabil, also lerne das Muster.
- Wähle einen Server. Beginne mit dem offiziellen Figma-Server, wenn du Design-to-Code in einem Editor umsetzen möchtest. Sieh dir Community-Server an, wenn du über die API auf Dateien zugreifen musst, ohne dass die Desktop-App läuft. Beide sind in den öffentlichen Verzeichnissen für MCP-Server aufgeführt.
- Kläre den Zugriff. Offizielle Tools verwenden in der Regel deine angemeldete Figma-Sitzung und benötigen eine Einstellung, die du in der App aktivierst. Community-Server verlangen meist ein persönliches Zugriffstoken, das du in den Einstellungen deines Figma-Kontos erstellst. Behandle dieses Token wie ein Passwort: Es kann alles lesen, was auch du lesen kannst.
- Füge den Server zur MCP-Konfiguration deines Clients hinzu. Claude Desktop, Claude Code und die meisten AI-fähigen Editoren lesen eine Konfigurationsdatei, in der die Server aufgeführt sind, die dir zur Verfügung stehen sollen - einschließlich des Befehls zum Starten jedes Servers und aller dafür benötigten Zugangsdaten. Du fügst einen Eintrag hinzu.
- Starte den Client neu. Hinter fast jedem Bericht nach dem Muster „Es funktioniert nicht“ steckt ein Client, der nach einer Änderung der Konfiguration nie neu gestartet wurde.
- Überprüfe die Verbindung. Dein Client zeigt die verbundenen Server und die Tools an, die jeder davon anbietet. Wenn die Tool-Liste angezeigt wird, steht die Verbindung.
- Gib ihm etwas, das es sich ansehen kann. Bei den meisten Workflows musst du in Figma einen Frame auswählen oder einen Link dorthin einfügen und anschließend deine Frage stellen. Claude liest nur, worauf du es hinweist.
Beim ersten Versuch bringen zwei Dinge viele Nutzer durcheinander. Server, die über die Figma-Desktop-App funktionieren, benötigen eine geöffnete App und eine geladene Datei - wenn du sie geschlossen hast, passiert also nichts. Außerdem sind die meisten Server auf das Lesen ausgerichtet: Sie können dir viel besser sagen, was sich in einer Datei befindet, als sie zu verändern.
Was sind die tatsächlichen Einschränkungen von Figma MCP?
Gut zu wissen, bevor du den ganzen Nachmittag dafür aufwendest.
- Du brauchst einen Client, der MCP unterstützt. Das bedeutet eine Desktop-App, einen Editor oder ein Terminal. Ein Browser-Chatfenster im kostenlosen Tarif reicht dafür nicht aus.
- Zugriff ist in der Praxis ganz oder gar nicht möglich. Ein persönlicher Token erreicht typischerweise jede Datei, auf die dein Konto zugreifen kann. Wenn dein Konto zu einer gemeinsam genutzten Organisation gehört, solltest du darüber nachdenken, bevor du einen erstellst.
- Es geht kaputt, wenn sich Dinge ändern. APIs ändern sich, Server werden neu geschrieben, ein Client-Update verändert das Konfigurationsformat. Alles, was du darauf aufbaust, braucht gelegentlich Wartung.
- Große Dateien verbrauchen Kontext. Ein Bildschirm mit 400 Ebenen erzeugt eine große Menge strukturierter Daten. Auf einen einzelnen Frame zu verweisen funktioniert gut. Auf eine ganze Datei zu verweisen oft nicht.
- Unordentliche Dateien erzeugen unordentliche Ergebnisse. Wenn deine Ebenen Frame 217 heißen und die Hälfte der Stile nicht verknüpft ist, übernimmt der generierte Code das. Der Connector liest, was vorhanden ist, er räumt nicht auf.
- Es ermöglicht Zugriff, nicht Beurteilung. Claude kann dein Design jetzt sehen. Ob es dieses Design wie ein Senior-Designer beurteilt, ist eine völlig separate Frage - und genau diese lohnt sich als Nächstes zu lösen.
Was, wenn MCP mehr Einrichtung erfordert, als du möchtest?
Hier ist die Unterscheidung, die viel Zeit spart. MCP steuert, worauf Claude zugreifen kann. Es sagt nichts darüber aus, wie gut Claude arbeitet, sobald es dort angekommen ist. Das sind zwei verschiedene Probleme, und die meisten Designteams haben das zweite, nicht das erste.
Wenn du eigentlich möchtest, dass Claude eine fundierte Designkritik, einen Rechercheplan oder eine Komponenten-API liefert, die ein Architekt für Design-Systeme abzeichnen würde, brauchst du überhaupt keinen Connector. Du brauchst Claude, das wie dieser Spezialist arbeitet. Genau dafür gibt es eine Skill-Datei: ein kurzes Markdown-Dokument, das du einmal hochlädst und das Claude eine Rolle, eine Methode und einen einheitlichen Ausgabestandard vorgibt. Die Installation dauert etwa drei Minuten und funktioniert mit jedem Tarif, mit oder ohne MCP. Mehrere der folgenden Design-Skills sind derzeit kostenlos, sodass du die Idee testen kannst, bevor du Geld ausgibst.
Der Designer, nicht der Connector
Kostenlos
dieser Skill
Flows, Zustände, Hierarchie und Interaktionslogik - kritisch betrachtet, wie es ein Produktdesigner tun würde: Wofür ist der Bildschirm da, was fehlt, was tut der Nutzer, wenn etwas schiefgeht? Füge einen Bildschirm ein oder beschreibe ihn - kein Connector erforderlich.
Denholm ansehen →Das Duo, das sich in der Praxis am besten bewährt: MCP zum Auslesen, ein Skill zum Denken. Claude zieht die tatsächlichen Werte aus deiner Datei und wendet dann eine Methode darauf an, statt zu improvisieren.
Für die Hälfte rund um Tokens und Komponenten
$29
dieser Skill
Token-Benennung, Komponenten-APIs, Variantenstruktur und die Regeln dafür, wann etwas einen Platz im System verdient. Genau die Beurteilungsebene, die auf den Rohdaten aufsetzt, die dir ein Figma-Connector liefert.
Vashti ansehen →Bevor irgendetwas entworfen wird
Kostenlos
dieser Skill
Recherchepläne, nicht suggestive Interviewleitfäden und eine Methode, um Transkripte in Erkenntnisse umzuwandeln, mit denen ein Team arbeiten kann. Ebenfalls 29 $, wodurch sich damit günstig testen lässt, ob Skills deine Ergebnisse überhaupt verändern.
Melisande ansehen →Insgesamt gibt es 32 kostenlose Skills in der kostenlosen Kollektion. Das umfassendere Designangebot findest du unter Creative-, Content- und Design-Skills. Wenn du die Installation Schritt für Schritt erklärt haben möchtest, siehe So installierst du einen Claude Skill.
Zusammenfassung:
Figma MCP verbindet Claude mit deinen echten Designdateien, sodass Claude anhand der Struktur statt anhand von Screenshots arbeitet. Die Einrichtung lohnt sich, wenn du regelmäßig Code generierst oder Tokens extrahierst. An der Qualität von Claudes Designurteil ändert sich dadurch nichts - genau das behebt eine Skill-Datei: Beginne mit Denholm - UX/UI Product Designer für 29 $ und füge Vashti - Design Systems Architect für weitere 29 $ hinzu, wenn Tokens und Komponenten zum Problem werden.
Figma MCP: Häufige Fragen
Ist Figma MCP kostenlos?
Das Protokoll ist ein offener Standard, und die Server selbst können im Allgemeinen kostenlos installiert werden. Du brauchst ein Figma-Konto mit Zugriff auf die Dateien sowie einen AI-Client, der MCP unterstützt. Einige AI-Clients erfordern für die Funktionen, die das Ganze sinnvoll machen, einen kostenpflichtigen Tarif. Die Kosten fallen also auf dieser Seite an und nicht beim Konnektor.
Kann Claude meine Figma-Datei über MCP bearbeiten?
Gehe davon aus, dass dies nicht der Fall ist, sofern der von dir gewählte Server nichts anderes angibt. Die meisten dieser Konnektoren sind für das Lesen konzipiert: zum Extrahieren von Struktur, Werten und Inhalten. Schreibzugriff ist seltener und störanfälliger. Du solltest ihn an einer duplizierten Datei testen, nicht an laufenden Arbeitsdateien.
Funktioniert Figma MCP mit Claude Code?
Ja, insofern Claude Code MCP-Server generell unterstützt - genau deshalb wird diese Kombination so häufig für Design-to-Code-Arbeiten eingesetzt. Der eine Teil liest den Frame aus, der andere schreibt die Komponente - in derselben Sitzung. Dasselbe gilt für Claude Desktop und die meisten AI-fähigen Editoren.
Brauche ich noch einen Design-Skill, wenn ich Figma MCP eingerichtet habe?
Sie beantworten unterschiedliche Fragen. MCP bestimmt, was Claude sehen kann. Ein Skill bestimmt, wie Claude mit dem arbeitet, was es sieht - deshalb ergänzen sich beide, statt miteinander zu konkurrieren. Wir haben die beiden Ansätze direkt in Claude Skills vs MCP verglichen.
