Claude + Figma MCP

本文介绍了如何配置Figma与Claude Code的连接。首先需要下载Figma桌面客户端并获取API密钥，然后通过命令claude mcp add添加MCP服务器路径，或在项目根目录创建.mcp.json配置文件。配置完成后重启Claude Code并授权，使用claude mcp list命令验证配置。还提供了MCP服务器的管理命令，包括查看、删除服务器等操作。整个流程实现了Figma设计稿

余人于RenYu

453人浏览 · 2026-04-13 11:48:13

余人于RenYu · 2026-04-13 11:48:13 发布

前提：claude code 已安装
准备工作下载最新版 Figma桌面客户端：
下载地址：https://www.figma.com/downloads/

桌面客户端下载后

获取 Figma API 密钥
claude 连接

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

在这里插入图片描述

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

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

可以打开 c盘下 .claude.json 看到添加上去了
在这里插入图片描述
3. 创建配置文件的方式（如果第2步执行后，可直接跳过这步，这是另一种配置方式）。
在项目根目录创建 .mcp.json 文件，添加以下内容：

{
  "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：
验证配置
使用以下命令验证配置是否成功：

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

在这里插入图片描述

管理命令：

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