Figma MCP 接入 Claude Code：远程、桌面版与 Framelink 配置教程

简短回答

要把 Figma MCP 接入 Claude Code，运行 claude mcp add --transport http figma https://mcp.figma.com/mcp，开启一个新的 Claude Code 会话，输入 /mcp，选择 figma，点 Authenticate，然后在浏览器中点击 Allow access。这就是 Figma 官方的远程服务器，也是 Figma 推荐大多数人使用的方案。

另外还有两个选择：运行在 Figma 桌面应用里的 Figma 桌面版服务器，以及使用个人访问令牌的社区版 Framelink 服务器。本文会逐一配置，然后帮你做选择。

把 Figma 接入 Claude Code 的三种方式

官方服务器的信息来自 Figma 开发者文档，Framelink 的信息来自它的 README 和快速上手文档。

方案 1：Figma 远程 MCP 服务器（推荐）

以插件方式安装

Figma 文档把插件列为推荐方式，因为它还会一并安装 Figma 的 agent skills：

claude plugin install figma@claude-plugins-official

如果 Claude Code 正在运行，先重启它。输入 /plugin，按右方向键进入 Installed 标签，选中 figma 后按回车，再按一次回车登录，然后在浏览器中点击 Allow access。如果安装命令失败，可能是你的组织禁用了插件安装，改用下面的手动命令即可。

或者手动添加服务器

claude mcp add --transport http figma https://mcp.figma.com/mcp

这只会把它加到当前项目（Claude Code 默认的 local 作用域）。要在所有项目中使用：

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

要和团队共享，用 --scope project。它会在 .mcp.json 中写入下面的内容，里面不含任何密钥，因为每个成员都用自己的 Figma 账号登录：

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

登录

1. 开启一个新的 Claude Code 会话。
2. 输入 /mcp，选择 figma。
3. 选择 Authenticate，然后在浏览器中点击 Allow access。
4. 你应该会看到 "Authentication successful. Connected to figma"。
5. 再输入一次 /mcp 确认。

Claude Code 会保存令牌并自动刷新。想了解协议细节，可以看 MCP 认证与 OAuth。

注意：Figma 只允许其 MCP 目录中列出的客户端连接远程服务器，Claude Code 就在其中。

方案 2：Figma 桌面版 MCP 服务器

如果你希望 Claude 直接基于你在 Figma 中当前选中的内容工作，而不用复制链接，就用这个方案。

要求：Figma 桌面应用，以及 Professional、Education、Organization、Government 或 Enterprise 套餐中的 Dev 或 Full 席位。

1. 打开 Figma 桌面应用并更新到最新版。
2. 打开一个 Figma Design 文件。
3. 在不选中任何内容的情况下，用工具栏开关或 Shift + D 打开 Dev Mode。
4. 在右侧边栏找到 MCP server 区域，点击 Enable desktop MCP server。屏幕底部会出现确认提示。

然后把它加入 Claude Code：

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

重启 Claude Code 并检查 /mcp。不需要单独登录，桌面应用本身就是认证。桌面版服务器不能写入画布，除非你特别需要基于选中内容工作，否则 Figma 自己也推荐用远程服务器。

方案 3：Framelink（社区服务器）

Framelink MCP for Figma 比 Figma 官方服务器出现得更早，至今仍很受欢迎。它用你的令牌调用 Figma REST API，并在交给模型之前把返回结果精简为布局和样式数据，从而控制上下文大小。它提供两个工具：get_figma_data 和 download_figma_images。

创建令牌

在 Figma 中点击头像，打开 Settings → Security，滚动到 Personal access tokens，点击 Generate new token。Framelink 的快速上手文档提醒：使用默认权限范围的令牌无法工作。至少勾选 file_content:read、file_metadata:read、current_user:read 以及文档列出的其他权限，然后复制令牌（只显示一次）。

加入 Claude Code

Framelink 文档给出的命令：

claude mcp add Framelink_Figma_MCP -- npx -y figma-developer-mcp \
  --figma-api-key=YOUR-KEY --stdio

如果不想把令牌放在命令参数里，可以改用服务器同样支持的 FIGMA_API_KEY 环境变量：

claude mcp add framelink --env FIGMA_API_KEY=YOUR-KEY -- npx -y figma-developer-mcp --stdio

如果要共享 .mcp.json，使用 Claude Code 的环境变量展开功能，让每个人提供自己的令牌：

{
  "mcpServers": {
    "framelink": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": { "FIGMA_API_KEY": "${FIGMA_API_KEY}" }
    }
  }
}

绝对不要提交真实令牌。另外需要安装 Node.js，npx 才能运行。

应该选哪一个？

• 选远程服务器：如果你想要完整功能——设计上下文、截图、变量、Code Connect，以及写回 Figma（新建文件、生成图表、把运行中的 UI 发送到画布）。它不需要桌面应用，也是 Figma 推荐的方案。
• 选桌面版服务器：如果你常驻桌面应用，希望 Claude 直接处理当前选中的内容。需要付费套餐中的 Dev 或 Full 席位。
• 选 Framelink：如果你的席位会触及官方服务器的限额，你想要能在脚本中使用的令牌式配置，或者你更喜欢精简的工具输出。代价是不能写入画布，也没有 Code Connect。

三个都可以同时安装。给它们起不同的名字（figma、figma-desktop、framelink），并在提示词中告诉 Claude 用哪一个。

官方服务器的速率限制

根据 Figma 的速率限制页面，读取数据类工具的限额如下：

部分写入工具不受限制，例如 create_new_file 和 generate_figma_design。Figma 表示这些限额随时可能调整。在草稿之外写入画布需要 Full 席位，测试期间免费。

验证并试试第一批提示词

在终端运行 claude mcp list，或在会话中输入 /mcp。你添加的每个服务器都应显示为已连接。然后在 Figma 中复制一个画框链接（右键 → Copy link to selection），试试：

• 「把这个 Figma 画框实现为一个使用 Tailwind 的 React 组件：（粘贴链接）。」
• 「这个 Figma 选中内容用了哪些颜色和间距变量？把它们映射到我们的 CSS 变量。」
• 「截一张这个画框的图，和 localhost:3000 上的页面做对比。」
• 「把这个画框里的图标导出为 SVG，放到 public/icons。」
• 「根据这个仓库里的模型，生成一张数据库结构的 FigJam 图。」

当你的代码库里已经有可复用的组件时，官方服务器的效果最好。它的 create_design_system_rules 提示会生成一份规则文件，让 Claude 写出符合你项目规范的代码。

故障排查

想查看每个工具具体返回什么，可以把服务器连接到 MCP Inspector。

下一步

当 Claude 能检查自己的产出时，Figma MCP 的效果会更好。加上 Playwright MCP，让 Claude 打开它写好的页面并与设计稿对比；再加上 GitHub MCP 服务器来创建 PR。更多设计和前端类服务器可以在 MCP 服务器目录中找到，管理所有已添加的服务器请看完整的 Claude Code MCP 指南。