Codex 桌面端如何链接Figma MCP 服务器拿到 Figma设计稿精准尺寸等结构化数据来精准还原UI

烈焰晴天2026-06-16 16:36

1、下载Codex Agent 工具

2、通过自己的个人ChatGPT 账号，登录进入Codex 桌面端

3、注意：不要使用左侧插件中 Figma Skills 这种链路来作为Codex 链接Figma MCP 服务的方式

4、mac 下执行 open ~/.codex 找到 config.toml 进行如下配置

py 复制代码

	[mcp_servers.figma]
	command = "npx"
	args = ["-y", "figma-developer-mcp", "--stdio"]
	[mcp_servers.figma.env]
	FIGMA_API_KEY = "figd_YFxQ8Wkg2yf4o5UHwspwgTitIAXzUH5lLDQAjOMx"

主要是这个FIGMA_API_KEY 怎么获取，前提是登录的账号必须处于只读状态（can view）下的开发模式（就是鼠标移动上去，就会显示尺寸、样式等信息），而不仅仅是只读。你当然也可以申请编辑权限，但是公司一般都不会让你登录自己的Figma账号，只会给开发者个人只读权限(can view)，你可以用公司统一Figma账号登录，⚠️ 登录的账号-必须是只读权限并且处于开发模式

如下图，这种才是处于开发模式，Figma 设计稿底下放可查看，如果仅仅是只读会显示仅查看

**然后点击Figma左上角帮助和账号->账户设置->安全->个人访问令牌选择 $codex-figma-mcp$ 生成（PAT）【Personal Access Token】，然后放到FIGMA_API_KEY中，这样重启Codex ,就可以让Codex连接到Figma MCP 服务器，从而使Codex 拿到 Figma get_design_context 上下文，调用Figma Rest API 请求获取的，他会用到token 就是你上边配置的FIGMA_API_KEY **

最后判断验证 Codex 是否连接 Figma MCP 服务器成功直接在Codex 中进行询问即可，比如

以上代表着就成功了。

解析来让其尝试解析下该Figma 设计稿，右键选择

这个就可以生成UI了，比如让他分析下上述画面样式尺寸等信息：它很快就分析出来了。

Codex 桌面端如何链接Figma MCP 服务器拿到 Figma设计稿精准尺寸等结构化数据 来精准还原UI

1、 下载Codex Agent 工具