颜色和样式分开，这就是在 figma 中管理色彩的底层逻辑
关键在于分开
第一步！色彩池怎么获取：#
用算法生成梯度色彩内容：
推荐工具：
在线：https://arco.design/palette/list
开源：https://github.com/arco-design/color/tree/main
根据品牌色进行色彩的选择，点击右上角的添加色板，就可以创建新的颜色了
（还可以试试谷歌 M3 方法大同小异，网址：https://m3.material.io/styles/color/system/overview）
第二步！色彩池怎么导入 figma？#
figma 打开社区，搜索：Design Tokens Manager
或者直接点击对应连接：https://www.figma.com/community/plugin/1263743870981744253/design-tokens-manager
新建一个 Google Sheet
我创建的：
https://docs.google.com/spreadsheets/d/197IeXYZS4Oe3Y_ZZtR6J99kHZwQoojBsUsQQgT-UuXo/edit?gid=143372084#gid=143372084
把你要进行导入的 Token 进行粘贴：
导入后的效果：
注意，这个时候，google sheet 底部的 Sheet name 对应的是 figma 中 Collection 的名称，而左侧的分组对应的是表格中 $Name 内部的分组，light 与 dark 的对应我就不多介绍了，总之是一一对应的关系
第三步！如何将二级色与第一步的色彩池进行连接？#
1. 找到你的当前色彩运用 Collection 然后对 light 内的色彩进行选择，再然后，找到我们刚刚添加进来的 “Color” 进行选择，这个时候你不管选择什么颜色，都是可以的（以后只能在 “Color” 这个 Collection 中进行选择）
第四步！将结构化的样式在 figma 中建立起来#
这里是细节：
这里是我自己的整体框架：
（参考参考意思得了，自己找个思维导图画一下很简单）
此时，4 步走完，你就获得了一个色彩色值与最终运用的样式分开的 figma 设计系统中 Color 部分的样式库
下一次教你 Text 、 Spacing、Shadow 等等一堆小玩意怎么用一列进行管理，大大提高你设计系统的效率
或者聊聊 Figma org 版本的 Branch 功能，保证作为程序员的你也能看懂