Figma MCP 入门：在 Claude Code 里连接远程设计上下文

适合人群：已在用 Claude Code，想把 Figma 选区设计上下文接到对话里、减少来回切窗口描述样式的开发与设计协作同学。本文主讲官方远程 MCP 服务器路径，桌面版服务器只作对比提及。

本文用一个场景贯穿：小梁拿到一份组件稿，想在终端里让 Claude Code 读取选中 Frame 的结构与样式，再生成贴近设计的前端草稿。

一、远程服务器适合谁

官方远程 MCP 服务器无需安装 Figma 桌面应用：首次连接时在浏览器登录 Figma 即可。客户端需在 Figma MCP 目录支持的列表中，例如 VS Code、Cursor、Claude Code 等。若你主要在 Claude Code 里写代码，优先走远程路径即可。

另有桌面服务器方案：需要桌面应用，且账号一般为 Dev 或 Full 席位。本文不展开桌面安装，需要时请对照官方文档中的桌面章节。

二、推荐：用官方插件安装

面向 Claude Code，文档推荐：

1. 在终端执行插件安装命令：claude plugin install figma@claude-plugins-official；
2. 安装完成后重启 Claude Code；
3. 输入 /plugin，打开 Installed，选中 figma，再走 authenticate，并在授权页选择 Allow access。

插件会附带相关 skills，有助于提高读取设计上下文的稳定性。菜单文案若有改版，以当前界面为准。

三、备选：手动添加 HTTP MCP

若你更习惯手动登记服务器：

1. 执行 claude mcp add --transport http figma，并接上官方文档给出的远程服务器地址（完整地址见文末参考资料）；
2. 可选加上 --scope user，让该 MCP 对你的所有项目生效；
3. 在 Claude Code 中输入 /mcp，选择 figma，再执行 Authenticate 完成登录。

请勿凭记忆拼写地址，直接从官方 Remote server installation 页复制，避免输错路径。

四、把选区链接贴进提示

连接成功后，在 Figma 中右键选中 Frame 或节点，选择 Copy link to selection，把链接粘贴进你给 Claude Code 的提示。这样 MCP 能拿到节点标识，从而拉取该选区的设计上下文，并协助生成代码。远程路径还可以向画布写入，以及借助 capture 工具栏把实机界面送回 Figma（具体按钮以当前客户端为准）。

小梁常见写法是：粘贴选区链接，说明目标框架与组件库约束，再要求先输出结构说明，确认后再生成代码草稿。

五、使用边界

1. 只使用目录中列出的客户端，以免连接方式不受支持；
2. 授权范围按最小必要原则，协作文件先确认自己有权访问；
3. 生成代码后仍要在本地预览与对照设计标注，不要默认一次完美。

常见问题

问：插件装了但 /mcp 里没有 figma？
答：先确认已重启 Claude Code，再在 /plugin 的 Installed 里查看是否启用，并完成 Authenticate。

问：必须装桌面应用吗？
答：远程服务器不需要桌面应用。桌面服务器是另一条路径，需要桌面端与相应席位。

问：为什么读不到我选的组件？
答：确认粘贴的是 Copy link to selection 得到的选区链接，且该文件对你的 Figma 账号可见。

问：skills 是什么？
答：插件会带上官方 skills，用来提高调用设计上下文时的成功率；一般随插件安装即可，无需单独配置复杂脚本。

小贴士

1. 新手优先走插件安装，少一次手写地址出错。
2. 每次换选区就重新复制链接，避免还指向旧节点。
3. 先让模型概括层级与关键样式，再要代码，便于纠偏。
4. 团队规范（间距、色板命名）可写进同一条提示，减少来回改。

参考资料

• Figma Developers：Remote server installation https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
• Figma MCP server overview https://developers.figma.com/docs/figma-mcp-server/

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/qq_28880087/article/details/169851677