颜色和样式分开，这就是在 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 功能，保证作为程序员的你也能看懂