Figma MCP ist ein Konnektor, über den ein AI-Assistent deine Figma-Dateien direkt auslesen kann: Frames, Ebenen, Komponenten, Abstände, Farbstile und Texte, 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 bietet einen offiziellen Server an, und die Community hat mehrere weitere entwickelt. Für die Einrichtung musst du deinem AI-Client einen kleinen Konfigurationsblock 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 unangenehmen Nachmittag klingt, gibt es 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 die 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 anhand der Struktur. 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 „dem kleineren grauen“.
Es gibt einen offiziellen Server von Figma für Design-to-Code-Workflows sowie Community-Implementierungen, die Dateien über die öffentliche API von Figma auslesen. Sie unterscheiden sich darin, wie du dich authentifizierst und wie viel der Datei sie verfügbar machen, 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 ermöglichen?
Das Interessante ist nicht, dass „Claude deine Datei sehen kann“. Es ist die Reihe von Aufgaben, die nicht mehr manuell erledigt werden müssen.
- Einen ausgewählten Frame in Frontend-Code umwandeln, der der Datei entspricht. Keine grobe Annäherung anhand eines Bildes, sondern Abstände, Hierarchie und Komponentennamen, die direkt aus dem Design übernommen werden. Du prüfst den Code weiterhin selbst. Du musst Werte nicht mehr abtippen.
- Design-Tokens aus einer Datei extrahieren. Farbstile, Typskalierung, Abstände und Eckenradien - als Variablen in dem Format exportiert, das deine Codebasis verwendet.
- Eine Datei anhand ihres eigenen Systems prüfen. Welche Ebenen verwenden einen fest codierten Hex-Wert statt eines Stils, welche Frames verwenden Abstände, die sonst nirgendwo vorkommen, welche Komponenten wurden gelöst und unbemerkt bearbeitet?
- Verfassen Sie Übergabenotizen und Spezifikationen. Zustände, Sonderfälle, leere Zustände und das Verhalten bei Fehlern - beschrieben anhand der tatsächlichen Frames statt aus dem Gedächtnis.
- Überprüfen Sie UX-Texte im Kontext. Jede Zeichenfolge eines Ablaufs wird der Reihe nach gelesen, sodass Sie erkennen können, wenn dieselbe Aktion mit drei verschiedenen Begriffen bezeichnet wird.
- Beantworten Sie 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?
Das Grundprinzip hinter all diesen Lösungen: Figma MCP beseitigt den Schritt des Kopierens und Einfügens zwischen Design und allem, was danach kommt. Das ist wirklich nützlich - und zugleich der gesamte Nutzen. Es trifft keine Designentscheidungen.
Wie richtet man einen Figma-MCP-Server ein?
Die Einzelheiten unterscheiden sich je nach Server und Client und ändern sich so häufig, dass ein kopierter Befehl aus einem Blogbeitrag eine gute Möglichkeit ist, zwanzig Minuten zu verschwenden. Der grundsätzliche Ablauf bleibt gleich - machen Sie sich damit vertraut.
- Wählen Sie einen Server aus. Beginnen Sie mit dem offiziellen Figma-Server, wenn Sie Design-to-Code in einem Editor umsetzen möchten. Sehen Sie sich Community-Server an, wenn Sie über die API auf Dateien zugreifen müssen, ohne dass die Desktop-App läuft. Beide finden Sie in öffentlichen Verzeichnissen für MCP-Server.
- Regeln Sie den Zugriff. Offizielle Tools verwenden in der Regel Ihre angemeldete Figma-Sitzung. In der App müssen Sie dafür eine Einstellung aktivieren. Community-Server benötigen meist ein persönliches Zugriffstoken, das Sie in den Einstellungen Ihres Figma-Kontos erstellen. Behandeln Sie dieses Token wie ein Passwort: Es kann alles lesen, worauf Sie selbst zugreifen können.
- Fügen Sie den Server zur MCP-Konfiguration Ihres Clients hinzu. Claude Desktop, Claude Code und die meisten AI-fähigen Editoren lesen eine Konfigurationsdatei, in der die verfügbaren Server, der Startbefehl für jeden Server und die benötigten Zugangsdaten aufgeführt sind. Sie fügen einen Eintrag hinzu.
- Starten Sie den Client neu. Hinter fast jedem Bericht „Es funktioniert nicht“ steckt ein Client, der nach der Änderung der Konfiguration nie neu gestartet wurde.
- Überprüfen Sie die Verbindung. Ihr Client zeigt die verbundenen Server und die von ihnen angebotenen Tools an. Wenn die Tool-Liste vorhanden ist, steht die Verbindung.
- Geben Sie ihm etwas zum Anschauen. Bei den meisten Workflows müssen Sie in Figma einen Frame auswählen oder einen Link dorthin einfügen und anschließend Ihre Frage stellen. Claude liest nur, worauf Sie es verweisen.
Beim ersten Versuch stoßen viele auf zwei Probleme. Server, die über die Figma-Desktop-App funktionieren, benötigen eine geöffnete App und eine geladene Datei. Wenn Sie sie geschlossen haben, passiert also nichts. Außerdem sind die meisten Server auf das Lesen ausgerichtet: Sie können viel besser sagen, was in einer Datei enthalten ist, als sie zu verändern.
Was sind die tatsächlichen Einschränkungen von Figma MCP?
Gut zu wissen, bevor Sie den Nachmittag dafür aufwenden.
- Sie benötigen einen Client, der MCP unterstützt. Das kann eine Desktop-App, ein Editor oder ein Terminal sein. Ein Browser-Chatfenster mit einem kostenlosen Tarif reicht dafür nicht aus.
- Der Zugriff ist in der Praxis ganz oder gar nicht möglich. Ein persönlicher Token kann normalerweise auf jede Datei zugreifen, auf die auch dein Konto zugreifen kann. Wenn dein Konto Teil einer gemeinsam genutzten Organisation ist, 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.
- Unaufgeräumte Dateien erzeugen unaufgeräumte 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 verschafft Zugriff, aber kein Urteilsvermögen. Claude kann dein Design jetzt sehen. Ob es dieses Design wie ein Senior-Designer bewertet, ist eine völlig andere Frage - und genau diese Frage lohnt es sich als Nächstes zu lösen.
Was, wenn MCP mehr Einrichtung erfordert, als du möchtest?
Hier ist der Unterschied, der 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 nicht das erste, sondern das zweite.
Wenn du eigentlich möchtest, dass Claude eine fundierte Designkritik, einen Rechercheplan oder eine Komponenten-API erstellt, die eine Architektin für Designsysteme abzeichnen würde, brauchst du überhaupt keinen Connector. Du musst Claude lediglich wie diese Spezialistin arbeiten lassen. Genau das leistet eine Skill-Datei: ein kurzes Markdown-Dokument, das du einmal hochlädst und das Claude eine Rolle, eine Methode und einen Ausgabestandard vorgibt. Die Installation dauert etwa drei Minuten und funktioniert mit jedem Tarif, mit oder ohne MCP. Einige der Design-Skills unten sind derzeit kostenlos, sodass du die Idee ausprobieren kannst, bevor du Geld ausgibst.
Der Designer, nicht der Connector
Kostenlos
dieser Skill
Abläufe, Zustände, Hierarchie und Interaktionslogik - kritisch geprüft, 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; ein Connector ist nicht erforderlich.
Denholm ansehen →Die Kombination, die sich in der Praxis am besten bewährt: MCP zum Auslesen, ein Skill zum Nachdenken. Claude holt die tatsächlichen Werte aus deiner Datei und wendet anschließend eine Methode darauf an, statt zu improvisieren.
Für die Hälfte mit Tokens und Komponenten
$14.99
dieser Skill
Benennung von Tokens, Komponenten-APIs, Variantenstruktur und die Regeln dafür, wann etwas einen Platz im System verdient. Genau die Urteilsebene, die auf den Rohdaten aufsetzt, die dir ein Figma-Connector liefert.
Vashti ansehen →Bevor überhaupt etwas gestaltet wird
Kostenlos
dieser Skill
Recherchepläne, nicht suggestive Interviewleitfäden und eine Methode, um aus Transkripten Erkenntnisse zu gewinnen, mit denen ein Team arbeiten kann. Derzeit ebenfalls kostenlos - eine günstige Möglichkeit zu testen, ob Skills deine Ergebnisse überhaupt verändern.
Melisande ansehen →Insgesamt gibt es 32 kostenlose Skills in der kostenlosen Sammlung. Das umfassendere Designangebot findest du unter Skills für Kreativ-, Content- und Designarbeit. Wenn du die Installation Schritt für Schritt erklärt haben möchtest, sieh dir So installierst du einen Claude Skill an.
Zusammenfassung:
Figma MCP verbindet Claude mit deinen echten Designdateien, sodass es auf Grundlage der Struktur statt von Screenshots arbeitet. Die Einrichtung lohnt sich, wenn du regelmäßig Code generierst oder Tokens extrahierst. An der Qualität von Claudes Designbeurteilung ändert sich dadurch nichts - genau das behebt eine Skill-Datei: Starte mit Denholm - UX/UI-Produktdesigner, derzeit kostenlos, und füge Vashti - Design-System-Architekt für 14,99 $ hinzu, sobald 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 in der Regel 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 lohnenswert machen, einen kostenpflichtigen Tarif - die Kosten fallen also eher auf dieser Seite an als beim Konnektor.
Kann Claude meine Figma-Datei über MCP bearbeiten?
Gehe davon aus, dass es nicht funktioniert, sofern der von dir ausgewählte Server nichts anderes angibt. Die meisten dieser Konnektoren sind für das Lesen ausgelegt: Sie extrahieren Struktur, Werte und Inhalte. Schreibzugriff ist seltener und anfä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 es häufig für Design-to-Code-Workflows eingesetzt. Auf der einen Seite wird der Frame eingelesen, auf der anderen die Komponente geschrieben - in derselben Sitzung. Dasselbe gilt für Claude Desktop und die meisten AI-fähigen Editoren.
Brauche ich weiterhin einen Design-Skill, wenn ich Figma MCP eingerichtet habe?
Sie beantworten unterschiedliche Fragen. MCP legt fest, was Claude sehen kann. Ein Skill legt fest, wie Claude mit dem umgeht, was es sieht - deshalb ergänzen sich die beiden, statt miteinander zu konkurrieren. Wir haben die beiden Ansätze direkt in Claude Skills vs. MCP verglichen.