Skip to main content
Glama
Sign In
deenesjakoruzh

Figma MCP Server

by MatthewDailey
npmGitHub
TypeScript
1,816
151
  • Apple
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

Integrations

  • Enables AI assistants to interact with Figma files, providing tools for viewing file content, reading and posting comments, replying to comments, and viewing specific nodes in Figma designs.

  • Mentioned in a demo link, suggesting integration for sharing visual demonstrations of the MCP server's functionality with Figma files.

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

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

  1. Starten Sie Claude Desktop neu.
  2. 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
  1. Erstellen Sie das Projekt:
npm run build
  1. 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.

You must be authenticated.

A
security – no known vulnerabilities
F
license - not found
A
quality - confirmed to work

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Tools

Ermöglicht KI-Assistenten die Interaktion mit Figma-Dateien über das ModelContextProtocol, sodass Figma-Designs direkt in Chat-Schnittstellen angezeigt, kommentiert und analysiert werden können.

  1. Merkmale
    1. Setup mit Claude
      1. Beispielverwendung
        1. Demo einer realistischeren Nutzung
          1. Entwicklungs-Setup
            1. Ausführen mit Inspector
            2. Lokale Entwicklung
          2. Verfügbare Tools

            Related Resources

            Related MCP Servers

            • figma-mcp

              JayZeeDesign
              A
              security
              A
              license
              A
              quality
              Allow your AI coding agents to access Figma files & prototypes directly. You can DM me for any issues / improvements: https://x.com/jasonzhou1993 1. Access all figma pages 2. Access all figma components 3. Access figma prototype flows
              Last updated -
              3
              49
              Python
              MIT License

            • mcp-figma

              smithery-ai
              A
              security
              F
              license
              A
              quality
              A Model Context Protocol server that provides access to Figma API functionality, allowing AI assistants like Claude to interact with Figma files, comments, components, and team resources.
              Last updated -
              18
              34
              1

            • Cursor Talk To Figma MCP

              toiletmadarchut
              A
              security
              F
              license
              A
              quality
              Enables users to control the cursor in Figma through verbal commands using an agentic AI agent, streamlining the design process with a new interaction method.
              Last updated -
              19
              5,185
              1
              JavaScript

            • Figma MCP Server

              1yhy
              -
              security
              A
              license
              -
              quality
              A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
              Last updated -
              124
              6
              TypeScript
              MIT License
              • Linux
              • Apple

            View all related MCP servers

            Appeared in Searches

            New MCP Servers

            ID: 7muhz3xl36