FigmaMCP实现代码⇄设计稿实时双向同步（实测）

一、Codex 安装流程(超简单)

主要用Codex APP来给大家演示，因为这种方式装起来是真的丝滑，直接点点点就完事。

安装Figma技能

更新Codex APP到最新版，在“技能”推荐列表里已经内置了Figma技能，点击“+”号直接安装：

[图示已省略]

安装Figma MCP

打开设置，在“MCP服务器”推荐列表里同样已经内置了Figma MCP，点击安装：

[图示已省略]

身份验证

MCP安装完成后会看到“进行身份验证”提示，点击后会打开浏览器登录Figma并授权：

[图示已省略]

进行身份验证

二、Claude Code安装

Claude Code

执行一行命令:

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

想全局生效加个--scope user:

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

启动Claude Code后输入/mcp，选择figma进行身份验证即可。

Codex CLI

codex mcp add figma --url https://mcp.figma.com/mcp

三、实战：代码推送到Figma(太爽了)

为了验证效果，让Codex做了个“项目进度追踪单页面”，直接：“发送到Figma”。 Codex做了什么：自动在代码里插入：

<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async></script>

[图示已省略]

提示

然后启动本地服务，打开浏览器，界面上会出现一个Figma捕获工具栏，有三个按钮:

• Entire screen：推送整个页面
• Select element：选中某个元素单独推送
• Open file：跳转到Figma查看推送的文件

[图示已省略]

点击“Open file”就能在Figma里看到推送的设计稿了：

[图示已省略]

支持选中元素单独推送。

比如我只想推送“Task Board”这个模块，选中后点击一下：

[图示已省略]

Figma里立刻就有了：

[图示已省略]

实战：Figma修改同步回代码(双向)

操作很简单：右键“Task Board”，选择“Copy/Paste as” → “Copy link to selection”：

[图示已省略]

回到Codex，输入“更新UI”加上刚复制的链接：

Codex会调用Figma MCP的get_design_context工具读取修改，然后自动调整代码。

支持选中元素单独推送。

比如我只想推送“Task Board”这个模块，选中后点击一下，Figma里立刻就有了

[图示已省略]

点击“Open file”就能在Figma里看到推送的设计稿了

[图示已省略]

关于调用次数限制

内嵌表格

需要注意的是，generate_figma_design(UI推送)、add_code_connect_map、whoami这几个工具不受速率限制。也就是说推送UI和确认身份这些核心操作不占用配额。