Claude + Figma MCP

余人于RenYu2026-04-15 2:32

前提：claude code 已安装

准备工作下载最新版 Figma桌面客户端：

下载地址：https://www.figma.com/downloads/

桌面客户端下载后

获取 Figma API 密钥
claude 连接

打开某个项目的 ui 设计稿，选中某张 ui 图，启动服务，复制 MCP server 路径

然后打开上面ui设计图对应的前端项目，在终端下执行命令

javascript 复制代码

# 添加 mcp
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp   // figma-desktop 可以自定义

可以打开 c盘下 .claude.json 看到添加上去了

创建配置文件的方式（如果第2布执行后，可直接跳过这步，这是另一种配置方式）。

在项目根目录创建 .mcp.json 文件，添加以下内容：

javascript 复制代码

{
  "mcpServers": {
    "figma-desktop-mcp": {
      "command": "figma-developer-mcp",
      "args": [
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "[YOUR_FIGMA_API_KEY]" 
      }
    }
  }
}

figma-developer-mcp：自定义别名，避免与官方 MCP 冲突
FIGMA_API_KEY：需要在 Figma 设置中生成个人访问令牌（就是第一步生成的）

重启 claude 并授权
配置完成后，重启 Claude Code，同意使用该 MCP：
验证配置
使用以下命令验证配置是否成功：

javascript 复制代码

# 列出所有已配置的服务器
claude mcp list
# 或在 Claude Code 中输入
/mcp

管理命令：

javascript 复制代码

# 查看所有 MCP 服务器
claude mcp list
# 删除 MCP 服务器
claude mcp remove figma-desktop
# 查看配置详情
claude mcp info figma-desktop
# 删除 MCP 服务器
 claude mcp remove figma-desktop