PF

planetabhi/figma-mcp-server

开发工具

本页由 AI 翻译,技术细节请以原文为准。 查看原文

10 stars 4 forks 质量 73 趋势 28NOASSERTION

A local Figma MCP server with full Figma REST API coverage

概览

A local MCP server with full Figma REST API coverage. Works with Claude Desktop, Cursor, VS Code, the Gemini CLI, and any MCP client. Available on npm and the official MCP Registry. Each Figma REST endpoint is exposed as one self-describing MCP tool, auto-discovered at startup from tools/figma/, so adding an endpoint is just adding a file. Required parameters are validated before each call. It runs over stdio. Requires Bun ≥ 1.2. It's Bun-native, so launch it with bunx, not npx (Node isn't supported). Create a personal access token in Figma under Settings > Security > Personal access tokens > Generate new token. Provide it as FIGMA_API_KEY, ideally in your client config's env block (see below). Every client uses the same server. Point command at bunx, or its absolute path (which bunx) if the client cannot find it on PATH. - Claude Desktop: Settings > Developer > Edit Config (claude_desktop_config.json) - Cursor: ~/.cursor/mcp.json, or .cursor/mcp.

README

以下为原文 README 节选,完整内容请查看原文。

Figma MCP Server

A local MCP server with full Figma REST API coverage. Works with Claude Desktop, Cursor, VS Code, the Gemini CLI, and any MCP client. Available on npm and the official MCP Registry.

How it works

Each Figma REST endpoint is exposed as one self-describing MCP tool, auto-discovered at startup from tools/figma/, so adding an endpoint is just adding a file. Required parameters are validated before each call. It runs over stdio.

Prerequisites

Requires Bun ≥ 1.2. It’s Bun-native, so launch it with bunx, not npx (Node isn’t supported).

Figma API key

Create a personal access token in Figma under Settings > Security > Personal access tokens > Generate new token. Provide it as FIGMA_API_KEY, ideally in your client config’s env block (see below).

Configure your client

Every client uses the same server. Point command at bunx, or its absolute path (which bunx) if the client cannot find it on PATH.

{
  "mcpServers": {
    "figma": {
      "command": "bunx",
      "args": ["figma-mcp-server"],
      "env": {
        "FIGMA_API_KEY": "your_figma_api_key_here"
      }
    }
  }
}

Config file locations:

  • Claude Desktop: Settings > Developer > Edit Config (claude_desktop_config.json)
  • Cursor: ~/.cursor/mcp.json, or .cursor/mcp.json per project
  • Gemini CLI: ~/.gemini/settings.json

Restart the client after editing its config.

VS Code

Use .vscode/mcp.json (workspace) or your user mcp.json, with a servers key. Instead of hardcoding the token, define an input so VS Code prompts for it securely:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "figma-api-key",
      "description": "Figma API Key",
      "password": true
    }
  ],
  "servers": {
    "figma": {
      "command": "bunx",
      "args": ["figma-mcp-server"],
      "env": {
        "FIGMA_API_KEY": "${input:figma-api-key}"
      }
    }
  }
}
  • With ${input:figma-api-key}, VS Code prompts you for the key the first time the server starts, then stores it in your OS secret storage.
  • To re-enter or clear it: Command Palette → MCP: List Servers → pick the server → reset/edit its inputs.

Tool coverage

Full coverage of the Figma REST API (non-deprecated endpoints), 55 tools across:

  • Files and nodes (files, node trees, image rendering, image fills, metadata, version history, duplicate)
  • Variables / design tokens (read, published, bulk modify)
  • Components, component sets, and styles (file, published, and team scopes)
  • Comments and reactions
  • Teams (get, create, invite members)
  • Folders (top-level folders, subfolders, files, metadata, create)
  • Users
  • Dev resources
  • Webhooks (v2)
在 GitHub 查看完整 README

安装

This server does not publish a one-line install command.

Open the repository installation guide 新手?先看 mcpskill.org 教程 →

配置

{ "mcpServers": { "figma": { "command": "bunx", "args": ["figma-mcp-server"], "env": { "FIGMA_API_KEY": "your_figma_api_key_here" } } } }