Figma Context MCP — Anwendungsfälle, Installieren & Live-Demo

Warum nutzen

Hauptfunktionen

Gibt Figma-Daten in Token-effizienter YAML/JSON-Form zurück, nicht als rohe API-Masse
Bearbeitet Komponenteninstanzen und ihre Überschreibungen
Macht Design-Token (Farben, Textstile, Abstände) nach Name zugänglich
Bildexport ausgewählter Knoten zur visuellen Referenz
Nur Lesen — schreibt niemals in Ihre Figma-Datei zurück

Live-Demo

In der Praxis

figma.replay ▶ bereit

0/0

Installieren

Wählen Sie Ihren Client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "figma",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  ]
}

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json

{
  "context_servers": {
    "figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "figma-developer-mcp"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

claude mcp add figma -- npx -y figma-developer-mcp

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: Figma Context

React/SwiftUI/Tailwind-Code aus einem Figma-Frame generieren

👤 Frontend-Entwickler, die einen gestalteten Screen implementieren ⏱ ~30 min intermediate

Wann einsetzen: Sie haben einen Figma-Frame für einen Screen oder eine Komponente und möchten die ersten 80 % des Codes zuverlässig generiert.

Voraussetzungen

Figma-Personal-Access-Token — figma.com → Einstellungen → Personal access tokens; Umfang auf file_read setzen
Figma-Datei-URL — URL aus der Figma-Datei kopieren; das MCP kann Dateischlüssel und Knoten-ID extrahieren

Ablauf

Die Frame-Daten abrufen

Rufen Sie den Figma-Knoten unter <paste figma URL with node-id> ab. Geben Sie sein Layout, Textinhalt, Farben und Kindstruktur zurück.✓ Kopiert

→ Hierarchische Knotendaten mit echten Werten — nicht 'unable to fetch'
Code auf Basis der Daten generieren

Generieren Sie eine React + Tailwind-Komponente, die genau damit übereinstimmt. Verwenden Sie die tatsächlichen Hex-Farben und Pixelwerte aus den Figma-Daten, nicht Näherungen.✓ Kopiert

→ Code, der echte Werte referenziert, z. B. bg-[#1A2B3C] nicht bg-blue-500
Mit einem Export überprüfen

Exportieren Sie denselben Frame als PNG. Vergleichen Sie mit der erwarteten Darstellung Ihrer generierten Komponente und nennen Sie alle Unterschiede.✓ Kopiert

→ Spezifische Unterschiede (fehlende Symbole, falsches Padding) statt 'sieht ähnlich aus'

Ergebnis: Ein pixelgetreuer erster Entwurf, den Sie verfeinern statt neu erstellen können.

Fallstricke

Auto-Layout vs. absolutes Positioning wird unterschiedlich auf flex/grid abgebildet — Sagen Sie Claude, dass es Flexbox bevorzugen soll, wenn der Figma-Frame Auto-Layout verwendet; absolut, wenn nicht
Vektor-Symbole kommen als SVG-Pfade zurück, die Claude wortwörtlich inline setzt — Lassen Sie Claude Symbole separat in /icons/*.svg extrahieren und als Komponenten referenzieren

Kombinieren mit: filesystem · github

Figma-Design-Token in Ihre Codebasis synchronisieren

👤 Verwalter von Design-Systemen ⏱ ~20 min intermediate

Wann einsetzen: Designer haben Palette oder Typografie in Figma aktualisiert und Sie müssen das Token-JSON aktualisieren.

Ablauf

Die veröffentlichten Stile abrufen

Aus Figma-Datei <key> alle veröffentlichten Farbstile, Textstile und Effektstile auflisten. Nach Kategorie gruppieren.✓ Kopiert

→ Vollständige Token-Liste mit Namen und Werten
Diff gegen die Codebasis

Lesen Sie /design-tokens/tokens.json. Zeigen Sie mir, welche Token in Figma seit der letzten Synchronisierung dieser Datei geändert wurden (hinzugefügt, entfernt, Wert geändert).✓ Kopiert

→ Pro-Token-Diff mit alt/neu
Anwenden und PR öffnen

Aktualisieren Sie tokens.json, um Figma zu entsprechen. Öffnen Sie einen PR mit dem Titel 'sync: design tokens YYYY-MM-DD' mit dem Diff in der Beschreibung.✓ Kopiert

→ PR mit überprüfbarem Diff geöffnet

Ergebnis: Code-seitige Token bleiben synchron mit Figma; keine mehr 'warum ist die Brand-Farbe leicht versetzt' Tickets.

Fallstricke

Umbenannte Token sehen wie Löschen + Hinzufügen aus — Lassen Sie Claude Umbenennungen heuristisch erkennen (gleicher Wert, ähnlicher Name) und markieren Sie diese zur menschlichen Überprüfung

Kombinieren mit: filesystem · github

Entwickler-Spezifikationen (Abstände, Größen, Text) aus einer Figma-Datei extrahieren

👤 Ingenieure, die ein Figma-Handoff ohne Dev Mode triagieren ⏱ ~15 min beginner

Wann einsetzen: Sie haben Figma Dev Mode nicht, benötigen aber Pixelspezifikationen für einen Screen.

Ablauf

Den Screen abrufen

Für Figma-Knoten <id> geben Sie mir eine flache Liste aller Blatt-Elemente mit ihrer absoluten Position, Größe und Textinhalt.✓ Kopiert

→ Tabellarischer Ausdruck von Elementen mit x/y/w/h
Ein Spec-Dokument anfordern

Wandeln Sie das in eine entwicklerfreundliche Spezifikation um: Abschnitt für Abschnitt, mit Abstandswerten (Rand/Innenabstand) von Positionen abgeleitet.✓ Kopiert

→ Spec-Dokument mit konkreten CSS-äquivalenten Werten
Randfälle überprüfen

Was passiert, wenn ein Text die entworfene Breite überschreitet? Gibt das Design Umbruchverhalten, Kürzung oder Wachstum an? Falls nicht angegeben, markieren Sie es für den Designer.✓ Kopiert

→ Liste offener Fragen, nicht stille Annahmen

Ergebnis: Eine baubare Spezifikation, ohne Dev Mode Sitzplätze für alle zu kaufen.

Fallstricke

Designer verwendete beliebige Abstände (13px, 17px) statt Token-Werte — Bitten Sie Claude, auf den nächsten Token-Wert zu runden, aber protokollieren Sie die Abweichung, damit Designer aufräumen können

Kombinieren mit: filesystem

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

figma + filesystem

Code aus Figma generieren und direkt in Ihre Komponentendatei schreiben

Rufen Sie Figma-Knoten <id> ab. Generieren Sie eine React-Komponente, die genau damit übereinstimmt, schreiben Sie sie mit Filesystem MCP in src/components/Card.tsx.✓ Kopiert

figma + github

Öffnen Sie einen PR mit der neuen Komponente und einem Figma-Link in der Beschreibung für Reviewer

Generieren Sie die Card-Komponente aus Figma <url>, committen, pushen und öffnen Sie einen PR mit sowohl der Codeänderung als auch dem Quell-Figma-Link.✓ Kopiert

figma + chrome-devtools

Erstellen, im Browser rendern, Screenshot machen und visuell mit dem Figma-Export vergleichen

Erstellen Sie die neue Komponente. Rendern Sie sie unter localhost:3000/preview/card. Machen Sie einen Screenshot. Vergleichen Sie visuell mit dem Figma-PNG-Export und listen Sie alle visuellen Unterschiede auf.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

Werkzeug	Eingaben	Wann aufrufen	Kosten
get_figma_data	fileKey: str, nodeId?: str, depth?: int	Rufen Sie einen Frame oder die gesamte Datei in Agent-freundlicher Form ab	1 Figma API-Aufruf (kostenlose Stufe: 1500/Minute)
download_figma_images	fileKey: str, nodes: [{nodeId, fileName}], localPath: str, format?: 'png'\|'svg', scale?: number	Designelemente (Symbole, Illustrationen, Screenshots) lokal exportieren	1 Figma-Render-Aufruf pro Knoten

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: Figma kostenloser Plan: 1.500 Anfragen/Minute. Ausreichend für interaktive Nutzung.
Tokens pro Aufruf: Der Kompaktmodus hält Payloads auf ~1-5k Token pro Frame. Vollständige Dateien können anschwellen — beschränken Sie auf nodeId.
Kosten in €: MCP ist kostenlos. Figma API-Zugriff ist kostenlos mit jedem Figma-Konto.
Tipp: Übergeben Sie immer ein nodeId, wenn Sie können — das Abrufen einer ganzen Datei ist verschwendete Ressourcen.

Sicherheit

Rechte, Secrets, Reichweite

Minimale Scopes: file_read

Credential-Speicherung: Personal Access Token in Umgebungsvariable FIGMA_API_KEY. Niemals committen.

Datenabfluss: All calls to api.figma.com

Niemals gewähren: file_write — das MCP braucht es nicht; die Verwendung eines schreibfähigen Token risikiert versehentliche Änderungen

Personal Access Token sind leistungsstark — verwenden Sie ein Token mit Leseberechtigung und rotieren Sie es regelmäßig.
Figma-Dateiinhalte (Ihre Designs) werden als Kontext an Ihren LLM-Anbieter gesendet. Wenn die Datei sensibel ist, bevorzugen Sie knotenbegrenzte Abrufe gegenüber vollständigen Datei-Abrufen.

Fehlerbehebung

Häufige Fehler und Lösungen

403 Forbidden

Token hat keinen Zugriff auf diese Datei. Überprüfen Sie, ob sich die Datei in einem Team oder Workspace befindet, den Ihr Token sehen kann. Verwenden Sie für freigegebene Community-Dateien ein anderes Token.

Prüfen: curl -H 'X-Figma-Token: $FIGMA_API_KEY' https://api.figma.com/v1/me

Could not extract file key from URL

Verwenden Sie das Format https://www.figma.com/file/<KEY>/... oder https://www.figma.com/design/<KEY>/.... Übergeben Sie fileKey explizit, wenn die URL-Analyse fehlschlägt.

Response is enormous and blows context

Übergeben Sie nodeId, um auf einen Frame zu beschränken, oder depth: 2, um die Traversierung zu begrenzen.

Image export fails with 'unsupported node type'

Einige Knotentypen (Abschnitte, Slices) können nicht exportiert werden. Wählen Sie stattdessen einen tatsächlichen Frame oder eine Komponente.

Alternativen

Figma Context vs. andere

Alternative	Wann stattdessen	Kompromiss
Figma official Dev Mode MCP (beta)	Sie haben Figma Dev Mode und möchten die offizielle Integration	Neuere Integration, erfordert Dev Mode-Abonnement; tiefere Figma-Funktionsunterstützung im Laufe der Zeit
Figma REST API directly via shell	Sie möchten die vollständige API-Oberfläche (Variablen, Branches, Kommentare)	Rohe API-Antworten sind riesig und schwer für ein LLM zu verarbeiten

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen