行业资讯
Figma 使用 figma-developer-mcp 搭建本地 mcp，以及 Workbuddy 配置 本地 MCP
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 自带的本地 MCPModel 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生成新令牌按钮。这时会弹出一个创建令牌的对话框你需要为令牌取一个容易识别的名字例如 “Workbuddy Local MCP”选择令牌的权限范围对于 figma-developer-mcp通常需要file_read等基础权限点击创建按钮生成一个 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 未知。
郑州网站建设
网页设计
企业官网
