用Codex开发Figma插件：设计师零代码入门指南

作为设计师，你是否曾想过为Figma开发一个专属插件来解决日常工作中的重复操作？借助OpenAI的Codex，这件事变得前所未有的简单。B站UP主「新像素」的草帽老师通过一个实际案例——批量添加AutoLayout插件，完整演示了从项目创建到插件上架的全流程。本文将系统梳理这套工作流中的关键要点和实用技巧。

理解Codex的项目管理逻辑

与ChatGPT的纯对话模式不同，Codex采用项目（文件夹）+ 对话框的组织方式。每个项目对应一个本地文件夹，项目内可以创建多个对话窗口。这意味着你需要先规划好文件结构。

OpenAI Codex 是 OpenAI 在 2025 年推出的云端软件工程代理，它与 ChatGPT 最大的区别在于：ChatGPT 是一个通用对话助手，而 Codex 专门面向代码开发场景，内置了文件系统感知、终端命令执行和代码版本管理等能力。它运行在一个沙盒化的云环境中，能够直接读写本地项目文件夹中的代码文件，并在隔离环境中执行命令。这种"项目+对话"的组织方式本质上模拟了专业开发者使用 IDE（集成开发环境）的工作习惯——每个项目有独立的工作区，对话窗口则相当于与一位 AI 结对编程伙伴的沟通频道。

草帽老师推荐的做法是：在桌面创建一个总的代码文件夹，按需求分类建立子文件夹（如Figma插件、脚本工具等），然后将文件夹拖入Codex左侧面板即可关联项目。需要注意的是，右侧聊天窗口会显示当前关联的项目，务必确认选择正确，否则代码会写到错误的位置。

一个实用的个人习惯是：创建一个名为「CodeDraft」的文件夹，专门存放各种临时的、不相关的小需求，类似于Figma中的「个人草稿」概念。虽然Codex也支持「不使用项目」的临时对话模式，但独立文件夹更便于管理和查找。

额度管理与权限设置

额度机制

Codex的额度机制比较特殊：没有明确的月额度，而是按周分配，再拆分为每5小时一个使用窗口。每5小时的消耗从周额度中扣除，用完需等待下一个5小时窗口刷新。即便有这个限制，高频使用者通常两三天就能耗尽一周额度。

说个细节，近期低价区（如土耳其区）已从80涨至约110，涨幅约30元。对于使用频率较高的用户来说，额度确实捉襟见肘。

权限设置的三个档位

权限设置是Codex使用中非常关键的一环，共有三个级别：

• 受限模式（默认）：每执行一个命令都会请求确认，安全但极其繁琐
• 中等模式：仅在涉及风险操作时请求确认，日常使用较为流畅
• 完全访问权限：不会请求任何确认，效率最高但风险也最大

完全访问权限意味着Codex可以操控电脑上的任何文件，理论上它能删除系统文件。这里的风险本质上与授予任何程序管理员权限类似——当 AI 代理拥有不受限的文件系统和终端访问权限时，一条措辞模糊的指令可能被解读为破坏性操作。草帽老师的建议是：如果选择完全访问，描述需求时一定要精确，避免模糊表述导致误操作。

从需求梳理到计划模式

先想清楚再动手

以批量添加AutoLayout插件为例，在与Codex对话之前，你需要自己走一遍使用场景：

• 选中多个元素后添加AutoLayout，默认间距是多少？
• 是否需要输入框让用户自定义间距？
• 宽高属性默认用Hug还是Fill？
• 如果选中的元素已经有AutoLayout框，是跳过还是再包一层？

这里有必要解释一下 AutoLayout 的核心概念。AutoLayout 是 Figma 中最核心的布局功能之一，它借鉴了前端开发中 CSS Flexbox 的理念。启用 AutoLayout 后，容器内的子元素会按照设定的方向（水平或垂直）自动排列，并可以统一控制间距（spacing）、内边距（padding）、对齐方式等属性。其中 Hug 表示容器尺寸由内容撑开，类似于 CSS 中的 fit-content；Fill 则表示子元素填满父容器的可用空间，类似于 flex-grow。对于设计师而言，批量为多个元素添加 AutoLayout 是一个高频但重复的操作，尤其在构建设计系统或整理大量组件时，手动逐个添加非常耗时——这正是开发这个插件的动机所在。

哪怕只是用纸笔画个草稿，也能帮你理清插件界面的基本结构。

善用语音输入工具

草帽老师强烈推荐使用Typeless进行语音转文字输入。原因很实际：与AI对话时上下文越详细越好，但打字太累。Typeless的优势在于中英文混合识别非常准确，还能自动整理语句逻辑，免费版每周有8000字额度，日常使用完全够用。

计划模式的正确用法

Codex的**计划模式（Plan Mode）**是一个非常重要的功能。开启后，Codex不会直接写代码，而是先分析需求、拆分步骤、确认技术方案，通过一系列问答来完善执行计划。

计划模式体现了当前 AI 编程领域的一个重要范式——"先推理后执行"。这与软件工程中的"先设计后编码"原则一脉相承。在计划模式下，Codex 会调用推理能力更强的大模型（如 o3 级别）来进行需求分析和架构设计，生成一份结构化的执行计划。这个过程类似于资深开发者在写代码前先画架构图、写技术方案。切换到编码阶段后使用较轻量的模型，是因为代码生成本身对推理深度的要求相对较低，更多是模式匹配和语法填充，这样可以在保证质量的同时显著降低 token 消耗。

关键技巧：计划阶段使用「超高」模型以获得更强的思考能力，正式编码阶段可以切换到「中等」或「高」模型以节省额度。执行代码前，记得关闭计划模式的勾选，否则它会继续停留在规划阶段。

此外，主动提供参考资料能显著提升输出质量。比如将Figma插件开发文档的链接直接粘贴给Codex，让它在编码时有据可依。

实战：两分半完成Figma插件开发

计划确认无误后点击执行，Codex会自动创建项目结构、编写代码文件。整个过程大约两分半钟即可完成。它会自动识别Figma本地插件需要的manifest.json等配置文件，并调用AutoLayout相关的API。

关于 Figma 插件的技术架构，有必要做一些补充说明。Figma 插件基于 Web 技术栈开发，主要使用 TypeScript 或 JavaScript 编写。每个插件项目至少包含一个 manifest.json 配置文件（声明插件名称、入口文件、权限等元信息）和一个主逻辑文件。如果插件需要用户界面（UI），还会包含一个 HTML 文件。Figma 的插件架构采用双线程模型：主线程（sandbox）可以访问 Figma 的文档 API 来读写设计数据，UI 线程则运行在一个 iframe 中负责界面渲染，两者通过 postMessage 进行通信。这种架构设计保证了插件不会直接影响 Figma 编辑器的性能和安全性。理解这些背景知识，有助于你在与 Codex 对话时更精确地描述需求，比如明确指出"在主线程中遍历选中节点并设置 AutoLayout 属性"。

插件导入Figma的步骤也很简单：右键画布 → 插件 → 开发 → 导入本地插件 → 选择项目文件夹中的manifest.json文件。

实测效果：批量选中多个元素后运行插件，每个元素都被独立包裹了AutoLayout框，宽高默认为Hug，间距默认为8，基本功能完全符合预期。不过也出现了小问题——原本要求padding只显示两个输入框（左右、上下），实际生成了四个，需要后续迭代修正。这类细节偏差在 AI 编码中非常常见，通常只需在后续对话中明确指出问题，Codex 就能快速修复。

进阶技巧与长期维护

对话管理

单次对话过长会导致AI「失忆」且消耗更多token。这是因为大语言模型有上下文窗口（context window）的限制——当对话内容超过模型能处理的最大 token 数时，早期的对话内容会被截断，导致 AI 丢失之前讨论过的需求细节和技术决策。建议在需要开启新对话时，右键复制上一个对话的ID，在新窗口中粘贴并说明「根据该聊天窗口的上下文继续」，即可实现对话接力。

Git版本备份

养成让Codex为项目添加Git版本控制的习惯。Git 是目前全球最主流的分布式版本控制系统，它的核心价值在于记录文件的每一次变更历史，允许开发者随时回退到任意历史版本。对于非程序员来说，可以将 Git 理解为一个"无限撤销"系统——每次提交（commit）就像给项目拍一张快照，任何时候都可以回到之前的任意快照状态。在 AI 辅助编码的场景下，Git 尤为重要，因为 AI 生成的代码可能存在不可预期的问题，有了版本记录就能安全地进行试错。

每次重大修改前说一句「做一个备份，然后开始下一个修改」，这样可以随时回退到任意历史版本，避免改坏了无法恢复的尴尬。

利用Skill提升效率

可以让Codex帮你搜索GitHub上成熟的Figma插件开发相关Skill（技能包），比如插件界面样式的Skill。找到合适的Skill后，直接让Codex安装到当前项目即可，省去了手动配置的麻烦。

Codex 中的 Skill（技能包）是一种可复用的指令集或配置模板，通常以 Markdown 文件的形式存在于项目中。它类似于给 AI 预设的"专业知识手册"——当你安装一个 Figma 插件开发相关的 Skill 后，Codex 在编码时会自动参考其中的最佳实践、代码规范和常用模式。GitHub 社区中已经积累了大量开源 Skill，覆盖前端开发、API 设计、UI 组件库等多个领域。这种机制的本质是通过结构化的上下文注入来提升 AI 的输出质量，避免每次对话都要从零开始描述技术约束和偏好。

插件上架Figma社区

开发完成后，可以直接问Codex如何打包、上架到Figma社区，包括图标尺寸要求、描述填写规范等，它都能给出详细指导。Figma 社区的插件审核流程通常需要几个工作日，审核标准主要关注插件的功能完整性、安全性以及是否违反社区准则。上架后，全球的 Figma 用户都可以搜索并安装你的插件，这也是设计师建立个人技术品牌的一种有效方式。

总结

Codex为设计师打开了一扇通往插件开发的大门。核心工作流可以概括为：梳理需求 → 计划模式确认方案 → 执行编码 → 测试迭代 → 上架发布。整个过程中，设计师不需要具备编程能力，但需要清晰地表达需求、理解基本的项目管理逻辑。正如草帽老师所说，这个东西「真的上瘾」，因为它确实能解决具体的、个性化的工作需求。

核心要点