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: mcp-figma

Setup mit Claude

Laden Sie die Claude-Desktop-App von claude.ai/download herunter und installieren Sie sie
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 .
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

Starten Sie Claude Desktop neu.
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

Klonen Sie das Repository
Installieren Sie Abhängigkeiten:

npm install

Erstellen Sie das Projekt:

npm run build

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.