Figma Console MCP Server

Dein Designsystem als API. Ein Server für das Model Context Protocol, der Design und Entwicklung verbindet – und KI-Assistenten vollständigen Zugriff auf Figma bietet für Extraktion, Erstellung, Debugging und bidirektionale Token-Synchronisierung.

🆕 Design-System-Extraktion (v1.40.0): Verwandle eine Produktionscodebasis in ein Designsystem. Sieben neue figma_ds_*-Tools (Local Mode) durchsuchen eine oder mehrere App-Codebasen – Erkennung von Framework, Styling-Methode und Vendor-Layer; eine nach Nutzung sortierte Komponenteninventur, klassifiziert als vendored / wrapped / pure-vendor / bespoke; Varianten-Inferenz aus echten Aufrufstellen; Duplikaterkennung; und einen Architektur-Durchlauf, der ein UI-Kit von einem Designsystem trennt (FollowButton ist eigentlich ein Button – und hier sind die fehlenden generischen Primitive). Anschließend extrahieren sie das faktische Styling der App in DTCG-Tokens mit Provenienz pro Token – Multimode-CSS-Custom-Properties (.dark, [data-theme] und Co.), SCSS-Variablen, Tailwind-Config-Werte, shadcn-HSL-Tripel, Tailwind-Utility-Class-Frequenzanalyse, bewertet anhand des eigenen App-Themes, sowie frequenzgeförderte Rohwerte – sie scaffolden das Designsystem-Paket mit Token-, Typografie- und Iconografie-Präsentationsseiten, binden eine frische Storybook-Werkstatt an die tatsächlichen Theme-Ebenen und Schriftarten der App an, extrahieren Komponenten tiefgehend für die Portierung mit CSF3-Story-Gerüsten, sichern das Ergebnis hinter deterministischen Fidelity-Evaluierungen ab und bewahren den Portierungsfortschritt über Sitzungen hinweg. Das extrahierte tokens/tokens.json lässt sich über figma_import_tokens direkt in Figma-Variablen importieren – ein vollständiger Code → Designsystem → Figma-Roundtrip. Außerdem wird der Fehler behoben, dass die Token-Formatter CSS-Funktionsausdrücke wie cubic-bezier(...) in Anführungszeichen setzen (ein in Anführungszeichen gesetztes Easing unterdrückt Übergänge stillschweigend – betrifft auch die Ausgabe von figma_export_tokens). Nur serverseitig – kein Plugin-Reimport nötig. Neuigkeiten ansehen →

Was ist das?

Figma Console MCP verbindet KI-Assistenten (wie Claude) mit Figma und ermöglicht:

• 🎨 Designsystem-Extraktion - Variablen, Komponenten und Styles abrufen

• 🧬 Codebasis → Designsystem-Extraktion - Eine Produktionscodebasis scannen, ihr faktisches Styling in DTCG-Tokens mit Provenienz pro Token extrahieren, ein Designsystem-Paket mit angebundener Storybook-Werkstatt scaffolden und mit deterministischen Fidelity-Evaluierungen absichern – und die Tokens dann per Roundtrip in Figma-Variablen überführen (Local Mode)

• 🔁 Bidirektionale Token-Synchronisierung - Figma-Variablen als DTCG-JSON exportieren (Legacy- oder 2025.10-Dialekt) + 9 weitere Formate; code-seitige Änderungen mit vollständigem Apply zurück an Figma übertragen – Anlegen, Umbenennen, Neuausrichtung von Aliasen und durch Replace abgesicherte Löschungen. Ersetzt die Export-Pipeline von Style Dictionary und Tokens Studio.

• 📸 Visuelles Debugging - Screenshots für Kontext aufnehmen

• ✏️ Designerstellung - UI-Komponenten, Frames und Layouts direkt in Figma erstellen – inklusive der Erstellung von Component-Sets mit einem einzigen Aufruf aus einer Varianten-Achsen-Matrix

• 🔧 Variablenverwaltung - Designtokens erstellen, aktualisieren, umbenennen und löschen

• 🕰 Versionsverlauf & Zeitreihen-Bewusstsein - Versionen auflisten, Snapshots diffen, Markdown-Changelogs erzeugen, die Einführung von Eigenschaften/Varianten per Binary-Search-Blaming nachverfolgen und die komponentenbezogene Design- und Git-Historie in generierte Komponentendokumente einfließen lassen

• ⚡ Echtzeit-Überwachung - Konsolenprotokolle des Desktop Bridge Plugins beobachten

• 📌 FigJam-Boards - Haftnotizen, Flussdiagramme, Tabellen und Codeblöcke auf kollaborativen Boards erstellen

• 🎞️ Slides-Präsentationen - Figma Slides Decks programmatisch erstellen und verwalten

• ♿ Barrierefreiheits-Scan - 14 WCAG-Designprüfungen mit Konformitätsstufen-Tagging, Komponenten-Scorecards, axe-core-Codescan, Design-to-Code-Parität

• 📋 Designsystem-Gesundheitsaudits - Audit im Lighthouse-Stil mit Bewertung von Namensgebung, Tokens, Komponenten-Metadaten, Barrierefreiheit, Konsistenz und Abdeckung – verfügbar als einfaches Tool für jeden MCP-Client (mit Auto-Fix-Anleitung pro Befund) und als visuelle Dashboard-App

• 🛡 Cross-MCP-Identität - Jede Tool-Antwort trägt _mcp: "figma-console-mcp", und Fehler sind mit [figma-console-mcp] präfixiert, damit die Zuordnung in Agents, die mehrere Figma-MCPs ausführen, eindeutig bleibt

• ☁️ Cloud Write Relay - Web-KI-Clients (Claude.ai, v0, Replit) können über Cloud-Pairing in Figma gestalten

• 🔄 Vier Verbindungsmöglichkeiten - Remote SSE, Cloud Mode, NPX oder lokales Git

Related MCP server: MCP Figma

⚡ Schnellstart

Wähle dein Setup

Entscheide zuerst, was du tun möchtest:

⚠️ Wichtig: Funktionsunterschiede

Fazit: Remote SSE ist mit 9 Tools nur lesend. Cloud Mode schaltet Schreibzugriff (101 Tools) für Web-KI-Clients ohne Node.js frei. NPX/Local Git bietet alle 121 Tools mit Echtzeit-Überwachung.

🚀 NPX Setup (Empfohlen)

Am besten geeignet für: Designer:innen, die vollständige KI-gestützte Designfunktionen nutzen möchten.

Das bekommst du: Alle 121 Tools, einschließlich Designerstellung, Variablenverwaltung und Komponenten-Instanziierung.

Voraussetzungen

• Node.js 18+ – Überprüfen mit node --version (Download)

• Figma Desktop installiert (nicht nur die Web-App)

• Ein MCP-Client (Claude Code, Cursor, Windsurf, Claude Desktop usw.)

Schritt 1: Hol dir deinen Figma-Token

1. Öffne in der Figma-Hilfe den Abschnitt Persönliche Zugriffstokens verwalten

2. Folge den Schritten, um ein neues persönliches Zugriffstoken zu erstellen

3. Gib als Beschreibung ein: Figma Console MCP

4. Setze die Bereiche: Dateiinhalt (Lesen), Dateiversionen (Lesen), Variablen (Lesen), Kommentare (Lesen und Schreiben)

5. Kopiere das Token – du siehst es kein zweites Mal! (beginnt mit figd_)

Schritt 2: Konfiguriere deinen MCP-Client

Claude Code (CLI):

claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest

Cursor / Windsurf / Claude Desktop:

Füge deiner MCP-Config-Datei Folgendes hinzu (siehe Wo du deine Config-Datei findest weiter unten):

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

📂 Wo du deine Config-Datei findest

Falls du nicht sicher bist, wohin die obige JSON-Konfiguration gehört, speichert jede App ihre MCP-Config an folgendem Ort:

Tipp für Designer:innen: Das ~-Symbol steht für deinen Benutzerordner. Auf macOS ist das /Users/YourName/, auf Windows C:\Users\YourName\. Du kannst diese Dateien in jedem Texteditor öffnen – sogar mit TextEdit oder Notepad.

Datei nicht gefunden? Falls sie noch nicht existiert, erstelle sie einfach. Die App erkennt sie beim nächsten Neustart. Achte darauf, dass die gesamte Datei gültiges JSON ist (auf fehlende Kommas oder Klammern achten).

Nutzer:innen von Claude Code: Du kannst die manuelle Bearbeitung komplett überspringen. Führe einfach den obigen Befehl claude mcp add aus, und er erledigt alles für dich.

Schritt 3: Verbinde dich mit Figma Desktop

Desktop Bridge Plugin:

1. Öffne Figma Desktop ganz normal (keine speziellen Flags nötig) und öffne eine Datei

2. Gehe zu Plugins → Entwicklung → Plugin aus Manifest importieren...

3. Wähle ~/.figma-console-mcp/plugin/manifest.json (stabiler Pfad, wird vom MCP-Server automatisch erstellt)

4. Führe das Plugin in deiner Figma-Datei aus – es scannt die Ports 9223–9232 und verbindet sich automatisch mit deinem laufenden MCP-Server

Hinweis zu Plugin-Updates: Figma cached Plugin-Dateien (code.js und ui.html) auf Anwendungsebene. Der MCP-Server aktualisiert die Dateien unter ~/.figma-console-mcp/plugin/ bei jedem Start, aber Figma verwendet weiterhin seine zwischengespeicherte Kopie, bis du das Manifest neu importierst.

Ein erneuter Import ist nur erforderlich, wenn ein Eintrag in den Versionshinweisen das sagt – in der Regel, wenn das Plugin eine neue Methode hinzufügt, die der Server benötigt (z. B. v1.22.4, v1.10.0). Bei den meisten Upgrades bleibt der neue Server drahtkompatibel mit dem bisherigen Plugin, und ein erneuter Import ist optional: Du erhältst trotzdem alle funktionalen Änderungen, nur nicht die kosmetischen Anpassungen auf Plugin-Seite (Status-Pill-Texte, pluginVersion-Meldung).

Wenn du neu importierst: Plugins → Plugins verwalten → ~/.figma-console-mcp/plugin/manifest.json erneut importieren. Der stabile Pfad ändert sich nie, das ist also ein Ein-Klick-Schritt.

Schritt 4: Starte deinen MCP-Client neu

Starte deinen MCP-Client neu, um die neue Konfiguration zu laden.

Schritt 5: Teste es!

Check Figma status

→ Sollte den Verbindungsstatus mit aktivem WebSocket-Transport anzeigen

Create a simple frame with a blue background

→ Sollte einen Frame in Figma erstellen (bestätigt Schreibzugriff!)

📖 Vollständiges Setup-Handbuch

Für Mitwirkende: Local Git Mode

Am besten geeignet für: Entwickler:innen, die Quellcode ändern oder zum Projekt beitragen möchten.

Das bekommst du: Dieselben 121 Tools wie bei NPX, plus vollständigen Zugriff auf den Quellcode.

Schnelle Einrichtung

# Clone and build
git clone https://github.com/southleft/figma-console-mcp.git
cd figma-console-mcp
npm install
npm run build:local

Konfiguriere deinen MCP-Client

Füge zu deiner Config-Datei hinzu (siehe Wo du deine Config-Datei findest):

{
  "mcpServers": {
    "figma-console": {
      "command": "node",
      "args": ["/absolute/path/to/figma-console-mcp/dist/local.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

Folge dann den NPX-Schritten 3–5 weiter oben.

📖 Vollständiges Setup-Handbuch

📡 Remote SSE (Nur-Lese-Erkundung)

Am besten geeignet für: schnelle Evaluierung des Tools oder Nur-Lese-Extraktion von Designdaten.

Was Sie erhalten: 9 schreibgeschützte Tools – Daten anzeigen, Screenshots aufnehmen, Logs lesen, Design-Code-Parität. Keine Erstellung oder Bearbeitung von Designs möglich.

Claude Desktop (UI-Methode)

1. Öffnen Sie Claude Desktop → Einstellungen → Connectors

2. Klicken Sie auf "Benutzerdefinierten Connector hinzufügen"

3. Geben Sie ein:

   • Name: Figma Console (Read-Only)

   • URL: https://figma-console-mcp.southleft.com/sse

4. Klicken Sie auf "Hinzufügen" – Fertig! ✅

Die OAuth-Authentifizierung erfolgt automatisch, wenn Sie die Design-System-Tools zum ersten Mal verwenden.

Claude Code

⚠️ Bekanntes Problem: Der native --transport sse von Claude Code hat einen Bug. Verwenden Sie stattdessen mcp-remote:

claude mcp add figma-console -s user -- npx -y mcp-remote@latest https://figma-console-mcp.southleft.com/sse

💡 Tipp: Für den vollen Funktionsumfang verwenden Sie NPX Setup anstelle von Remote SSE.

Andere Clients (Cursor, Windsurf, etc.)

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://figma-console-mcp.southleft.com/sse"]
    }
  }
}

Upgrade auf den vollen Funktionsumfang

Bereit für die Design-Erstellung? Folgen Sie der Anleitung NPX Setup oben oder probieren Sie Cloud Mode aus, wenn Sie Node.js nicht installieren möchten.

📖 Vollständige Setup-Anleitung

☁️ Cloud Mode (Web-KI-Clients)

Am besten geeignet für: Die Verwendung von Claude.ai, v0, Replit oder Lovable zum Erstellen und Bearbeiten von Figma-Designs – kein Node.js erforderlich.

Was Sie erhalten: 101 Tools inklusive vollständigem Schreibzugriff – Design-Erstellung, Variablenverwaltung, Komponenten-Instanziierung und alle REST-API-Tools. Nur die Echtzeitüberwachung (Konsolenprotokolle, Auswahlverfolgung, Dokumentänderungen) erfordert den Local Mode.

Voraussetzungen

• Figma Personal Access Token – Hier eines erstellen (beginnt mit figd_)

• Figma Desktop mit installiertem Desktop Bridge Plugin (siehe Desktop Bridge Setup)

• Ein Web-KI-Client, der MCP unterstützt (Claude.ai, Lovable, v0, Replit, etc.)

Schritt 1: MCP-Connector hinzufügen

Fügen Sie diesen Endpunkt zu den MCP-Einstellungen Ihrer KI-Plattform hinzu:

URL: https://figma-console-mcp.southleft.com/mcp Auth: Ihr Figma-PAT als Bearer-Token

In Claude.ai: Einstellungen → Connectors → Benutzerdefinierten Connector hinzufügen → obige URL einfügen. In Lovable/v0/Replit: Suchen Sie in den Einstellungen nach "MCP-Server hinzufügen" oder "Integrationen" → URL einfügen und Token hinzufügen.

Schritt 2: Plugin koppeln

1. Öffnen Sie das Desktop Bridge Plugin in Figma Desktop (Plugins → Entwicklung → Figma Desktop Bridge)

2. Sagen Sie Ihrem KI-Assistenten:

   Connect to my Figma plugin

3. Die KI gibt Ihnen einen 6-stelligen Kopplungscode (läuft in 5 Minuten ab)

4. Im Plugin: "Cloud Mode" umschalten → Code eingeben → auf Verbinden klicken

5. Sie sind gekoppelt! Der volle Schreibzugriff ist jetzt verfügbar

Was Sie tun können

Nach dem Koppeln können Sie Designs per natürlicher Sprache erstellen:

Create a card component with a header image, title, description, and action button
Set up a color token collection with Light and Dark modes
Add a "High Contrast" mode to my existing token collection

Wie es funktioniert

Ihr KI-Client sendet Schreibbefehle über den Cloud-MCP-Server, der sie per WebSocket an das in Ihrem Figma Desktop laufende Desktop Bridge Plugin weiterleitet. Das Plugin führt die Befehle mit der Figma Plugin API aus und sendet die Ergebnisse auf demselben Weg zurück.

AI Client → Cloud MCP Server → Durable Object Relay → Desktop Bridge Plugin → Figma

Variablen auf jedem Tarif: Cloud Mode verwendet die Plugin API (nicht die Enterprise-REST-API), daher funktioniert die Variablenverwaltung auf Free-, Pro- und Organization-Tarifen.

📖 Vollständige Setup-Anleitung

📊 Vergleich der Installationsmethoden

Wichtige Erkenntnis: Remote SSE ist schreibgeschützt. Cloud Mode fügt Schreibzugriff für Web-KI-Clients ohne Node.js hinzu. NPX/Lokales Git bieten die vollen 121 Tools.

📖 Vollständiger Funktionsvergleich

🎯 Verbindung testen

Nach dem Setup können Sie diese Eingabeaufforderungen ausprobieren:

Basistest (alle Modi):

Navigate to https://www.figma.com and check status

Design-System-Test (erfordert Authentifizierung):

Get design variables from [your Figma file URL]

Cloud-Mode-Test:

Connect to my Figma plugin

→ Folgen Sie dem Kopplungsablauf und versuchen Sie dann: "Erstelle ein einfaches blaues Rechteck"

Plugin-Test (nur Local Mode):

Show me the primary font for [your theme name]

🔐 Authentifizierung

Remote Mode – OAuth (automatisch)

Wenn Sie die Design-System-Tools zum ersten Mal verwenden:

1. Der Browser öffnet automatisch die Figma-Autorisierungsseite

2. Klicken Sie auf "Zulassen", um zu autorisieren (einmalig)

3. Das Token wird sicher gespeichert und automatisch aktualisiert

4. Funktioniert mit Free-, Pro- und Enterprise-Figma-Tarifen

Local Mode – Personal Access Token (manuell)

1. Besuchen Sie https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens

2. Token mit folgenden Bereichen generieren: Dateiinhalt (Lesen), Dateiversionen (Lesen), Variablen (Lesen), Kommentare (Lesen und Schreiben)

3. Als Umgebungsvariable FIGMA_ACCESS_TOKEN zur MCP-Konfiguration hinzufügen

🛠️ Verfügbare Tools

Status & Diagnose

• figma_get_status – WebSocket-Bridge-Verbindung und Dateikontext prüfen

• figma_diagnose – Für Designer lesbarer Gesundheitscheck + Setup-Anleitung

• figma_reconnect – Verbindung zum Desktop Bridge Plugin erneut herstellen

• figma_navigate – Das aktive Dateiziel zwischen verbundenen Plugins wechseln (Local) oder den Cloud-Headless-Browser navigieren (Remote/Cloud)

Konsolen-Debugging

• figma_get_console_logs – Konsolenprotokolle abrufen

• figma_watch_console – Echtzeit-Log-Streaming

• figma_clear_console – Protokollpuffer löschen

• figma_reload_plugin – Aktuelle Seite neu laden

Visuelles Debugging

• figma_take_screenshot – UI-Screenshots aufnehmen

Design-System-Extraktion

• figma_get_design_system_kit – Komplettes Design-System in einem Aufruf – Tokens, Komponenten, Stile, visuelle Spezifikationen

• figma_get_variables – Design-Tokens/Variablen extrahieren

• figma_get_component – Komponentendaten abrufen (Metadaten oder Rekonstruktionsspezifikation)

• figma_get_component_for_development – Komponente + Bild

• figma_get_component_image – Nur das Bild

• figma_get_styles – Farb-, Text- und Effektstile

• figma_get_file_data – Vollständige Dateistruktur

• figma_get_file_for_plugin – Optimierte Dateidaten

• figma_audit_design_system_report – Bewerteter Gesundheitsaudit für jeden MCP-Client – Bericht mit sechs Kategorien (Benennung, Tokens, Metadaten, Barrierefreiheit, Konsistenz, Abdeckung) mit Behebungsvorschlägen pro Befund ("kann dieses MCP es beheben?"), nach Kategorien aufgeteilte Detailansicht, live-basierte Daten mit offengelegter Quelle, 5-Minuten-Cache

📚 Geteilte Bibliotheksprüfung

• figma_get_library_component_by_key – Jeden Komponentenschlüssel zu vollständigen Eigenschaften + Varianten + visuellen Spezifikationen auflösen – ohne die URL der Quellbibliotheksdatei zu benötigen. Funktioniert sowohl für COMPONENT_SET- als auch für eigenständige COMPONENT-Schlüssel. Adaptive Komprimierung bei >500KB.

• figma_get_library_components – Alle Komponenten in einer Bibliotheksdatei ermitteln (erfordert URL/Schlüssel der Bibliotheksdatei)

• figma_get_library_variables – Alle Variablen aus Team-Bibliotheken auflisten, die die aktuelle Datei abonniert hat. Funktioniert auf jedem Figma-Tarif – verwendet den Plugin-API-Pfad, nicht den Enterprise-only-REST-Endpunkt. Filtern nach libraryName, collectionName oder resolvedType.

• figma_import_library_variable – Eine Bibliotheksvariable in die aktuelle Datei importieren. Gibt eine lokale id zurück, die bereit ist, an figma_set_fills / figma_update_variable / jedes Tool zur Variablenbindung übergeben zu werden.

☁️ Cloud-Relay

• figma_pair_plugin – Einen Kopplungscode generieren, um ein Desktop Bridge Plugin über das Cloud-Relay zu verbinden

✏️ Design-Erstellung (Local Mode + Cloud Mode)

• figma_execute – Leistungsstarkes Tool: Beliebigen Figma-Plugin-API-Code ausführen, um Designs zu erstellen

  • Frames, Formen, Text und Komponenten erstellen

  • Auto-Layout, Stile und Effekte anwenden

  • Vollständige UI-Mockups programmatisch erstellen

  • Optionales fileKey zielt direkt auf eine bestimmte verbundene Datei (nur Local Mode), ohne die aktive Datei oder die Zielsperre zu berühren

• figma_execute_across_files – Nur Local Mode. Dasselbe Skript gleichzeitig in mehreren Desktop-Bridge-verbundenen Dateien ausführen, mit einer Pro-Datei-Ergebniskarte als Rückgabe – für dateiübergreifende Konsistenzprüfungen und Korrekturen in einem Multi-Datei-Design-System, als Ersatz für "Datei öffnen, Plugin ausführen, pro Datei wiederholen"

  • Benennen Sie die Dateien mit fileKeys (von figma_list_open_files) oder übergeben Sie allFiles: true, um jede verbundene Datei zu treffen – eine der beiden Optionen ist erforderlich, sodass ein Skript niemals auf Dateien übergreift, die Sie nicht bearbeiten wollten

  • Pro-Datei-Timeouts und Fehlerisolation: Eine langsame oder fehlschlagende Datei verzögert oder stoppt die anderen nicht

• figma_create_component_set – Ein Komponenten-Set mit Varianten in einem deklarativen Aufruf erstellen

  • Jede Variantenkombination aus einer Achsenmatrix generieren (z. B. { State: ["default", "hover", "disabled"], Size: ["sm", "lg"] } → 6 Varianten) auf Basis einer Basiskomponente oder bestehende Komponenten kombinieren

  • Prop=Value-Variantenbenennung, combineAsVariants im Hintergrund, optionales automatisch angeordnetes beschriftetes Raster

  • Gibt den Schlüssel jeder Variante zurück, bereit für figma_instantiate_component

• figma_arrange_component_set – Varianten in professionelle Komponenten-Sets organisieren

  • Mehrere Komponentenvarianten in ein ordentliches Figma-Komponenten-Set umwandeln

  • Wendet automatisch die native violette gestrichelte Rahmenvisualisierung an

  • Erstellt weißen Container-Frame mit Titel, Zeilenbezeichnungen und Spaltenüberschriften

  • Zeilenbezeichnungen vertikal mittig zu jeder Rasterzeile

  • Spaltenüberschriften horizontal mittig zu jeder Spalte

  • Natürliche Sprache verwenden wie "diese Varianten anordnen" oder "als Komponenten-Set organisieren"

• figma_set_description – Komponenten mit umfangreichen Beschreibungen dokumentieren

  • Beschreibungen zu Komponenten, Komponenten-Sets und Stilen hinzufügen

  • Unterstützt Markdown-Formatierung für eine reichhaltige Dokumentation

  • Beschreibungen erscheinen im Dev Mode für Entwickler

🧩 Figma Slots (Local Mode + Cloud Mode)

• figma_create_slot – Einen Slot zu einer Komponente hinzufügen über die GA-createSlot()-API – die verknüpfte SLOT-Eigenschaft wird automatisch erstellt; funktioniert auf eigenständigen Komponenten und Varianten innerhalb eines Komponenten-Sets

• figma_get_slots – Slots auf einer Komponente, einem Komponenten-Set (über Varianten aggregiert) oder einer Instanz auflisten – IDs, Namen, Eigenschaftsschlüssel, Abmessungen und aktuelle Kinder

• figma_append_to_slot – Den Slot einer Instanz befüllen, indem ein vorhandener Knoten geklont oder neue Inhalte erstellt werden (setProperties lehnt Slot-Werte bewusst ab – dies ist der Befüllungspfad)

• figma_reset_slot – Den Inhalt eines Slots auf einer Instanz löschen

• figma_add_slot_property – Einen vorhandenen Frame nachträglich als Slot ausrüsten, über eine manuelle SLOT-Eigenschaftsbindung, mit description und preferredValues

🔍 Design-Code-Parität (Alle Modi)

• figma_check_design_parity - Vergleicht Figma-Component-Spezifikationen mit der Code-Implementierung und erstellt einen bewerteten Diff-Bericht mit umsetzbaren Korrekturpunkten

• figma_generate_component_doc - Generiert plattformagnostische Markdown-Dokumentation, indem Figma-Designdaten mit code-seitigen Informationen zusammengeführt werden

🔁 Token-Sync (Lokaler Modus + Cloud-Modus)

• figma_export_tokens - Exportiert Figma-Variablen in Design-Token-Dateien in deiner Codebasis. Kanonisches DTCG-JSON (standardmäßig der Legacy-Hex-Dialekt oder DTCG-2025.10-Objektfarben/-abmessungen über dtcgDialect: "2025") plus CSS-, Tailwind-v4/v3-, SCSS-, TS-, JSON-, Style-Dictionary- und Tokens-Studio-Formate. Diff-bewusster Abgleich mit vorhandenen Quelldateien (schreibt nur, was sich geändert hat). Die tokens.config.json-Autodiscovery ermöglicht nach der ersten Einrichtung Aufrufe ohne Argumente. Scopes- und codeSyntax-Metadaten bleiben über $extensions beim Roundtrip erhalten. Ersetzt die Export-Pipeline von Style Dictionary und Tokens Studio für gängige Styling-Methoden.

• figma_import_tokens - Überträgt Code-seitige Token-Änderungen mit einer vollständigen Anwendungsphase zurück an Figma. Vergleicht mit dem aktuellen Figma-Zustand, wendet dann Wertaktualisierungen an, erstellt fehlende Collections/Variablen, wendet Umbenennungen an, schreibt echte Alias-Referenzen (VARIABLE_ALIAS) und löscht – nur unter strategy: "replace" – nur in Figma vorhandene Variablen. Roundtrip-sicher – die Figma-Variablen-IDs bleiben in DTCG $extensions["figma-console-mcp"] erhalten, sodass Umbenennungen auf beiden Seiten keine Duplikate erzeugen. Akzeptiert beide DTCG-Dialekte. Dry-Run-Strategie für sichere Vorschauen. Im Cloud-Modus übergibst du Tokens inline über payload oder files (kein lokaler Dateisystemzugriff).

🧬 Designsystem-Extraktion (nur Lokaler Modus)

Verwandle eine Produktions-Codebasis in ein Designsystem: analysieren → Tokens extrahieren → Gerüst erstellen → Komponenten portieren → verifizieren. Nur im Lokalen Modus – diese Tools lesen und schreiben dein lokales Dateisystem und werden daher nie im Cloud-Modus registriert.

• figma_ds_analyze - Scannt eine oder mehrere Produktions-App-Codebasen – Erkennung von Framework-/Styling-/Vendor-Schicht; eine nach Nutzungshäufigkeit sortierte Komponentenübersicht, klassifiziert als vendored / gewrappt / Pure-Vendor / Eigenentwicklung, mit Prop-Kontrakten, Variantenableitung aus echten Aufrufstellen und Duplikaterkennung; Erfassung von Ikonografie + Typografie; sowie Architekturklassifizierung (atomare Ebenen, Spezialisierungen wie FollowButton → Button, fehlende generische Primitive – die „UI-Kit vs. Designsystem“-Analyse)

• figma_ds_extract_tokens - Extrahiert das Styling der App in DTCG-Tokens. Zuerst die deklarierte Absicht – Multimodus-CSS-Custom-Properties (.dark / [data-theme] und andere Konventionen), SCSS-Variablen, Tailwind-Config-Werte, shadcn-HSL-Tripel – plus Tailwind-Utility-Klassen-Frequenzanalyse, bewertet anhand des eigenen Themes der App, und wiederkehrende Rohwerte, die per Häufigkeit hochgestuft werden. Jedes Token trägt Provenienz (Quelldatei:Zeile, Konfidenz, Häufigkeit) in $extensions; die Ausgabe lässt sich über figma_import_tokens direkt in Figma-Variablen importieren

• figma_ds_scaffold - Generiert das Designsystem-Paket – Paketgerüst, Tokendateien über die gemeinsame Formatierungs-Engine, Showcase-Dokumentationsseiten für Tokens/Typografie/Ikonografie, Framework-Peer-Abhängigkeiten und eine Workflow-README

• figma_ds_setup_storybook - Verdrahtet einen frisch initialisierten Storybook-Workshop mit der Extraktion – ein Preview-Stylesheet mit dem @theme-Mapping der Quell-App, benutzerdefinierten @utility-Definitionen, @layer base und @font-face-Regeln; Kopieren selbst gehosteter Schriftarten; Config-Patches (Tailwind-Vite-Plugin, automatische JSX-Runtime); und eine aus den extrahierten Modi aufgebaute Theme-Symbolleiste

• figma_ds_extract_component - Extrahiert eine Komponente zum Portieren tiefgehend – Quelle, Prop-Kontrakt, beobachtete Aufrufstellen-Varianten, Style-Berührungspunkte und ein anpassungsbereites CSF3-Story-Gerüst

• figma_ds_verify - Deterministische Fidelity-Evaluierungen – DTCG-Parse + Alias-Integrität, Scan auf in Anführungszeichen gesetzte CSS-Ausdrücke, Workshop-var()-Auflösung, Struktur- + Portierungsabdeckung und Figma-Roundtrip-Bereitschaft

• figma_ds_status - Liest oder erfasst den Portierungsfortschritt, der über Sitzungen hinweg erhalten bleibt

🔧 Variablenverwaltung (Lokaler Modus + Cloud-Modus)

• figma_create_variable_collection - Erstellt neue Variablen-Collections mit Modi

• figma_create_variable - Erstellt COLOR-, FLOAT-, STRING- oder BOOLEAN-Variablen

• figma_update_variable - Aktualisiert Variablenwerte in bestimmten Modi

• figma_rename_variable - Benennt Variablen um, während die Werte erhalten bleiben

• figma_delete_variable - Löscht Variablen

• figma_delete_variable_collection - Löscht Collections und alle ihre Variablen

• figma_add_mode - Fügt Collections Modi hinzu (z. B. „Dark", „Mobile")

• figma_rename_mode - Benennt vorhandene Modi um

• figma_batch_create_variables - Erstellt bis zu 100 Variablen in einem einzigen Aufruf (10-50× schneller)

• figma_batch_update_variables - Aktualisiert bis zu 100 Variablenwerte in einem einzigen Aufruf

• figma_setup_design_tokens - Erstellt ein vollständiges Token-System (Collection + Modi + Variablen) atomar – Werte akzeptieren DTCG-Referenzen in geschweiften Klammern ("{color.blue.600}"), die zu echten Variablen-Aliassen aufgelöst werden

📌 FigJam-Board-Tools (Lokaler Modus + Cloud-Modus)

• figjam_create_sticky - Erstellt eine Haftnotiz mit Farboptionen

• figjam_create_stickies - Erstellt stapelweise bis zu 200 Haftnotizen

• figjam_create_connector - Verbindet Knoten mit beschrifteten Verbindungslinien

• figjam_create_shape_with_text - Erstellt Flussdiagrammformen (Raute, Ellipse usw.)

• figjam_create_table - Erstellt Tabellen mit Zelldaten

• figjam_create_code_block - Fügt Codeausschnitte mit Syntaxhervorhebung hinzu

• figjam_auto_arrange - Ordnet Knoten in Raster-, Horizontal- oder Vertikallayouts an

• figjam_get_board_contents - Liest den gesamten Inhalt eines FigJam-Boards

• figjam_get_connections - Liest den Verbindungsgraphen (Flussdiagramme, Beziehungen)

🎞️ Tools für Folienpräsentationen (Lokaler Modus + Cloud-Modus)

• figma_list_slides - Listet alle Folien mit IDs, Positionen und Überspringen-Status auf

• figma_get_slide_content - Ruft den vollständigen Inhaltsbaum einer Folie ab

• figma_get_slide_grid - Ruft das 2D-Rasterlayout der Präsentation ab

• figma_get_slide_transition - Liest die Übergangseinstellungen einer Folie

• figma_get_focused_slide - Ruft die aktuell fokussierte Folie ab

• figma_create_slide - Erstellt eine neue leere Folie

• figma_delete_slide - Löscht eine Folie aus der Präsentation

• figma_duplicate_slide - Dupliziert eine vorhandene Folie

• figma_reorder_slides - Sortiert Folien über ein neues 2D-Rasterlayout neu

• figma_set_slide_transition - Legt Übergangseffekte fest (22 Stile, 8 Kurven)

• figma_skip_slide - Schaltet um, ob eine Folie im Präsentationsmodus übersprungen wird

• figma_add_text_to_slide - Fügt einer Folie Text mit benutzerdefinierten Schriftarten, Farben, Ausrichtung und Zeilenumbruch hinzu

• figma_add_shape_to_slide - Fügt einer Folie Rechteck- oder Ellipsenformen mit Farbe hinzu

• figma_set_slide_background - Legt die Hintergrundfarbe einer Folie fest (erstellt oder aktualisiert sie)

• figma_get_text_styles - Ruft alle lokalen Textstile mit IDs, Schriftarten und Größen ab

• figma_set_slides_view_mode - Schaltet zwischen Raster- und Einzelfolienansicht um

• figma_focus_slide - Navigiert zu einer bestimmten Folie

📖 Ausführliche Tool-Dokumentation

📖 Beispiel-Prompts

Cloud-Modus (Web-KI-Clients)

Connect to my Figma plugin so we can start designing
Pair with my Figma file and create a login form with email, password, and submit button
Set up a brand color token collection with Light and Dark modes

Plugin-Debugging

Navigate to my Figma plugin and show me any console errors
Watch the console for 30 seconds while I test my plugin
Get the last 20 console logs

Designsystem-Extraktion

Get all design variables from https://figma.com/design/abc123
Extract color styles and show me the CSS exports
Get the Button component with a visual reference image
Get the Badge component in reconstruction format for programmatic creation

Designerstellung (Lokaler Modus + Cloud-Modus)

Create a success notification card with a checkmark icon and message
Design a button component with hover and disabled states
Build a navigation bar with logo, menu items, and user avatar
Create a modal dialog with header, content area, and action buttons
Arrange these button variants into a component set
Organize my icon variants as a proper component set with the purple border

Variablenverwaltung (Lokaler Modus + Cloud-Modus)

Create a new color collection called "Brand Colors" with Light and Dark modes
Add a primary color variable with value #3B82F6 for Light and #60A5FA for Dark
Rename the "Default" mode to "Light Theme"
Add a "High Contrast" mode to the existing collection

Design-Code-Parität

Compare the Button component in Figma against our React implementation
Check design parity for the Card component before sign-off
Generate component documentation for the Dialog from our design system

FigJam-Boards

Create a retrospective board with "Went Well", "To Improve", and "Action Items" columns
Build a user flow diagram for the checkout process with decision points
Read this brainstorming board and summarize the key themes
Generate an affinity map from these meeting notes
Create a comparison table of our three platform options

Folienpräsentationen

List all slides and tell me which ones are skipped
Add a new slide with the title "Thank You" in 72px text
Set a DISSOLVE transition on the first slide with 0.5 second duration
Duplicate slide 5 for an A/B comparison
Skip slides 8 and 9 — they're not ready for the client presentation
Reorder my slides so the conclusion comes before Q&A

Visuelles Debugging

Take a screenshot of the current Figma canvas
Navigate to this file and capture what's on screen

📖 Weitere Anwendungsfälle & Beispiele

🎨 KI-gestützte Designerstellung

Erfordert Desktop Bridge: Diese Funktion funktioniert mit dem Lokalen Modus (NPX oder Local Git) und dem Cloud-Modus. Remote-SSE ohne Cloud-Modus-Kopplung ist schreibgeschützt und kann keine Designs erstellen oder ändern.

Eine der leistungsfähigsten Funktionen dieses MCP-Servers ist die Möglichkeit, komplette UI-Komponenten und Seiten direkt in Figma über natürliche Sprachdialoge zu designen – mit jedem MCP-kompatiblen KI-Assistenten wie Claude Desktop oder Claude Code.

Was möglich ist

Originale Designs von Grund auf erstellen:

Design a login card with email and password fields, a "Forgot password?" link,
and a primary Sign In button. Use 32px padding, 16px border radius, and subtle shadow.

Vorhandene Komponentenbibliotheken nutzen:

Build a dashboard header using the Avatar component for the user profile,
Button components for actions, and Badge components for notifications.

Komplette Seitenlayouts generieren:

Create a settings page with a sidebar navigation, a main content area with form fields,
and a sticky footer with Save and Cancel buttons.

So funktioniert's

1. Du beschreibst, was du möchtest, in einfachem Englisch

2. Die KI durchsucht deine Komponentenbibliothek mit figma_search_components, um relevante Bausteine zu finden

3. Komponenten werden instanziiert mit passenden Varianten und Eigenschaften über figma_instantiate_component

4. Benutzerdefinierte Elemente werden erstellt mit der vollständigen Figma-Plugin-API über figma_execute

5. Visuelle Validierung erfasst automatisch Screenshots und iteriert, bis das Design richtig aussieht

Wer profitiert

Beispiel-Workflows

Komplett neues Design:

„Erstelle einen Benachrichtigungs-Toast mit einem Symbol links, Titel- und Beschreibungstext und einem Schließen-Button. Verwende unsere Markenfarben."

Die KI erstellt benutzerdefinierte Frames, wendet deine Design-Tokens an und baut die Komponente von Grund auf.

Komponentenkomposition:

„Baue eine Benutzerprofilkarte mit der Avatar-Komponente (in großer Ausführung), zwei Button-Komponenten (Profil bearbeiten und Einstellungen) und einem Badge für den Status des Benutzers."

Die KI durchsucht deine Bibliothek, findet die genauen Komponenten und setzt sie mit passenden Abständen und Ausrichtung zusammen.

Design-Iteration:

„Der Abstand wirkt zu eng. Vergrößere den Abstand zwischen den Abschnitten auf 24px und mache die Überschrift größer."

Die KI ändert das vorhandene Design, macht einen Screenshot zur Überprüfung und iteriert weiter, bis du zufrieden bist.

Visuelle Validierung

Die KI durchläuft nach der Erstellung von Designs automatisch einen Validierungs-Workflow:

1. Erstellen → Den Designcode ausführen

2. Screenshot → Das Ergebnis erfassen

3. Analysieren → Ausrichtung, Abstände und visuelle Balance prüfen

4. Iterieren → Erkannte Probleme beheben

5. Verifizieren → Finaler Screenshot zur Bestätigung

Dadurch wird sichergestellt, dass Designs nicht nur technisch korrekt sind – sie sehen auch richtig aus.

🎨 Desktop Bridge Plugin (Empfohlene Verbindung)

Das Figma Desktop Bridge-Plugin ist die empfohlene Methode, um Figma mit dem MCP-Server zu verbinden. Es kommuniziert über WebSocket – es sind keine speziellen Figma-Startflags nötig, und die Verbindung bleibt über Figma-Neustarts hinweg bestehen.

Einrichtung

1. Öffne Figma Desktop (normaler Start – keine Debug-Flags nötig)

2. Gehe zu Plugins → Entwicklung → Plugin aus Manifest importieren…

3. Wähle figma-desktop-bridge/manifest.json aus dem figma-console-mcp-Verzeichnis

4. Führe das Plugin in deiner Figma-Datei aus – es verbindet sich automatisch per WebSocket (scannt die Ports 9223–9232)

5. Frage deine KI: „Prüfe den Figma-Status", um die Verbindung zu verifizieren

Einmaliger Import. Nach dem Import bleibt das Plugin in deiner Liste der Entwicklungs-Plugins. Führe es einfach aus, wann immer du den MCP verwenden möchtest.

📖 Desktop Bridge-Dokumentation

Funktionen

Leseoperationen:

• Variablen ohne Enterprise-API

• Zuverlässige Komponentenbeschreibungen (umgeht API-Fehler)

• Unterstützung mehrerer Modi (Light/Dark/Brand-Varianten)

• Echtzeit-Auswahlverfolgung und Überwachung von Dokumentänderungen

Schreiboperationen:

• Design-Erstellung – Frames, Formen, Text, Komponenten über figma_execute erstellen

• Variablenverwaltung – Vollständige CRUD-Operationen für Variablen und Sammlungen

• Modus-Verwaltung – Modi für Multi-Theme-Unterstützung hinzufügen und umbenennen

So funktioniert der Transport

• Der MCP-Server kommuniziert über WebSocket durch das Desktop-Bridge-Plugin

• Der Server versucht zuerst Port 9223 und fällt dann automatisch auf die Ports 9224–9232 zurück, falls nötig

• Das Plugin scannt alle Ports im Bereich und verbindet sich mit jedem aktiven Server, den es findet

• Alle 121 Tools funktionieren über den WebSocket-Transport

Mehrere Dateien: Der WebSocket-Server unterstützt mehrere gleichzeitige Plugin-Verbindungen – eine pro geöffneter Figma-Datei. Jede Verbindung wird über den Dateischlüssel mit unabhängigem Zustand (Auswahl, Dokumentänderungen, Konsolenprotokolle) verfolgt.

Umgebungsvariablen:

• FIGMA_WS_PORT – Bevorzugten WebSocket-Port überschreiben (Standard: 9223). Der Server fällt über einen 10-Port-Bereich ab diesem Wert zurück, wenn der bevorzugte Port belegt ist.

• FIGMA_WS_HOST – Bind-Adresse des WebSocket-Servers überschreiben (Standard: localhost). Setzen Sie dies auf 0.0.0.0, wenn Sie in Docker ausgeführt werden, damit der Host-Computer den MCP-Server erreichen kann.

Cloud-Modus: Das Plugin unterstützt auch einen Cloud-Modus-Umschalter für die Kopplung mit Web-KI-Clients (Claude.ai, v0, Replit, Lovable). Schalten Sie „Cloud-Modus" in der Plugin-Oberfläche um, geben Sie den 6-stelligen Kopplungscode von Ihrem KI-Assistenten ein und klicken Sie auf Verbinden. Details finden Sie unter Cloud-Modus.

Plugin-Einschränkung: Im lokalen Modus funktioniert es mit NPX oder lokalem Git. Im Cloud-Modus wird es mit dem entfernten MCP-Endpunkt gekoppelt. Remote-SSE ohne Cloud-Modus-Kopplung ist schreibgeschützt.

🔀 Multi-Instanz-Unterstützung (v1.10.0)

Figma Console MCP unterstützt jetzt mehrere gleichzeitige Instanzen – ideal für Designer und Entwickler, die an mehreren Projekten arbeiten oder gleichzeitig die Chat- und Code-Tabs von Claude Desktop verwenden.

Das Problem (vor v1.10.0)

Wenn zwei Prozesse versuchten, den MCP-Server zu starten (z. B. Chat-Tab und Code-Tab von Claude Desktop), stürzte der zweite mit EADDRINUSE ab, weil beide um Port 9223 konkurrierten.

So funktioniert es jetzt

• Der Server versucht zuerst Port 9223 (den Standard)

• Wenn dieser Port bereits belegt ist, versucht er automatisch 9224, dann 9225 und so weiter bis 9232

• Das Desktop-Bridge-Plugin in Figma verbindet sich gleichzeitig mit allen aktiven Servern

• Jede Serverinstanz empfängt Echtzeit-Ereignisse (Auswahländerungen, Dokumentänderungen, Konsolenprotokolle)

• figma_get_status zeigt, auf welchem Port Sie sich befinden, und listet andere aktive Instanzen auf

Was das für Sie bedeutet

Muss ich etwas tun?

Nichts. Die Multi-Instanz-Unterstützung ist vollautomatisch:

• Jeder MCP-Server beansprucht den nächsten verfügbaren Port im Bereich

• Das Desktop-Bridge-Plugin scannt alle Ports und verbindet sich mit jedem aktiven Server

• Verwaiste Prozesse aus geschlossenen Tabs werden beim Start automatisch bereinigt

• Keine manuelle Portverwaltung – das Plugin scannt bereits den gesamten Bereich

(Ein erneuter Import des Manifests ist nur erforderlich, wenn sich der Plugin-Code selbst ändert – z. B. nach einem Paket-Update. Die Portbereichs-Scanning ist bereits im ausgelieferten Plugin enthalten.)

🧩 MCP-Apps (Experimentell)

Figma Console MCP enthält Unterstützung für MCP-Apps – umfangreiche interaktive UI-Erlebnisse, die direkt in jedem MCP-Client gerendert werden, der die MCP-Apps-Protokollerweiterung unterstützt. Erstellt mit dem offiziellen @modelcontextprotocol/ext-apps SDK.

Was sind MCP-Apps? Traditionelle MCP-Tools geben Text oder Bilder an die KI zurück. MCP-Apps gehen weiter – sie rendern interaktive HTML-Oberflächen direkt im Chat, sodass Benutzer Daten durchsuchen, filtern und direkt damit interagieren können, ohne KI-Kontext zu verbrauchen.

Token-Browser

Ein interaktiver Design-Token-Explorer.

Verwendung: Bitten Sie Claude, „die Design-Tokens zu durchsuchen" oder „mir die Design-Tokens zu zeigen", während Sie mit einer Figma-Datei verbunden sind.

Funktionen:

• Alle Tokens nach Sammlung organisiert mit aufklappbaren Abschnitten durchsuchen

• Nach Typ filtern (Farben, Zahlen, Zeichenfolgen) und nach Name/Beschreibung suchen

• Spalten für Modi pro Sammlung (Hell, Dunkel, Benutzerdefiniert) entsprechend dem Variablen-Panel von Figma

• Farbfelder, Alias-Auflösung und Klicken-zum-Kopieren bei jedem Wert

• Funktioniert ohne Enterprise-Plan über Desktop Bridge (lokaler Modus)

Design-System-Dashboard

Eine Lighthouse-ähnliche Gesundheits-Scorecard, die Ihr Designsystem in sechs Kategorien prüft.

Verwendung: Bitten Sie Claude, „das Designsystem zu prüfen" oder „mir die Designsystem-Gesundheit zu zeigen", während Sie mit einer Figma-Datei verbunden sind.

Funktionen:

• Gesamtgewichtete Punktzahl (0–100) mit sechs Kategorie-Anzeigen: Benennung, Tokens, Komponenten, Barrierefreiheit, Konsistenz, Abdeckung

• Aufklappbare Kategorieabschnitte mit einzelnen Befunden, Schweregrad-Indikatoren und umsetzbaren Details

• Diagnoseorte, die Befunde mit bestimmten Variablen, Komponenten oder Sammlungen verknüpfen

• Tooltips, die den Zweck und die Bewertungskriterien jeder Prüfung erklären

• Aktualisieren-Schaltfläche, um die Prüfung ohne KI-Kontext erneut auszuführen

• Reine Bewertungs-Engine ohne externe Abhängigkeiten – alle Analysen laufen lokal

Keine MCP-Apps-Unterstützung? Gleiche Prüfung, einfaches Tool: figma_audit_design_system_report führt dieselbe Bewertungs-Engine aus und gibt den Bericht als Daten zurück – standardmäßig eine Zusammenfassung, Drilldown pro Kategorie über category, vollständiges JSON über format: "full" – mit einem Sanierungsabschnitt, der angibt, welche Befunde dieses MCP beheben kann (design), welche zuerst eine Designentscheidung erfordern (design-assisted) und welche manuelle Designarbeit benötigen (manual). Funktioniert in jedem MCP-Client ohne ENABLE_MCP_APPS-Flag; Ergebnisse werden 5 Minuten lang zwischengespeichert (forceRefresh zum erneuten Crawlen).

Aktivieren von MCP-Apps:

MCP-Apps sind in den obigen Setup-Konfigurationen standardmäßig aktiviert (über "ENABLE_MCP_APPS": "true"). Wenn Sie vor v1.10.0 eingerichtet haben und dies nicht in Ihrer Konfiguration haben, fügen Sie es zu Ihrem env-Abschnitt hinzu:

"env": {
  "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
  "ENABLE_MCP_APPS": "true"
}

Hinweis: MCP-Apps erfordern einen MCP-Client mit ext-apps-Protokoll-Unterstützung (z. B. Claude Desktop). Diese Funktion ist experimentell und das Protokoll kann sich weiterentwickeln.

Zukünftige MCP-Apps-Roadmap

Geplante MCP-Apps:

• Komponenten-Galerie – Visueller Browser zum Suchen und Vorschauen von Komponenten mit Varianten-Exploration

• Stil-Inspektor – Interaktives Panel zum Erkunden von Farb-, Text- und Effektstilen mit Live-Vorschauen

• Variablen-Diff-Viewer – Seitenvergleich von Tokenwerten über Modi und Zweige hinweg

Die Architektur unterstützt das Hinzufügen neuer Apps mit minimalem Boilerplate – jede App ist ein eigenständiges Modul mit eigener serverseitiger Tool-Registrierung und clientseitiger UI.

🚀 Erweiterte Themen

• Setup-Anleitung – Vollständige Setup-Anleitung für alle MCP-Clients

• Self-Hosting – Eigene Instanz auf Cloudflare bereitstellen

• Architektur – Wie es unter der Haube funktioniert

• OAuth-Setup – OAuth für Self-Hosted-Bereitstellungen konfigurieren

• Fehlerbehebung – Häufige Probleme und Lösungen

🤝 vs. Figma Offizielles MCP

Figma Console MCP (Dieses Projekt) – Debugging, Datenextraktion und Design-Erstellung

• ✅ Echtzeit-Konsolenprotokolle von Figma-Plugins

• ✅ Screenshot-Erfassung und visuelles Debugging

• ✅ Fehler-Stack-Traces und Laufzeitüberwachung

• ✅ Rohe Design-Datenextraktion (JSON)

• ✅ FigJam-Board-Erstellung und -Lesen (Haftnotizen, Flussdiagramme, Tabellen)

• ✅ Funktioniert remote oder lokal

Figma Offizielles Dev-Mode-MCP – Codegenerierung

• ✅ Generiert React/HTML-Code aus Designs

• ✅ Tailwind/CSS-Klassengenerierung

• ✅ Komponenten-Boilerplate-Gerüst

Verwenden Sie beide zusammen für den vollständigen Workflow: Generieren Sie Code mit dem offiziellen MCP und debuggen und extrahieren Sie Daten mit Console MCP.

🛤️ Roadmap

Aktueller Status: v1.40.0 (Stable) – Produktionsreif. Neuestes: Extraktion von Designsystemen aus Produktionscodebasen – sieben Local-Mode-figma_ds_*-Werkzeuge, die eine oder mehrere Apps scannen (Framework-/Styling-/Vendor-Erkennung, nach Nutzungshäufigkeit sortierte Komponenteninventur, klassifiziert als vendored/wrapped/pure-vendor/bespoke, Varianteninferenz aus echten Aufrufstellen, Duplikaterkennung und ein Architektur-Durchlauf, der UI-Kit-Spezialisierungen von den fehlenden generischen Primitiven trennt), das tatsächlich verwendete Styling in DTCG-Tokens mit Provenienz pro Token überführen (Multi-Mode-CSS-Custom-Properties, SCSS, Tailwind-Konfiguration, shadcn-HSL-Tripel, Utility-Class-Häufigkeits-Mining, gewichtet anhand des eigenen Themes der App), das Designsystem-Paket mit Showcase-Dokumentationsseiten aufsetzen, einen frischen Storybook-Workshop an die echten Theme-Ebenen und Schriften der App anbinden, Komponenten für die Portierung mit CSF3-Story-Gerüsten tiefenextrahieren, mit deterministischen Fidelity-Evals verifizieren und den Portierungsfortschritt über Sitzungen hinweg speichern – die extrahierten Tokens lassen sich direkt über figma_import_tokens in Figma-Variablen importieren. Aufbauend auf dem Fix von v1.39.1 für ein Plugin-Update-Banner, das nie geschlossen werden konnte – eine ältere Serverinstanz drängte ein neueres Plugin zu einem Re-Import, wobei letztlich nur dieselbe oder eine neuere Version installiert wird. Aufbauend auf v1.39.0s Multi-File-Ausführung – figma_execute_across_files führt ein Skript gleichzeitig gegen mehrere über Desktop Bridge verbundene Dateien aus (vier Dateien × 2 s Arbeit in ~3 s statt ~8 s), und figma_execute akzeptiert einen optionalen fileKey, um eine einzelne Datei anzusprechen, ohne die aktive Datei zu wechseln oder die Zielsperre freizugeben; die Zielauswahl muss explizit sein (fileKeys oder allFiles: true), sodass nichts auf Dateien ausgeweitet wird, die Sie nicht benannt haben. Aus Community-PR #107 von @Wolfr. Wird mit einem Relay-Fix ausgeliefert: handleResult() in der ui.html des Plugins baute jede Antwort Feld für Feld neu auf und verwarf dabei resultAnalysis und fileContext stillschweigend, sodass die resultAnalysis.warning-Prüfung, die figma_execute’s eigene Beschreibung den Aufrufern aufträgt, nie möglich war (importieren Sie manifest.json für diese beiden Felder neu; alles andere funktioniert auch ohne). Aufbauend auf v1.38.2s Fix für Verbindungsstabilität – der eigene Orphan-Reaper des Servers beendete gesunde MCP-Server, weil sein Liveness-Probe eine IPv4-Literaladresse verwendete, während der Server an den IPv6-Loopback gebunden ist, was jedes Kill-Safety-Gate zu einer reinen Formalität machte; dies war die Ursache für wiederkehrende „Server disconnected“-Fehler. Daneben der Fix von v1.38.1 für die Variablenwerkzeuge der freigegebenen Bibliotheken, die seit v1.29.0 stillschweigend null Sammlungen meldeten und fehlgeschlagene Importe als Erfolge ausgaben. Aufbauend auf v1.38.0s fortlaufenden Komponenten-Changelogs in generierten Docs – figma_generate_component_doc akzeptiert einen optionalen history-Parameter, der pro Komponente die Design-Historie aus der Figma-Versionshistorie zieht (jede Version wird per Diff verglichen und auf diese Komponente eingegrenzt, sodass Umbenennungen, hinzugefügte Eigenschaften und Token-Bindungen als Zeilen erscheinen) sowie die Code-Historie aus git log für die Quelldateien der Komponente, dargestellt als ## History-Abschnitt mit Tabellen für Design, Code und Release-Notizen. Bevorzugt benannte Versionen, fällt auf Auto-Speicherungen zurück, wenn eine Datei keine hat, und ist standardmäßig deaktiviert, sodass bestehende Aufrufe unverändert bleiben (nur Server, kein Plugin-Re-Import). Aufbauend auf v1.37.x’ Design-System-Gesundheitsaudit für jeden Client – figma_audit_design_system_report führt die deterministische Bewertungs-Engine des Dashboards mit sechs Kategorien aus und gibt den Bericht als Daten zurück, mit Abhilfe je Befund, Live-first-per-fileKey-verifizierten Daten (Quelle offengelegt), kategorienweiser Drill-down-Aufschlüsselung und einem 5-Minuten-Cache (nur Server, kein Plugin-Re-Import). Aufbauend auf v1.36.0s Ziel-Lock für parallele Multi-File-Arbeit — — figma_navigate akzeptiert ein lock: true-Flag, das die aktive Datei fixiert, sodass ein KI-Agent in einer Datei arbeiten kann, während Sie in einer anderen arbeiten, ohne dass Befehle zur falschen Datei geleitet werden. Aufbauend auf v1.35.0s Schreibunterstützung für Figma Slots – erstellen, inspizieren, befüllen und zurücksetzen von Slots (GA auf der Config 2026) über 5 neue Werkzeuge (figma_create_slot, figma_get_slots, figma_append_to_slot, figma_reset_slot, figma_add_slot_property), live validiert gegen die GA-Plugin-API und basierend auf Community-PR #77. Aufbauend auf v1.34.0s Bidirectional Token Sync v2 + DTCG 2025.10 – figma_import_tokens wendet den vollständigen Diff-Plan an (erstellt fehlende Collections/Variablen, wendet Umbenennungen an, schreibt echte VARIABLE_ALIAS-Referenzen und löscht nur unter explizitem replace), figma_export_tokens spricht auf Wunsch den DTCG-2025.10-Dialekt (Legacy-Standard byte-identisch), Variable Scopes/codeSyntax werden über $extensions hin- und zurückgeführt, figma_setup_design_tokens akzeptiert Alias-Werte über DTCG-Klammerreferenzen, und figma_create_component_set baut in einem Aufruf ein vollständiges Varianten-Set aus einer Achsen-Matrix. Aufbauend auf der v1.33.x-Reihe: Version-Handshake-Fix (Re-Import-Banner erscheint nur, wenn sich Plugin-Dateien tatsächlich geändert haben), Security-Dependency-Sweep und die v1.33.0-Connection-UX-Überarbeitung (ehrliche Status-Pill, die aus dem Live-Verbindungsstatus abgeleitet wird, /health-Auto-Discovery mit selbstheilender Wiederverbindung) + ein 33-Fixes umfassendes Full-Codebase-Audit (verlustfreie DTCG-Multi-Mode-Round-Trips, Cross-Collection-Alias-Auflösung, Branch-URL-Korrektheit über REST-Werkzeuge, Cache-Poisoning- und CSWSH-Fixes, Bridge-first-Screenshots). Basiert auf WCAG-genauem Barrierefreiheits-Auditing (Zeilenhöhe unter 1.5× wird nicht mehr fälschlich als Fehler gemeldet; Lesbarkeitshinweise sind von Konformitätsprüfungen entkoppelt und auf mehrzeiligen Text beschränkt; code-seitige WCAG-1.4.12-Prüfung), einer selbstheilenden Desktop-Bridge-Verbindung (Zombie-Prozess-Reaper + Auto-Reconnect-Watchdog – behebt den wiederkehrenden „not connected until restart“-Fehler), nativer Variablenbindung für Füllungen/Konturen + Typografie-Steuerung in den Schreibwerkzeugen, Inspektion freigegebener Bibliotheken (schlüsselbasierte Komponentenauflösung + Lesen/Import von Bibliotheksvariablen ohne Enterprise-Plan), 10-Format-Token-Export-Pipeline (DTCG, CSS, Tailwind v4, Tailwind v3, SCSS, TS module, JSON flach/verschachtelt, Style Dictionary v3, Tokens Studio), bidirektionalem Figma↔Code-Token-Sync, Versionshistorie- & Zeitreihen-Bewusstsein, FigJam- + Slides-Unterstützung, Cloud Write Relay, Design System Kit, reiner WebSocket-Konnektivität, intelligentem Multi-File-Tracking, 121 Tools (Local) / 101 Tools (Cloud) / 9 Tools (Remote, schreibgeschützt), Comments API, Cross-MCP-Identitätsdisambiguierung und MCP Apps.

Letzte Releases:

• [

Als Nächstes:

• Token-Synchronisierung — Parser für Nicht-DTCG-Eingaben - Parser für Nicht-DTCG-Eingaben (Tokens Studio, CSS-Variablen, Tailwind v4, Tailwind-v3-Konfiguration, SCSS, Style Dictionary v3, JSON flach/verschachtelt), damit figma_import_tokens dieselben Formate aufnehmen kann, die es exportiert. (Die importseitige Apply-Erweiterung — Erstellungen, durch „replace“ gesteuerte Löschungen, Alias-Ziel-Aktualisierungen — wurde in v1.34.0 veröffentlicht.)

• Bibliotheksübergreifende Variablenauflösung - Bibliotheksübergreifende Aliase über getVariableByIdAsync auflösen, sodass sie in Exporten als echte var(--target)-Referenzen anstelle von Kommentaren dargestellt werden.

• Komponenten-Vorlagenbibliothek - Generierung gängiger UI-Muster

• Visuelle Regressionstests - Screenshot-Diff-Funktionen

📖 Vollständige Roadmap

💻 Entwicklung

git clone https://github.com/southleft/figma-console-mcp.git
cd figma-console-mcp
npm install

# Local mode development
npm run dev:local

# Cloud mode development
npm run dev

# Build
npm run build

📖 Entwicklungsleitfaden

📄 Lizenz

MIT - Siehe Datei LICENSE für Details.

🔗 Links

• 📚 Dokumentationsseite — Vollständige Anleitungen, Tutorials und API-Referenz

• 📖 Lokale Dokumentation — Quelldateien der Dokumentation

• 🐛 Probleme melden

• 💬 Diskussionen

• 🌐 Model Context Protocol

• 🎨 Figma API