将 Figma 接入 Codex MCP：从 `/plugins` 到本地插件配置的完整教程

本文记录一次在 Windows 本机把 Figma 接入 Codex 的实操流程。目标是让 Codex 可以在 /plugins 中搜索到 Figma，并为后续通过 Figma Dev Mode MCP 获取设计上下文做好准备。

一、背景

现在很多前端开发流程都希望把「设计稿」和「编码代理」连接起来：

• 设计师在 Figma 中维护页面和组件；
• 开发者在 Codex 中实现 React、Vue 或其他前端代码；
• Codex 通过插件或 MCP 获取 Figma 设计上下文，减少纯靠截图和口头描述带来的偏差。

这篇文章会介绍两条路径：

1. 优先使用 Codex App 里的官方 Figma 插件入口；
2. 使用 plugin-creator 创建本地 figma 插件条目，让 /plugins 可以搜索和安装。

注意：如果你的 Codex 插件列表里已经能搜索到官方 Figma，优先安装官方插件。不要随便安装来源不明的第三方 Figma MCP 包。

二、准备环境

本文环境如下：

工具	说明
Windows	本机开发环境
Codex App	用于运行编码代理
Figma	建议开启 Dev Mode 相关能力
plugin-creator	Codex 本地插件脚手架技能
Python	用于运行插件脚手架脚本

本机已有的 plugin-creator 技能路径示例：

C:\Users\Lenovo\.codex\skills\.system\plugin-creator\SKILL.md

三、优先尝试官方 Figma 插件

在 Codex App 输入框中运行：

/plugins

然后：

1. 搜索 Figma;
2. 选中 Figma 条目；
3. 按 Enter 安装；
4. 根据界面提示完成授权。

如果你的插件目录里能看到官方 Figma 条目，这就是推荐方式。

我在本机缓存里看到官方目录中存在 Figma 连接器，名称类似：

{
  "name": "Figma",
  "description": "Turn code into editable design"
}

如果搜索不到，或者想学习本地插件如何注册，可以继续看下面的本地插件方式。

四、使用 plugin-creator 创建本地 Figma 插件

plugin-creator 的作用是帮我们生成 Codex 可识别的插件目录，并把插件写入个人 marketplace。

标准目标目录如下：

C:\Users\Lenovo\plugins\figma
C:\Users\Lenovo\.agents\plugins\marketplace.json

运行脚手架命令：

cd C:\Users\Lenovo\.codex\skills\.system\plugin-creator

C:\Users\Lenovo\.cache\codex-runtimes\codex-primary-runtime\dependencies\python\python.exe `
  scripts\create_basic_plugin.py figma --with-marketplace --with-mcp --force

命令执行成功后，会看到类似输出：

Created plugin scaffold: C:\Users\Lenovo\plugins\figma
plugin manifest: C:\Users\Lenovo\plugins\figma\.codex-plugin\plugin.json
marketplace manifest: C:\Users\Lenovo\.agents\plugins\marketplace.json

这里几个参数的含义：

参数	作用
figma	插件名称，最终会规范化成小写的 figma
--with-marketplace	写入个人插件市场，让 /plugins 可以搜索到
--with-mcp	创建 .mcp.json，为 MCP server 配置预留位置
--force	覆盖已有同名插件，重复实验时使用

五、插件 manifest 配置

插件主配置文件在：

C:\Users\Lenovo\plugins\figma\.codex-plugin\plugin.json

可以整理成下面这样：

{
  "name": "figma",
  "version": "0.1.0",
  "description": "Use Figma design context with Codex.",
  "author": {
    "name": "Local developer"
  },
  "homepage": "https://www.figma.com/",
  "keywords": [
    "figma",
    "design",
    "mcp"
  ],
  "skills": "./skills/",
  "interface": {
    "displayName": "Figma",
    "shortDescription": "Bring Figma design context into Codex.",
    "longDescription": "Figma adds a local Codex plugin entry for design-to-code workflows. Use it with Figma's official Codex integration from /plugins or connect a local Figma MCP server when available.",
    "developerName": "Local developer",
    "category": "Productivity",
    "capabilities": [
      "Design",
      "MCP"
    ],
    "websiteURL": "https://www.figma.com/",
    "defaultPrompt": [
      "Use Figma context to help implement this UI.",
      "Compare this screen with the Figma design.",
      "Turn the selected Figma frame into React code."
    ],
    "brandColor": "#A259FF"
  },
  "mcpServers": "./.mcp.json"
}

这里要注意：

• name 必须和插件目录名一致；
• version 使用标准 semver，例如 0.1.0；
• mcpServers 只有在真实存在 .mcp.json 时再写；
• 不要在 manifest 里写脚手架不支持的字段，否则校验会失败。

六、Marketplace 配置

个人插件市场配置在：

C:\Users\Lenovo\.agents\plugins\marketplace.json

生成后的内容类似：

{
  "name": "personal",
  "interface": {
    "displayName": "Personal"
  },
  "plugins": [
    {
      "name": "figma",
      "source": {
        "source": "local",
        "path": "./plugins/figma"
      },
      "policy": {
        "installation": "AVAILABLE",
        "authentication": "ON_INSTALL"
      },
      "category": "Productivity"
    }
  ]
}

重点是：

• source.path 使用 ./plugins/figma；
• 对个人 marketplace 来说，它会解析到 C:\Users\Lenovo\plugins\figma；
• policy.installation 为 AVAILABLE 后，插件可以在 /plugins 中安装；
• policy.authentication 为 ON_INSTALL 表示安装时处理授权。

七、MCP 配置如何处理

脚手架会生成：

C:\Users\Lenovo\plugins\figma\.mcp.json

默认内容是：

{
  "mcpServers": {}
}

我这里没有直接写第三方 MCP server 启动命令，原因是：

1. Figma 推荐优先使用官方集成或官方 Dev Mode MCP 能力；
2. 第三方 MCP 包需要额外安装和信任；
3. MCP server 具备读取上下文、调用工具的能力，不应该随便接入未知来源命令。

如果你已经确认本机 Figma 官方 MCP server 的地址或启动方式，可以再把对应配置写入 .mcp.json。在没有确认之前，保留空配置更稳妥。

八、校验插件

写完配置后，运行校验：

cd C:\Users\Lenovo\.codex\skills\.system\plugin-creator

C:\Users\Lenovo\.cache\codex-runtimes\codex-primary-runtime\dependencies\python\python.exe `
  scripts\validate_plugin.py C:\Users\Lenovo\plugins\figma

成功时会输出：

Plugin validation passed: C:\Users\Lenovo\plugins\figma

这表示插件结构和 manifest 基本符合 Codex 插件规范。

九、在 Codex 中安装

回到 Codex App，输入：

/plugins

然后：

1. 搜索 Figma 或 figma;
2. 找到本地插件条目；
3. 按 Enter 安装；
4. 新开一个 Codex 线程或刷新当前环境，让插件配置生效。

如果同时存在官方 Figma 和本地 figma 条目，建议优先选官方 Figma。

十、常见问题

1. /plugins 搜不到 figma

检查个人 marketplace 是否存在：

Test-Path C:\Users\Lenovo\.agents\plugins\marketplace.json

检查插件目录是否存在：

Test-Path C:\Users\Lenovo\plugins\figma

再检查 marketplace.json 中是否有：

{
  "name": "figma",
  "source": {
    "source": "local",
    "path": "./plugins/figma"
  }
}

2. 插件校验失败

优先检查：

• plugin.json 是否是合法 JSON；
• version 是否是 0.1.0 这种 semver；
• name 是否和目录名一致；
• mcpServers 指向的 .mcp.json 是否真实存在；
• 是否误写了当前 schema 不支持的字段。

3. 需要直接连接 Figma 设计稿怎么办

优先路径：

1. 安装 Codex /plugins 里的官方 Figma；
2. 在 Figma 中确认 Dev Mode / MCP 能力已开启；
3. 按官方提示完成授权；
4. 在 Codex 中要求它读取或对齐 Figma 设计上下文。

本地插件只是把入口注册到 Codex，不等于已经拿到了 Figma 私有文件权限。真正访问设计稿通常还需要 Figma 侧授权或本地 MCP server。

十一、安全建议

Figma 设计稿可能包含产品原型、客户信息、内部业务流程等敏感内容。接入 Codex 或 MCP 时建议：

• 优先使用官方插件或官方 MCP；
• 不要随便运行未知来源的 npx xxx-figma-mcp；
• 不要把 Figma Token 写进公开仓库；
• 不要在文章截图中暴露真实项目链接、Token、客户名称；
• 企业环境下先确认公司安全策略允许使用外部编码代理读取设计稿。

十二、总结

这次接入的核心流程是：

plugin-creator 创建 figma 插件
        ↓
写入个人 marketplace
        ↓
整理 plugin.json 展示信息
        ↓
保留 .mcp.json 作为 MCP 配置入口
        ↓
运行 validate_plugin.py 校验
        ↓
在 Codex 里运行 /plugins 搜索 Figma 并安装

如果只是日常使用，推荐直接走 Codex App 的官方 Figma 插件；如果要学习 Codex 插件机制，或者需要注册自己的内部 Figma 工作流入口，就可以按本文方式创建本地 figma 插件。