Codex + Figma 完整配置指南

第一部分 下载安装 Codex​

​

代码块​

Plain Text

打开访问 OpenAI Codex 官方下载页：​

h#####://openai.###/zh-Hans-CN/codex/?utm_source=Ai138​

进入页面后，点击下载按钮，选择 Windows 版本。下载完成后：​

双击安装包启动安装程序​

按照安装向导提示，一路下一步​

安装完成后，桌面会出现 Codex 图标​

双击图标，Codex 客户端就启动了。​

​

第二部分 快速上手 Codex​

​

​

​

​

51%

​

​

​

​

49%

​

​

Codex 客户端启动后，会弹出登录界面。这里的操作和 CLI 不同——客户端默认走 OpenAI 账号 OAuth 登录，但中转站用户没有 OpenAI 账号。​

操作步骤如下：​

​

🔔

1.登录你的中转站后台，找到两个关键信息：​

2.API Key：格式为 sk-xxxxxxxxxxxxxxxx​

3.API Base URL：通常是 https://你的中转站域名/v1（注意 /v1 结尾不能丢）​

4.回到 Codex 客户端登录界面​

​

•

找到「使用 API Key 登录」或「自定义 API 端点」选项（不同版本位置可能略有差异）​

•

输入你的 API Key 和 Base URL​

•

点击继续​

登录成功后，Codex 客户端主界面就会出现，说明 API Key 配置正确。​

注意：如果登录失败，先检查 Base URL 结尾是否带了 /v1，再检查 API Key 额度是否充足。​

第三部分 获取 Figma 个人访问​

在配置之前，需要先从 Figma 获取一个个人访问令牌（Personal Access Token）。​

详细步骤如下：​

​

🔔

1.打开浏览器，访问 figma 并登录你的 Figma 账号​

2.点击页面右上角的头像​

​

​

​

​

🔔

在 Security 页面中，找到 Personal access tokens（个人访问令牌）区域​

点击 Generate new token（生成新令牌）按钮​

在弹出的对话框中：​

•

给令牌命名（比如 codex-figma，便于以后识别用途）​

•

点击 Generate token​

​

令牌生成后，立即复制保存​

​

注意：Figma 只会显示这一次完整令牌，关闭对话框后无法再次查看。令牌格式类似 figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx，大约 40 个字符。​

​

妥善保管这个令牌，后面会用到​

第四部分 在 Codex 客户端配置 Figma ​

现在回到 Codex 客户端，开始配置 MCP 服务器连接。​

​

​

4.1 进入 MCP 配置页面​

打开 Codex 客户端主界面，点击左下角或右上角的设置图标（齿轮形状），在设置菜单中找到「MCP 服务器连接」或「MCP Servers」选项，点击进入。​

4.2 新建 MCP 服务器​

在 MCP 服务器连接页面，点击「新建服务器」或「Add Server」按钮。​

4.3 填写配置参数​

按以下参数逐项填写：​

名称：figma-remote（随意填写）​

协议：流式 HTTP（Streamable HTTP）（不要选其他协议）​

URL：https://mcp.figma.com/mcp​

（注意：是 mcp.figma.com，不能少写 .com，否则会访问失败）​

​

Bearer 令牌环境变量：把默认填入的 MCP_BEARER_TOKEN 删掉，留空​

标头（Headers）：点击添加标头，填写两个字段：​

key：Authorization​

value：Bearer figd_你的完整个人令牌​

​

重点注意：Bearer 后面有一个空格，然后是完整的 figd_xxx 令牌​

•令牌要完整输入，不能有省略号，不能有省略​

•示例格式：Bearer figd_a1b2c3d4e5f6g7h8i9j0klmnopqrstuv​

​

来自环境变量的标头：保持留空，不填任何内容​

​

【图3：Codex MCP新增服务器配置页｜画面：MCP配置表单，标注名称、协议、URL、Headers授权填写位置】​

如果按照上面配置后续没有打通链路就换下面这个配置：​

​

4.4 保存并等待自动配置​

参数填写完毕后，点击「保存」按钮。Codex 会自动进行配置，稍等片刻。​

配置成功后，Codex 会弹出身份验证提示，按照提示完成身份验证。​

​

4.5 初次连接测试​

身份验证完成后，Codex 会尝试连接 Figma MCP Server。此时很大概率会连通失败，这是正常的——因为通过中转站 API Key 登录的 Codex，不具备自动获取系统环境变量 FIGMA_OAUTH_TOKEN 的能力。​

​

第五部分 配置 FIGMA_OAUTH_TOKEN 环境变量​

连接失败的原因就是缺少 FIGMA_OAUTH_TOKEN 环境变量。下面在 Windows 系统中手动配置。​

​

5.1 Windows 系统（已实测）​

方法一：搜索直达（推荐）​

第一步：按下键盘 Win + S 键，在搜索框中输入：环境变量​

第二步：在搜索结果中，点击「编辑系统环境变量」​

第三步：弹出「系统属性」窗口，点击右下角的「环境变量」按钮​

​

方法二：从此电脑进入​

第一步：桌面右键「此电脑」→ 点击「属性」​

第二步：在左侧菜单中点击「高级系统设置」​

第三步：点击右下角「环境变量」按钮​

​

5.2 新建用户变量​

进入环境变量窗口后：​

1.在上半部分「用户变量」区域，点击「新建」按钮​

​

【图4：Windows新建用户变量弹窗｜画面：新建用户变量弹窗，变量名：FIGMA_OAUTH_TOKEN，变量值填写figd_开头密钥】​

1.在弹出的对话框中填写：​

2.变量名：FIGMA_OAUTH_TOKEN​

3.变量值：figd_你的完整个人令牌​

4.注意：这里只填纯令牌字符串，不要加 Bearer 前缀。​

5.示例：figd_a1b2c3d4e5f6g7h8i9j0klmnopqrstuv​

6.而不是：Bearer figd_a1b2c3d4e5f6g7h8i9j0klmnopqrstuv​

​

5.3 保存并生效​

三个确定，一个都不能少：​

1.点击「新建用户变量」对话框的「确定」​

2.点击「环境变量」窗口的「确定」​

3.点击「系统属性」窗口的「确定」​

​

5.4 重启 Codex​

完全关闭 Codex 客户端，再重新打开。​

这一步不能省略——Codex 只有在启动时才会读取环境变量，不重启不会生效。​

​

5.5 永久生效校验（可选但推荐）​

关闭所有终端窗口（CMD、PowerShell），重新打开任意终端，输入以下命令：​

echo %FIGMA_OAUTH_TOKEN%​

如果输出你的完整令牌，说明环境变量已永久生效。如果没有输出，说明配置过程有遗漏，返回前面的步骤检查。​

​

第六部分 启动 Codex 测试连接​

环境变量配置完成并重启 Codex 后，回到 MCP 服务器连接页面。测试方法：在 Codex 对话中输入一个 Figma 设计稿链接，例如：​

>请使用已配置的 Figma MCP（你自己mcp服务器配置的名字），读取这个文件的基础信息：[你的 Figma 文件链接]​

​

如果 Codex 能够读取设计稿信息并生成代码，说明整个配置链路完全打通。​

​

⚠️注意：如果更换一个聊天对话框之后，又无法在链接figma之后（❌提醒failed to connect to running Pencil app: transport not connected to app）这个时候关闭codex服务，重启codex，在对话框输入 请使用已配置的 Figma MCP（你自己mcp服务器配置的名字），读取这个文件的基础信息：​

[你的 Figma 文件链接] 进行链接测试，通过了就在对话里面使用，这是用中转站的弊端。​

​

以下为 Mac 系统的环境变量配置方法，供参考（未实测）。​

第一步：编辑环境变量文件​

打开终端，执行：​

open ~/.zshrc​

如果提示文件不存在，则执行：​

open ~/.bash_profile​

​

第二步：在文件末尾添加​

export FIGMA_OAUTH_TOKEN=“figd_你的完整令牌”​

注意：加了双引号包裹令牌。​

​

第三步：保存并使配置生效​

source ~/.zshrc​

或​

source ~/.bash_profile​

​

第四步：校验是否生效​

echo $FIGMA_OAUTH_TOKEN​

输出令牌即表示配置成功。​

​

结尾​

整个配置链路的难点就两处：一是中转站 API Key 登录时的 Base URL 配置，二是 Figma MCP Server 打通时需要手动设置系统环境变量。​

这两处绕过之后，剩下就是等 Figma MCP 把你的设计稿转成结构化数据，Codex 再据此生成代码。​

​

​

​