Figma MCP-Server

Ein ModelContextProtocol -Server, der KI-Assistenten die Interaktion mit Figma-Dateien ermöglicht. Dieser Server bietet Tools zum Anzeigen, Kommentieren und Analysieren von Figma-Designs direkt über das ModelContextProtocol.

Merkmale

• Fügen Sie Ihrem Chat mit Claude eine Figma-Datei hinzu, indem Sie die URL angeben

• Lesen und posten Sie Kommentare zu Figma-Dateien

Related MCP server: Figma MCP Server

Setup mit Claude

1. Laden Sie die Claude-Desktop-App von claude.ai/download herunter und installieren Sie sie

2. Holen Sie sich einen Figma-API-Schlüssel (figma.com -> klicken Sie oben links auf Ihren Namen -> Einstellungen -> Sicherheit). Gewähren Sie File content und Comments .

3. Konfigurieren Sie Claude für die Verwendung des Figma MCP-Servers. Wenn dies Ihr erster MCP-Server ist, führen Sie Folgendes im Terminal aus.

echo '{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": ["figma-mcp"],
      "env": {
        "FIGMA_API_KEY": "<YOUR_API_KEY>"
      }
    }
  }
}' > ~/Library/Application\ Support/Claude/claude_desktop_config.json

Wenn nicht, kopieren Sie den figma-mcp -Block in Ihre claude_desktop_config.json

3. Starten Sie Claude Desktop neu.

4. Suchen Sie in Claudes Benutzeroberfläche nach dem Hammersymbol mit der Anzahl der verfügbaren Tools, um zu bestätigen, dass der Server läuft.

Beispielverwendung

Starten Sie einen neuen Chat mit Claude Desktop und fügen Sie Folgendes ein

What's in this figma file?

https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC

Demo einer realistischeren Nutzung

https://www.loom.com/share/0e759622e05e4ab1819325bcf6128945?sid=bcf6125b-b5de-4098-bf81-baff157e3dc3

Entwicklungs-Setup

Ausführen mit Inspector

Für Entwicklungs- und Debugging-Zwecke steht Ihnen das Tool MCP Inspector zur Verfügung. Der Inspector bietet eine visuelle Oberfläche zum Testen und Überwachen von MCP-Serverinteraktionen.

Ausführliche Einrichtungsanweisungen und Nutzungsrichtlinien finden Sie in der Inspector-Dokumentation .

Der Befehl zum lokalen Testen mit Inspector lautet

npx @modelcontextprotocol/inspector npx figma-mcp

Lokale Entwicklung

1. Klonen Sie das Repository

2. Installieren Sie Abhängigkeiten:

npm install

3. Erstellen Sie das Projekt:

npm run build

4. Für die Entwicklung mit automatischem Wiederaufbau:

npm run watch

Verfügbare Tools

Der Server stellt die folgenden Tools bereit:

• add_figma_file : Fügen Sie Ihrem Kontext eine Figma-Datei hinzu, indem Sie deren URL angeben

• view_node : Holen Sie sich eine Miniaturansicht für einen bestimmten Knoten in einer Figma-Datei

• read_comments : Alle Kommentare zu einer Figma-Datei abrufen

• post_comment : Posten Sie einen Kommentar zu einem Knoten in einer Figma-Datei

• reply_to_comment : Auf einen vorhandenen Kommentar in einer Figma-Datei antworten

Jedes Tool ist darauf ausgelegt, spezifische Funktionen für die Interaktion mit Figma-Dateien über die ModelContextProtocol-Schnittstelle bereitzustellen.