Figma MCP Server

一个全面的本地Figma MCP服务器。连接Figma与Gemini CLI、Cursor和Claude Desktop。

预备条件

• Node (>= 20)
• Bun (>= 1.1.0)

安装

安装服务器

git clone https://github.com/planetabhi/figma-mcp-server.git
cd figma-mcp-server
bun i

设置工具环境变量

创建一个 .env 文件，并设置 FIGMA_API_KEY 为你自己的Figma API密钥。

FIGMA_API_KEY=

要生成一个新的个人访问令牌，请登录到你的Figma账户，然后从左上角菜单前往设置，点击安全标签，找到个人访问令牌部分，点击生成新令牌以打开配置模态，在那里你可以设置过期时间和范围，然后再点击生成令牌。

列出所有工具

列出所有可用工具的描述和参数

bun run list-tools

运行MCP服务器

查找bun和服务器路径

# 查找bun路径
which bun

# 获取MCP服务器的绝对路径
realpath mcpServer.js

使用Claude Desktop运行

1. 打开Claude Desktop → 设置 → 开发者 → 编辑配置 并添加你的服务器：

{
  "mcpServers": {
    "figma-mcp-server": {
      "command": "<absolute_path_to_bun>",
      "args": ["<absolute_path_to_mcpServer.js>"]
    }
  }
}

2. 重启Claude Desktop以激活配置更改。

要在Claude Desktop中试用，请首先从工具列表中启用get_file_nodes工具。从Figma文件中复制设计节点链接，然后将其粘贴到Claude Desktop提示中。它将返回设计节点数据和其他信息。

使用Gemini CLI运行

1. 打开一个新的终端并创建 .gemini 目录（如果不存在）

mkdir -p ~/.gemini

2. 创建 settings.json 文件

echo '{
  "mcpServers": {
    "figma-mcp-server": {
      "command": "<absolute_path_to_bun>",
      "args": ["mcpServer.js"],
      "cwd": "<absolute_path_to_working_directory>",
      "env": {
        "FIGMA_API_KEY": "your_figma_api_key_here"
      },
      "trust": true
    }
  }
}' > ~/.gemini/settings.json

3. 启动Gemini CLI

export GEMINI_API_KEY="your_gemini_api_key_here"
npx https://github.com/google-gemini/gemini-cli

• 使用 /mcp 列出所有工具
• 使用 /mcp desc 显示服务器和工具描述
• 使用 /mcp schema 显示工具参数模式
• 使用 /mcp nodesc 隐藏描述

---

故障排除

• 缺少Figma令牌
  • 错误：缺少或无效的 FIGMA_API_KEY。
  • 确保 .env 文件存在于 mcpServer.js 旁边，并且包含 FIGMA_API_KEY=...。
• 端口已被使用（SSE模式）
  • 在自定义端口上运行SSE：PORT=3005 node mcpServer.js --sse。
• 未找到Bun
  • 确保 which bun 返回一个路径。
  • 安装Bun后重新启动shell。
• 使用npm而不是Bun
  • 将 bun i 替换为 npm i
  • 将 bun run list-tools 替换为 node index.js tools
• 不需要手动启动
  • 只需手动启动SSE或本地web端点：node mcpServer.js --sse
  • 默认端口是 3001，可以通过 PORT=<port> 来覆盖。

---

MIT License · By @planetabhi ⋛⋋( ⊙◊⊙)⋌⋚