这半年我配置过最值的开发工具组合就是Figma MCP Claude Code。以前改设计稿流程是切到 Figma、找到图层、改参数、再回编辑器写代码光切换窗口就消耗大量精力。现在直接在 Claude Code 里用一句话描述改动需求它就能读取 Figma 设计稿、定位节点、修改文本和颜色甚至帮你导出切图。这套链路对独立开发者、设计师转前端、以及所有受够了反复“对稿”的人来说绝对值得花半小时配好。下面这篇文章会从 MCP 是什么讲起带你走一遍从安装 Claude Code、生成 Figma Token到配置 MCP Server、实战改稿的完整流程最后把常见的坑和排查经验一并列出来。1. 为什么用 Figma MCP Claude Code1.1 MCP 到底是什么先把它说明白MCPModel Context Protocol是 Anthropic 推出的开放协议你可以把它理解成 AI 世界的“万能插座”。Claude Code或其它支持 MCP 的客户端通过这个协议能像调用本地函数一样去操作外部工具和服务——比如读文件、查数据库、操作浏览器当然也包括操作 Figma。打个比方没有 MCP 的时候AI 只能“看”你贴给它的文字或截图它没法真正伸手去摸设计稿。有了 MCP它在协议规范下就能调用 Figma API 读取图层结构、获取节点信息、触发导出任务相当于给 AI 装了一双可以伸进 Figma 文档里的手。整个过程走的是标准接口不用你手动复制粘贴设计数据也不依赖第三方“抓图”脚本。Figma MCP Server 是承担这双手的代理服务。它把 Figma REST API 封装成 MCP 工具Claude Code 拿到工具清单之后就可以按需调用。目前社区里流传比较广的方案以及 Figma 官方在往 Dev Mode 整合的方向本质上都是同一件事让 AI 通过标准协议去读写设计文件。1.2 这套组合能帮你省下什么用上这套配置之后最直观的变化是“改稿链路”变了。以前改一个按钮文字你可能要经历接收 PRD 或修改意见 - 打开 Figma - 找到对应画板 - 双击文本 - 改字 - 再看看间距是否受影响。现在可以在终端里直接讲需求比如“把登录页主按钮的文字从‘立即注册’改成‘免费试用’主色换成 #FF6B35”Claude 会自己定位节点、发起修改、返回执行结果。省下来的不只是那几分钟而是上下文切换的“脑力成本”。你不需要在设计和开发两个环境之间反复横跳需求的语义始终连贯地留在对话里。除了改稿这套组合还特别适合三类场景快速生成前端代码让 Claude 读取某个 Frame 的结构直接产出对应的 HTML/CSS 或 React 代码骨架。批量导出资源不用手动一层层找切图直接让 AI 定位 Icon 组件批量导出 PNG。设计走查与整理列出所有文本节点、字体样式、颜色变量帮你在开发前做一次“设计转代码”的体检。适合谁独立开发者、小团队里的设计兼前端、以及所有想用 AI 减少重复劳动的人。如果你已经在用 Claude Code那只需要再花十分钟把它和 Figma 接上。2. 配置前的环境准备2.1 从零安装 Claude CodeClaude Code 是 Anthropic 提供的命令行编程助手可以在终端里以对话方式操作代码库、运行命令、调用 MCP 工具。安装方式很简单前提是电脑上已经有 Node.js建议 18 以上版本。打开终端执行npm install -g anthropic-ai/claude-code安装完成后运行claude命令首次使用会引导你登录 Anthropic 账号并完成订阅确认。这里有一个常见误区很多人以为 Claude Code 只支持官方 API Key实际上用 Claude 订阅账号登录是最省事的方式。如果你在终端里执行claude没有任何反应多半是 npm 全局路径没配好可用npm bin -g查看当前全局安装目录并加入 PATH。装好之后可以先跑一句话测试比如让它解释当前目录里的一个文件确认基本对话能力正常再接 Figma MCP。2.2 检查 Node 和 Figma 账户MCP Server 本身也是 Node 程序如果你的 Node 版本太旧npx拉包或启动服务时会报各种看不懂的错。建议先确认版本node -v npm -v我见过不少人在这一步卡住Node 装的是 14.x结果 MCP Server 启动时直接退出。modelcontextprotocol/server-figma这类包通常要求 Node 18版本不够就先去官网下载新版或者用nvm切换Windows 用户可以用 nvm-windows。Figma 那边你需要一个可以正常登录的账户。免费版账户就能用 API 读取自己的文件但需要你在 Figma 网页版里把目标文件打开过一次激活文件权限。另外MCP 读取文件依赖 Dev Mode开发者模式Figma 对免费账户也开放了 Dev Mode只是历史版本查看范围有限。后面我会专门讲这两个前置条件这里先记住账户要能登录文件是你自己的或者被分享给你的。3. 核心配置把 Figma 交到 Claude 手里3.1 获取 Figma MCP Server在 npm 上搜figma mcp能找到多个 MCP Server 实现。目前社区用得比较多的是mefengl/figma-mcp-serverFigma 官方也推出了面向 Dev Mode 的 MCP Server通常在它的开发者文档里有说明包名以官方文档为准。我在演示里主要用社区版因为它的工具命名直观、更新活跃而且支持通过环境变量传入 API Key适配不同配置方式。安装 MCP Server 之前先不要急着全局安装。推荐用npx直接运行好处是版本更新时不需要手动再装一遍。Claude Code 在启动 MCP 工具时会自动拉取这个包。如果你需要离线环境或想固定版本可以单独安装npm install -g mefengl/figma-mcp-server再手动把启动命令改成直接调用本地安装的包。3.2 生成 Personal Access Token要让 MCP Server 访问你的 Figma 文件必须有 Figma API 的访问凭证。Figma 支持 Personal Access Token个人访问令牌生成步骤登录 Figma 网页版点击左上角头像进入菜单。进入 Settings设置找到 Security 标签页。在 Personal access tokens 区域点击 Generate new token。输入令牌名称比如claude-mcp选择过期时间。赋予权限时勾选File content: Readonly和Dev resources: Readonly这两项是读文件、读样式、读代码映射所必需的。生成后立刻复制保存这个 Token 只在弹窗里显示一次页面关掉就再也看不到了。它相当于你 Figma 账号的子钥匙不要提交进 Git 仓库也别截图发群里。注意MCP Server 读写文件需要 Token 有足够权限。如果工具报 403多半是权限勾选漏了File content。同时 Token 有过期时间我建议设 30 天或更短到期后重新生成并更新配置。3.3 用 claude mcp add 命令完成配置Claude Code 提供了一个专门管理 MCP Server 的命令claude mcp add。在终端里执行claude mcp add figma --env FIGMA_API_KEY你的Token -- npx -y mefengl/figma-mcp-server这条命令做了什么figma是 MCP Server 在 Claude Code 里显示的名字可以随意起。--env FIGMA_API_KEY你的Token把个人访问令牌作为环境变量传给 Server。-- npx -y mefengl/figma-mcp-server是指定启动方式npx -y会自动下载并运行包。执行成功后可以用下面的命令确认配置状态claude mcp list正常会看到figma的状态是connected。如果你看到failed或disconnected先检查 Token 是否复制完整、网络是否能正常访问 npm以及你的 Node 版本是否满足要求。补充--scope参数可以让配置只对当前项目生效还是对当前用户生效。默认是 user也就是~/.claude.json全局配置。如果你是团队多人共用一台机器建议用--scope project把 MCP 配置放到项目级.mcp.json避免污染其他人的环境。3.4 手动编辑配置文件备选方案有些场景下命令方式不奏效比如公司内网有限制或者你想管理多个 MCP Server。这时可以直接编辑 Claude Code 的配置文件。全局配置文件位于~/.claude.json项目级配置文件也可以放到项目根目录的.mcp.json。把下面的 JSON 结构合并进去{ mcpServers: { figma: { command: npx, args: [-y, mefengl/figma-mcp-server], env: { FIGMA_API_KEY: 你的Token } } } }手动编辑的好处是可以一次性塞入多个 MCP Server比如 Figma、Playwright、数据库工具同时按项目拆分。注意点有两个JSON 里不要有多余逗号Token 不要带引号之外的空格。修改完配置文件后在 Claude Code 里执行/mcp命令重载列表或者重启会话让配置生效。我不太建议新手一上来就手改配置文件因为一个小的格式错误会导致全部 MCP 工具消失排查起来不如命令行直观。当你需要管理多个工具时再切换到手动编辑更合适。3.5 Dev Mode 和文件权限这两个前置条件别忽略配置完 MCP Server 并不意味着所有文件都能读。Figma 的访问控制策略会让 MCP 工具在读取文件时校验两件事你的账号是不是文件的协作者以及文件是否处于可被 API 访问的状态。第一你的 Figma 账号必须是该文件的所有者或协作者。别人分享给你的链接如果你没有编辑权限或 Viewer 权限API 会直接拒绝访问。第二MCP 工具要读取文件结构必须在 Figma 网页版打开该文件并确保 Dev Mode 处于开启状态。Figma 的 Dev Mode 是开发查看模式默认是关闭的你需要在 Figma 编辑器右上角把它打开。对免费账户来说Dev Mode 也能用只是“完整的历史版本对比”这类功能受限但基础的节点读取、样式提取完全够用。经验如果你在配置后告诉 Claude “读取某个文件”它返回Can not access file或类似错误不要先去怀疑 Token先把 Figma 网页打开、确认能看到目标文件、Dev Mode 已开。90% 的读取失败都是这两个原因造成的。4. 实操演示在对话里改掉一张设计稿4.1 让 Claude 先“看到”你的设计稿MCP 工具连上之后Claude Code 会拿到一组 Figma 相关工具包括但不限于获取文件结构、读取节点详情、导出图片、读取样式和代码映射等不同版本的工具名可能略有差异。你可以直接在对话里说“读取 Figma 文件v9Xc2kQm的页面结构帮我列出所有 Frame 和它们的尺寸。”Claude 会调用 MCP 工具把文件里顶层节点列表返回给你。实际输出大概是这样Page 1Frame: 首页Frame: 登录页Frame: 个人中心拿到结构之后你可以继续深入“进入登录页这个 Frame列出所有的文本节点以及当前颜色。”这一步相当于让 AI 把设计稿的“可编辑信息”抽出来形成一张结构化的清单。它背后调用的是 Figma API 的GET /v1/files/{key}接口返回的是 JSON 格式的节点树再经过 MCP Server 的包装变成 Claude 能理解的工具输出。4.2 修改文本内容和颜色当 Claude 已经“看到”节点之后就可以下修改指令了。例如“把登录页 Frame 里文本内容为‘立即注册’的节点改成‘免费试用’。同时把主按钮的填充色改成 #FF6B35。”Claude 会先定位到对应用例节点然后调用 MCP Server 里的修改方法将修改指令打包成符合 Figma API 要求的 JSON Patch 请求。你会发现它不只是改一个属性而是会返回一段结构化的“变更说明”列出改了哪些节点、前后的值是什么。这样你在评审时可以快速确认 AI 没改错地方。这里有一个值得注意的细节Figma API 的写操作和读操作在权限上有差异部分 MCP Server 实现中修改文件需要你有该文件的编辑权限并且修改后可能还需要在 Figma 里手动确认或刷新。我在实测中发现修改类操作如果遇到失败通常是 Token 只勾了 Readonly 权限或者 MCP Server 本身对写操作支持不完整。遇到这种情况我的建议是退一步让 AI 把“改稿方案”以差异清单输出你在 Figma 里照着手动调整效率仍然比纯手动找图层高。4.3 快速切图和资源导出我最常用的功能其实是导出。以前给前端切图得自己找到图层、右键 Export、选格式和倍率。现在只需要说“把登录页里所有 Icon 导出成 2x PNG给我可访问的下载链接。”MCP Server 会调用 Figma API 的导出接口生成指定节点的图片 URL。你拿到 URL 后可以直接下载也可以喂给后续开发流程。这个需求在日常工作中特别高频尤其是做活动页、临时页面时省下的时间非常可观。需要说明的是MCP Server 的导出能力受文件访问权限影响如果该文件没有给你Dev resources权限导出会返回 403。所以生成 Token 时Dev resources: Readonly和File content: Readonly两个权限尽量都勾上。4.4 从设计稿直接生成前端代码片段另一个很炸裂的用法是“设计转代码”。让 Claude 读取 Design 系统里的 Button 组件直接生成对应的 CSS 代码或者让它把一个 Frame 翻译成 React 组件骨架。例如“读取‘登录卡片’这个 Frame输出它的结构与 CSS 样式颜色从 style 里读取。”Claude 会从 MCP Server 拿节点树和样式信息再结合代码生成能力输出.login-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; border-radius: 12px; background: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }需要注意自动生成的代码是骨架不能直接搬到生产环境。它最大的价值是给你一个“和设计稿对齐”的起点而不是替代开发者思考。我一般会让 Claude 输出后再人工检查间距、响应式断点这样既快又稳。5. 常见问题与排查实录5.1 MCP 连接失败工具列表里看不到 Figma症状claude mcp list显示figma是failed或者会话里打包时根本没出现 Figma 相关工具。排查路径按顺序来先看 npm 网络。国内网络环境拉取 npx 包偶尔会超时可以尝试配置 npm 镜像源或者先手动执行一次npx -y mefengl/figma-mcp-server确认包能正常下载并启动。再看 Node 版本。node -v低于 18 的话Server 可能在启动时直接退出连日志都没有。最后确认命令行里有没有把 Token 传对。环境变量名不一致也会让 Server 直接拒绝启动。最直接的诊断方式单独在终端跑一遍 MCP Server 的启动命令看输出。能跑通问题就在 Claude Code 侧跑不通错误信息会直接告诉你缺什么。5.2 能连接但读不到文件提示权限错误这类问题基本集中在 401 / 403 / 404401Token 失效或根本没传对重新生成 Token 并更新配置。403Token 权限不足。去 Figma 设置里确认是否勾选了 File content 和 Dev resources 权限。404文件不存在或者你的账号没有该文件的访问权限。被分享链接给的权限过低也不行至少需要 Viewer 权限。我在排查时还发现一种隐蔽情况Figma 的商业版文件可能开启“限制 API 访问”这时即使你的账号是协作者API 也拿不到数据。解决办法是让文件所有者检查文件级权限设置或者复制一份文件到你有完整权限的草稿箱里再操作。5.3 修改操作执行了但回到 Figma 里没变化这个问题比较容易让人困惑。原因在于不是所有 MCP Server 的“修改”都会实时同步到 Figma。一部分实现只是生成了修改指令或 JSON Patch需要用对应方法提交才生效。我在用社区版时遇到过工具返回修改成功但 Figma 画布里看不到任何改动。这种情况的排查思路了解你使用的 MCP Server 具体提供了哪些写能力。有些 Server 只有update_file或apply_patch需要你在对话里明确要求“提交改动到文件”。检查当前文件是否处于“可编辑”状态。处于 Dev Mode 下部分写操作会被当成“注释”或“标记”不会真正落盘。实在不行就切换思路——让 AI 输出修改清单手动在 Figma 上应用。反正在“定位节点”这一步已经节省了大量时间。5.4 常见问题速查表现象可能原因解决方案claude mcp list显示 failedNode 版本低、npx 拉包失败、Token 未传对升级 Node 18手动跑 npx 命令验证重新生成 Token工具能列出但读取文件 401Token 失效或过期重新生成 Token 并更新配置读取文件 403Token 缺少 File content / Dev resources 权限回 Figma 设置补权限读取文件 404文件不存在或账号无访问权确认文件链接可访问账号为协作者修改后 Figma 无变化Server 只生成了 Patch 未提交或写操作权限不足检查 Server 文档明确要求提交或改用差异清单手动改导出图片 403缺少 Dev resources 权限在 Token 权限里勾选 Dev resources字体样式读不出来Figma 文件字体未安装/未授权在 Figma 里确认字体可用或让 AI 直接读取 style 数值这个速查表是我自己在实际配置里一点点攒出来的调试时先照着表定位能少走很多弯路。5.5 别忘了定期验证配置MCP 配置不是一劳永逸的。Token 会过期Figma API 策略会更新npm 包也会升级。我给自己定的习惯是每两周左右跑一次claude mcp list顺手让 Claude 读取一个已知文件做连通性测试。如果哪天发现 Figma 工具突然全部消失先别慌按经验 90% 是 Token 到期或 npx 缓存出问题。重新生成 Token、执行一次claude mcp remove figma再claude mcp add figma基本就能恢复。写在最后配置完这套 Figma MCP Claude Code最大的感受是“表达即操作”我不用先想好怎么点按钮、传哪些参数而是直接描述意图AI 来执行细节。当然它不是万能的——复杂的交互原型、严谨的设计走查仍然需要打开 Figma 亲自确认。但至少在文本替换、颜色调整、切图导出、代码生成这些高频重复动作上它已经帮我省下了大量时间。如果你也准备试我的建议是小步快跑先配好环境挑一个非核心的测试文件跑通读取再试着改一个按钮最后再上真实项目。这样即使踩坑也完全不影响工作进度。MCP 生态现在越来越丰富今天你配好的是 Figma明天同样的思路可以迁移到浏览器、设计系统、内部工具上一次学习处处复用。