顏色和樣式分開，這就是在 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 功能，保證作為程序員的你也能看懂