Figma MCP Server 是什么？
Figma MCP Server 是把 Figma 文件中的节点、变量、样式和截图带给编码助手的官方服务。Codex 可以读取真实设计值辅助前端实现，并在支持且已授权的情况下操作画布。
一句话理解读取 Figma 设计上下文、变量和截图，并在受支持方案中创建或修改画布内容。
为什么需要它？
减少只靠截图猜测设计值，让实现可以引用真实节点、变量和组件信息。
接入前，AI 只能依赖你粘贴的材料、截图或旧上下文；接入后，它可以在你授权的范围内调用真实工具，并把结果、来源和状态带回当前任务。
核心能力
读取选区与设计上下文
把真实信息带回当前任务，减少反复复制和手动核对。
获取变量、样式和截图
在明确授权范围内调用工具，并保留执行过程和结果。
远程服务器在授权时支持画布写入
回读来源、状态与限制，方便继续处理和人工验收。
适合谁？怎么用？
- 把 Figma 的真实设计值带进前端实现
- 需要把真实 Figma 文件、设计系统变量和组件关系带入前端实现的设计与开发团队。
- 节点、变量和截图与 Figma 文件一致，代码引用了真实设计值。
- 不适合默认打开所有团队文件或直接改写正式设计系统。
- 可读取未公开设计与设计系统
- 远程写入能力可能改变真实文件
怎么接入？
- 1准备
确认账号与席位满足 Figma MCP 当前要求。
- 2授权
Codex 中登记
https://mcp.figma.com/mcp；Claude Code 可用claude mcp add --transport http figma https://mcp.figma.com/mcp。 - 3连接
完成 Figma OAuth 并选择测试文件。
- 4开始使用
列出工具并读取一个选区的基础信息。
安装命令
添加 Figma MCP Server
codex mcp add figma --url https://mcp.figma.com/mcp添加后完成 Figma OAuth，先在测试文件或副本中读取一个选区。
检查命令
确认 MCP 已经登记
codex mcp list不想自己操作终端时，把下面整段发给 Codex。它会先核对官方说明和前置条件，遇到凭证或占位符会停下来询问。
发给 Codex
自助接入 Figma MCP Server
请帮我在当前电脑上接入并验证 Figma MCP Server。
官方来源：https://github.com/figma/mcp-server-guide
目标接入命令：codex mcp add figma --url https://mcp.figma.com/mcp
请按以下步骤执行：
1. 先阅读官方 README，核对当前推荐接入方式与上述命令。如果官方说明已经变化，先告诉我差异，不要盲目执行旧命令。
2. 检查运行环境、登录状态、Token、项目 ID、允许访问路径等前置条件。不要在输出中显示任何凭证，也不要把凭证写入仓库。
3. 如果命令中有需要替换的占位符，先列出需要我提供的值并停下来，不要自行猜测。
4. 条件满足后执行接入命令，再运行 codex mcp list，确认 Figma MCP Server 已登记，并回报实际服务名、传输方式和检查结果。
5. 用下面这个只读任务验证连接：请用 Figma MCP 读取这个测试文件选区的布局、颜色和间距，并映射到现有 CSS；不要修改画布。
6. 不要创建、修改、删除、发送内容，也不要连接生产环境；需要写权限或更高权限时先征求我确认。- 复制完整指令，发给一个有终端和当前项目访问权限的 Codex 任务。
- Codex 会先核对官方来源和本机环境；遇到 Token、项目 ID、路径或其他占位符时，应停下来向你确认。
- 接入后运行
codex mcp list，再用 Figma MCP Server 的只读首测任务回读结果。
第一次调用示例
登记完成后，新开一个任务，先用下面这句做只读验证，把目标、范围和停止条件一次说清楚。
发给 Codex
第一次只读任务
请用 Figma MCP 读取这个测试文件选区的布局、颜色和间距，并映射到现有 CSS；不要修改画布。怎样算成功
节点、变量和截图与 Figma 文件一致，代码引用了真实设计值。
- 提供具体 Figma 文件或选区。
- 先读取变量、布局和截图，不修改画布。
- 把设计值映射到项目现有组件和令牌。
- 如需写回 Figma，先在副本验证并回读节点。
权限与安全
凭证与连接方式
远程 OAuth；先用测试文件或副本，并限制文件权限。
- 可读取未公开设计与设计系统
- 远程写入能力可能改变真实文件
- 应使用最小文件权限和测试副本，遵守 Figma 开发者条款
