PF

planetabhi/figma-mcp-server

Developer tools

このページは 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 MCP 初心者?mcpskill.org のガイドから始めましょう →

設定

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