用 Figma 脚本快速生成色谱

最近在 Figma 的交流群里参与了一个公共项目：526 个中国传统颜色-色谱。这个项目主要的工作是根据《中国色》网站的色彩，在 Figma 中为每个颜色创建一个卡片，并创建一个色彩样式，我们几个群友要制作 500 多张卡片，一开始还挺开心，不过做着做着就不堪重负了 ，所以就一起探索了一下如何自动化来完成这些枯燥重复的任务。

昨天在 Figma 社区共享了该文件，做设计时不用过多考虑数据问题，只关注如何让卡片的呈现更好看，这就是自动化提高效率的意义了吧。

文件已在 Figma 社区分享，搜索「色谱」即可复制

---

如何使用自动化脚本完成批量的生成 ？

现在我们就以做「中国传统颜色」色卡的 Figma 素材的的过程当例子来说明

首先，我们需要先打开控制台

• 在 Figma 网页中打开控制 在 Chrome 浏览器的主菜单 -> 更多工具 -> 开发者工具 ，打开开发者工具，定位到Console标签页

fetch("https://raw.githubusercontent.com/Moonvy/FigmaConsoleKit/master/dist/FigmaConsoleKit.js?v1.2.0").then((r) =>
    r.text().then((c) => eval(c))
)

2. 准备 JSON 数据文件

我们手上准备好的 JSON 格式的数据，数据里包含色彩信息和颜色名称等数据。

（下面片段为示例，文章源文里有完整 JSON 数据文件）

let list = [
    {
        CMYK: [62, 42, 56, 34],
        RGB: [94, 102, 91],
        hex: "#5e665b",
        name: "田螺绿",
        pinyin: "tianluolv",
    },
    {
        CMYK: [74, 42, 65, 40],
        RGB: [72, 91, 77],
        hex: "#485b4d",
        name: "白屈菜绿",
        pinyin: "baiqucailv",
    },
    // ......
]

这里就是运行脚本的地方

4. 在 Figma 里运行脚本

一切都准备就绪了，现在我们在 Figma 里选中母组件，然后把 JSON 代码复制到控制台，回车运行；

为了方便不解代码的设计师体验自动脚本的乐趣，我们准备了一个编写好的JSON 文件https://github.com/Moonvy/FigmaConsoleScripts/blob/master/%E4%B8%AD%E5%9B%BD%E4%BC%A0%E7%BB%9F%E8%89%B2%E5%BD%A9.js

运行完成后，我们就会得到一个排列整齐的色谱

这里的步骤介绍的比较简单，想深入了解可以查看原文

---

总结

在 Figma 控制台中使用FigmaConsoleKit来进行自动化操作是非常方便的方式，不像用插件环境需要编译运行非常缓慢还不好调试。编写起来有开发者工具自带的调试功能，无论是查看表达式结果，还是查看数据结构，比使用Scripter插件要更方便。非常推荐有 JavaScript 基础的人使用。

另外对于没有技术基础的设计师来说 Figma 的自动化一般仰赖于成品插件，如果遇到定制化的独特需求就很难办，虽然有像Automator这样的插件但限制比较大。之后我们会探索如何在「表现力」、「功能性」、「简单」上平衡，推出一款面向没有技术基础的用户的设计自动化工具。

如果你对设计也有兴趣和热情，欢迎参与我们的讨论群（添加微信：sixichacha）