Framelink Figma MCP

Claude Code

1. Führe das in einem Terminal in deinem Projektordner aus:

claude mcp add --transport stdio framelink-figma --env "FIGMA_API_KEY=<YOUR_FIGMA_API_KEY>" -- npx -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio

1. Starte Claude Code und tippe /mcp. framelink-figma sollte als verbunden angezeigt werden.

Ergänze --scope user, damit er in jedem Projekt verfügbar ist. Ersetze die Platzhalter durch deine eigenen Werte.

Claude Desktop

1. Öffne Settings → Developer → Edit Config. Das öffnet claude_desktop_config.json. Füge hinzu:

{
  "mcpServers": {
    "framelink-figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_KEY",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<YOUR_FIGMA_API_KEY>"
      }
    }
  }
}

1. Speichere die Datei und starte Claude Desktop neu. Ersetze die Platzhalter durch deine eigenen Werte.

Braucht Node.js auf deinem Rechner. Die Datei liegt unter macOS in ~/Library/Application Support/Claude/ und unter Windows in %APPDATA%\Claude\.

Cursor

Zu Cursor hinzufügen (öffnet in einem neuen Tab)

Oder trag ihn von Hand in ~/.cursor/mcp.json (alle Projekte) oder .cursor/mcp.json (dieses Projekt) ein:

{
  "mcpServers": {
    "framelink-figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_KEY",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<YOUR_FIGMA_API_KEY>"
      }
    }
  }
}

Braucht Node.js auf deinem Rechner. Ersetze die Platzhalter durch deine eigenen Werte.

VS Code

Füge ihn zu .vscode/mcp.json hinzu. VS Code fragt beim ersten Mal nach dem Secret und speichert es sicher:

{
  "servers": {
    "framelink-figma": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_KEY",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "${input:figma-api-key}"
      }
    }
  },
  "inputs": [
    {
      "type": "promptString",
      "id": "figma-api-key",
      "description": "FIGMA_API_KEY",
      "password": true
    }
  ]
}

Braucht Node.js auf deinem Rechner.

Devin Desktop

1. Füge ihn zu ~/.config/devin/mcp_config.json (macOS und Linux) oder %APPDATA%\devin\mcp_config.json (Windows) hinzu:

{
  "mcpServers": {
    "framelink-figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_KEY",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<YOUR_FIGMA_API_KEY>"
      }
    }
  }
}

1. Aktualisiere die Liste der MCP-Server in Cascade. Ersetze die Platzhalter durch deine eigenen Werte.

Devin Desktop ist der neue Name von Windsurf.

Codex

codex mcp add framelink-figma --env "FIGMA_API_KEY=<YOUR_FIGMA_API_KEY>" -- npx -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio

Oder bearbeite ~/.codex/config.toml direkt:

[mcp_servers.framelink-figma]
command = "npx"
args = ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_KEY", "--stdio"]
env = { FIGMA_API_KEY = "<YOUR_FIGMA_API_KEY>" }

Braucht Node.js auf deinem Rechner. Ersetze die Platzhalter durch deine eigenen Werte.

Gemini CLI

gemini mcp add -e "FIGMA_API_KEY=<YOUR_FIGMA_API_KEY>" framelink-figma npx -- -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio

Damit fügst du ihn dem aktuellen Projekt hinzu. Ergänze -s user, um ihn überall zu nutzen.

Jeder Client

Die meisten Clients, die lokale Server starten, akzeptieren diese Form:

{
  "mcpServers": {
    "framelink-figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_KEY",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<YOUR_FIGMA_API_KEY>"
      }
    }
  }
}

Zed legt Server in seinen Einstellungen unter context_servers ab, mit denselben Feldern command, args und env.

Braucht Node.js auf deinem Rechner. Ersetze die Platzhalter durch deine eigenen Werte.

README-Badge

[![Framelink Figma MCP on mcp.tc](https://mcp.tc/i/framelink-figma/badge.svg)](https://mcp.tc/i/framelink-figma)

<a href="https://mcp.tc/i/framelink-figma"><img src="https://mcp.tc/i/framelink-figma/badge.svg" alt="Framelink Figma MCP on mcp.tc" height="20"></a>

Es folgt dem hellen oder dunklen Modus der Lesenden. Hänge ?theme=light oder ?theme=dark an, um ihn festzulegen, oder ?style=compact, um das Zeichen ohne Schriftzug zu zeigen.

Website-Karte

<script src="https://mcp.tc/w/framelink-figma.js" async></script>

Die Karte erscheint dort, wo das Tag steht. Füge dem Tag data-theme="dark" oder data-size="compact" hinzu, um sie zu ändern. Die Datei enthält alles, was sie braucht, stellt also keine weiteren Anfragen und setzt keine Cookies.

iframe

<iframe src="https://mcp.tc/embed/framelink-figma" title="Framelink Figma MCP on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

Nutze es auf Seiten, die keine Skripte erlauben. Hänge ?theme=light oder ?theme=dark an die Adresse an, um die Farben festzulegen.

JSON

Der Eintrag als Daten für deine eigenen Seiten und Tools: Name, Kurzbeschreibung, Installationsbefehl, Tools und die „Add to“-Links. Jede Website kann ihn lesen (CORS ist offen).

https://mcp.tc/i/framelink-figma.json

Was jedes Feld bedeutet