最近在 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）
除非注明，否则均为UIED用户体验学习平台-Moonvy月维的原创文章，转载必须以链接形式标明本文链接
本文链接：https://www.uied.cn/13894.html
