企业官网建设流程全解析

Figma 使用 figma-developer-mcp 搭建本地 MCP，以及 Workbuddy 配置 本地 Figma MCP

摘要：本文介绍如何通过社区维护的figma-developer-mcp项目，在本地搭建 Figma MCP 服务，并配置到 Workbuddy 中，实现设计稿与 AI 辅助开发的无缝对接。文章依次讲解三个步骤：一是通过 npm 全局安装figma-developer-mcp；二是在 Figma 中生成个人访问 Token；三是在 Workbuddy 的连接器中填写 JSON 配置并启用服务。配置完成后，即可在 Workbuddy 的 AI 助手中直接调用 Figma 设计资源，如读取图层结构、导出图片、获取组件信息等。文中还特别提醒了路径替换等注意事项，帮助读者避开常见坑点。

前几天，我一直在使用 Figma 自带的本地 MCP（Model Context Protocol）功能来提升设计稿与开发工作流的对接效率。但是今天发现，这个功能突然没了，可能是 Figma 官方调整了功能策略。这对于我利用 Workbuddy 进行 AI 辅助开发带来了很大的麻烦——原本可以直接在 Workbuddy 中调用 Figma 设计资源，现在链路断了。

国内特殊网络情况，使用官方的 MCP 服务也有很多问题，比如连接不稳定、速度慢，甚至有时完全无法访问。幸好，有社区开发者维护的 figma-developer-mcp 项目，它提供了一个本地化的 MCP 服务方案，让我们在无法使用官方服务时，依然可以正常工作，实现 Figma 设计资源与 Workbuddy 的无缝集成。

安装 figma-developer-mcp

安装 figma-developer-mcp 非常简单，只需要一个命令行即可完成。这是一个基于 Node.js 的 CLI 工具，通过 npm 全局安装后，就可以在本地启动一个 MCP 服务。

前置条件：确保你的系统已经安装了 Node.js（建议版本 16+）和 npm。如果没有安装，可以先到 Node.js 官网 下载安装包。

npminstall-gfigma-developer-mcp

获取 figma 个人 Token

打开 Figma 桌面客户端或网页版，点击界面左上角的用户头像，会出现一个下拉菜单，在其中找到并点击Settings（设置）。

然后在弹出的设置窗口中，左侧导航栏找到并点击Security（安全）标签页。这里会展示与账户安全相关的各种设置选项。

在 Security 页面中，向下滚动找到Personal access tokens（个人访问令牌）区块。点击Generate new token（生成新令牌）按钮。

这时会弹出一个创建令牌的对话框，你需要：

1. 为令牌取一个容易识别的名字（例如 “Workbuddy Local MCP”）
2. 选择令牌的权限范围（对于 figma-developer-mcp，通常需要file_read等基础权限）
3. 点击创建按钮，生成一个 Token

重要提示：创建成功后，请立即复制并妥善保存这个 Token，因为它只会在创建时显示一次。如果丢失，需要重新生成。

配置 workbuddy MCP

在 Workbuddy 中，点击左侧的「专家·技能·连接器」，并在二级菜单里选择「连接器」。这里集中管理着 Workbuddy 可以调用的各种外部服务，包括数据库、API 以及我们要配置的 MCP 服务。

进入连接器页面后，点击右上角的「自定义连接器」按钮，进入自定义连接器的管理界面。

在自定义连接器页面中，找到「MCP 服务管理」区域，点击「配置 MCP」按钮，开始添加一个新的 MCP 服务。

在弹出的配置窗口中，我们需要填写一个 JSON 格式的配置。这个配置告诉 Workbuddy 如何启动 figma-developer-mcp 服务，以及如何连接 Figma。请将下面的内容完整复制进去：

{"mcpServers":{"figma-developer-mcp":{"command":"/Users/fungleo/.workbuddy/binaries/node/versions/22.22.2/bin/node","args":["/Users/fungleo/.nvm/versions/node/v22.14.0/lib/node_modules/figma-developer-mcp/dist/bin.js","--stdio","--figma-api-key=__更换成你的 key__"],"env":{"FIGMA_API_KEY":"__更换成你的 key__","FRAMELINK_TELEMETRY":"off","IMAGE_DIR":"/Users/fungleo/Sites/ShangHaiYingZhou/sxdg-wechat-app-h5/miniapp/src/assets/figma-exports","NODE_OPTIONS":""},"disabled":false}}}

注意：上面的command、args和env中的路径，都需要更换成你自己电脑上的实际目录。尤其是command指向的 Node.js 可执行文件路径，以及args中figma-developer-mcp的安装路径，必须与你的实际环境一致。我尝试过用环境变量（如$HOME）来替代，但没有成功，所以建议直接使用绝对路径。

晚上补充，我在家里的电脑上，用下面的这个配置，顺利走通。

{"mcpServers":{"figma":{"command":"figma-developer-mcp","args":["--stdio"],"env":{"FIGMA_API_KEY":"__更换成你的 key__"},"disabled":false}}}

如果这段代码是可用的，就用这段，如果不可用，再参考我上面的那段，自行修改路径吧。

配置完成后，点击保存并启用该 MCP 服务。回到 Workbuddy 的对话界面，你就可以在 AI 助手中直接调用 Figma 的设计资源了——比如让 AI 读取设计稿的图层结构、导出图片、获取组件信息等，实现设计与开发的深度联动。

大家如果在配置过程中踩过其他的坑，或者有更好的配置技巧，欢迎在评论区和我讨论。

以上内容，仅在我自己的 mac 上试过， windows 未知。