/ Verzeichnis / Playground / Figma MCP Server Guide
← Alle Server ↗ GitHub
● Offiziell figma ⚡ Sofort

Figma MCP Server Guide

von figma · figma/mcp-server-guide

Official Figma guide and reference for using the Figma Dev Mode MCP server with AI clients.

Figma MCP Server Guide is an MCP server maintained by figma. Official Figma guide and reference for using the Figma Dev Mode MCP server with AI clients. See the repo README for installation, auth, and configuration: https://github.com/figma/mcp-server-guide

▶ Demo ansehen 📦 Installieren 💡 Anwendungsfälle

Warum nutzen

Hauptfunktionen

Live-Demo

In der Praxis

figma-mcp-server-guide.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-mcp-server-guide": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-server-guide"
      ],
      "_inferred": true
    }
  }
}

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

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "figma-mcp-server-guide": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-server-guide"
      ],
      "_inferred": true
    }
  }
}

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

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "figma-mcp-server-guide": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-server-guide"
      ],
      "_inferred": true
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "figma-mcp-server-guide": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-server-guide"
      ],
      "_inferred": true
    }
  }
}

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

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "figma-mcp-server-guide",
      "command": "npx",
      "args": [
        "-y",
        "mcp-server-guide"
      ]
    }
  ]
}

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json
{
  "context_servers": {
    "figma-mcp-server-guide": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "mcp-server-guide"
        ]
      }
    }
  }
}

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

claude mcp add figma-mcp-server-guide -- npx -y mcp-server-guide

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

Anwendungsfälle

Praxisnahe Nutzung: Figma MCP Server Guide

Use Figma MCP Server Guide for its primary workflow

👤 Claude Code users / MCP clients ⏱ ~20 min intermediate

Wann einsetzen: See repo README for canonical use cases.

Voraussetzungen
  • Server installed / connection details ready — See https://github.com/figma/mcp-server-guide
Ablauf
  1. Install
    Install Figma MCP Server Guide per its README.✓ Kopiert
    → Server registered with the client
  2. Configure
    Provide credentials/config as instructed.✓ Kopiert
    → Successful auth/init
  3. Use
    Run a sample task with Figma MCP Server Guide.✓ Kopiert
    → Expected output

Ergebnis: You can drive the documented workflow end-to-end.

Fallstricke
  • Skipping README — Read the repo README and CHANGELOG before shipping to prod.

Werkzeuge

Was dieses MCP bereitstellt

WerkzeugEingabenWann aufrufenKosten
primary see README Primary action free

Kosten & Limits

Was der Betrieb kostet

API-Kontingent
Bounded by upstream provider quotas (if any)
Tokens pro Aufruf
Depends on usage
Kosten in €
Open source — check repo LICENSE
Tipp
Review upstream API costs (if any) before automating.

Sicherheit

Rechte, Secrets, Reichweite

Minimale Scopes: Whatever the upstream provider requires
Credential-Speicherung: Env vars or local config — never commit secrets
Datenabfluss: Forwards data per its README
Niemals gewähren: Full admin to untrusted prompts

Fehlerbehebung

Häufige Fehler und Lösungen

Auth fails

Verify credentials and required scopes match README.

Prüfen: Re-read repo README auth section.
Tool not found by client

Ensure MCP client config points to correct command/path.

Prüfen: Restart the client after editing config.

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen