手把手教你用Codex做Figma插件

本文同步发布在公众号《三秋十李Sergio》，接收推送，体验更佳。

使用 Figma 的朋友应该都经历过——Figma 中有些重复操作真的很烦，这个时候你可能会想要是有个插件帮我搞就好了，然后你打开插件搜索框，结果要不然是搜不到，要不然是功能不对，好不容易搜到了，打开一看，每月20刀。于是不服输的你想要尝试自己写插件，打开搜索引擎一搜索发现要学 TypeScript、配开发环境、看 Figma API 文档……最后还是默默关掉了页面。

我之前也是这样。但现在有了 AI，那就不一样了，我们完全可以借助 AI 帮我们写出专属于我们的 Figma 插件大大提高工作效率，那本期视频就来分享我是如何使用 codex 来快速开发 figma 插件，把原本可能需要半天的工作在几分钟内就做完

大家好，这里是三秋十李，事情是这样的，最近我们开发了一款 App 叫专注冰箱，

这个 app 中有很多的插画，都是我使用 Figma 手绘的，但画完之后，我们决定改变画风，于是我想要使用 Figma 中的画笔工具来修改成手绘画风，这个时候麻烦来了，每一次修改要点十几下，太慢了，这时我就想开发一个插件来帮我快速做完，现在我只需要，选中所有需要修改的层，点击下面的按钮，一键就可以全部转换，非常非常节省效率

那话不多说，我们立刻开始教程。
想要制作自己的插件，我们需要准备以下内容：
首先是 Codex，官网是：
https://openai.com/zh-Hans-CN/codex/
。关于 Codex 的安装网上已经有太多的教程，我这里就不讲了

其次是 Figma 客户端，我们需要使用客户端来调试你的插件，必须是客户端，网页版是不行的，你可以在 Figma 的官网找到下载地址 https://www.figma.com/downloads/。

安装好之后，随便打开一个 Figma 设计文件，在下方点开 Action 面板，切换到插件 tab，一直滚动到最下方，看到有一个新建插件或者小组件的功能，我们这里以插件为例。

点击之后需要选择插件类型，FIgma 的插件首先分为通用插件和 Figma 设计单独的插件。

通用的插件，可在 Figma design、Figjam、Figma Buzz 和 Figma Slides 上使用。而 Figma 设计版就只能在 Figma Design 中去使用。选好你想要的 Figma 插件类型之后，就进入到了下一步。

在 Figma 中插件分为两种，

一种是即用即走的，它压根没有任何的界面。输入命令，它就运行，然后就结束就像我开发的自动排序插件。
这种插件你还可以在 figma 的命令行中去添加一些参数。比如这个插件，你可以用它快速填充父级，并且按 tab 可以设置距离父级的外边距。输入完回车。就运行了。

那另外一种是带有界面的、复杂的，大家更常见到的插件就是这种。那我这一次就是做的这种，
你可以直接在 Figma 中去选择对应的预设，输入名称，保存到本地文件夹，这样就创建了一个插件代码模板。
或者呢，现在 AI 已经很聪明了，你其实直接给它一个空的文件夹，让它在里边开始干活也是可以的。比如我这里就是直接给它干活了。我在 Codex 里面直接输入了这段提示。告诉他我的需求，问 AI 是否懂你，有问题就问你，

描述不清楚也没关系，你可以按这里的加号或者输入斜杠/打开计划模式，这样 Codex 会先返回给你一段实现计划，如果你有疑问或者他说的不对，你可以继续向他明确需求，一直到没有问题就直接点击实施计划让他开干，

等他做完，我们就可以把插件安装到 Figma 中进行调试了，如果你刚刚是通过 Figma 面板来创建的代码目录，那么你的 Figma 中直接就会有这个插件，点击就可以运行，如果你是直接让 AI 帮你写的，那么我们打开 Figma，在之前的创建插件的下方可以看到 Import from manifest，点击之后，找到你刚刚保存的代码目录中的 manifest 这个文件，点击打开，就可以把插件加载到 Figma 中了，

这个时候，我们就可以来测试一下插件是否管用，

如果有出现什么问题的话，我们可以复制弹出的提示，或者按 comand Option i Windows 应该是 ctrl alt i，复制 Console 面板中输出的提示，发给 AI 就可以帮你修复啦，之后重新验证即可。

有的时候可能代码没有实时在 Figma 中更新，这个时候你可以移除插件，再重新导入插件来测试，或者问 AI 如何实时预览热更新，他会给你添加对应的功能，这样可以实时预览新的更改。

这样我们就完成了属于你自己的插件。你可以就这么一直用着，如果你觉得你的插件真的是太棒了，自己一个人用太暴殄天物，那你还可以点击这里的发布，输入一些信息提交之后，等待 Figma 审核，就可以把你的插件发布到 Figma 社区啦。

很多设计师入行的时候，都会觉得「写代码」是一道设计师跨不过去的鸿沟。但现在这道鸿沟被 AI 给填上了。

如果你觉得这期对你有启发，欢迎给我一个点赞收藏一键三连，最好再给我点一个大大的关注，这对我非常重要。
那我们，下期再见。
我的 Figma 主页：figma.com/ @lgy