Figma 中國傳統色：Variables、Tokens 與 HEX 色板

Figma 中國傳統色真正有價值的地方，不是把色塊截圖放進畫板，而是把色彩轉成變量系統。設計團隊需要從 567 個傳統色名進入 primitive variables、語義角色、模式、可導出的 tokens，以及開發者不用重新抄 HEX 的交付路徑。

為什么 Figma Variables 不能只是色卡列表

一個 Figma 色彩文件是否好用，取決於每個色塊是否有穩定命名、明確角色和足夠文化語境。隨機中國色 moodboard 看起來可以，但一旦進入組件、變體、tokens 和開發交付，就很容易失控。

Chinese Color Atlas 把發現和生產分開：網站適合查看色名、HEX、來源狀態和配色故事；Complete Design Pack 則適合團隊批量使用 Figma Variables、CSS variables、Tailwind tokens、ASE、Procreate 和 JSON 文件。

為品牌、深色 UI 和活動視覺建立 modes

Figma modes 很適合按場景拆分調色板。國潮活動可以用朱紅、金、墨、月白；宋式界面可以用天水碧、月白、緗色、墨灰；敦煌方向可以用礦物藍綠、赭色、朱砂、沙色和墨色。

不要做一個所有顏色都能到處使用的巨大 mode。5 到 12 個有明確角色的 mode 更容易被設計師正確使用，也更容易被工程師映射到 CSS 或 Tailwind tokens。

從 Figma Variables 到開發交付

交付不應停在 Figma。開發者需要穩定 token 名、HEX 值和可預測格式。把 Figma Variables 與 CSS 自定義屬性、Tailwind theme entries、W3C DTCG JSON 配套，才能讓同一套中國色從設計稿進入生產代碼。

如果團隊只需要網頁 tokens，CSS 與 Tailwind Token 包更聚焦；如果設計師還需要 Figma Variables、Procreate 色板、ASE、AI prompts、乾隆色譜、敦煌色和節氣色板，Complete Design Pack 是最直接的轉化路徑。

FAQ

Figma Variables 裡中國傳統色應該怎么命名？

建議 primitive variables 使用拼音或 atlas slug 作為穩定命名，再映射到 primary、accent、surface、text、border 等語義角色。

哪個資源包最適合 Figma Variables？

需要 Figma Variables 和完整創意工作流文件時選 Complete Design Pack；只需要網頁 tokens 時選 CSS 與 Tailwind Token 包。

Figma 裡的中國色可以繼續用於 Tailwind 嗎？

可以。Figma Variables 承載設計決策，再通過 CSS variables、Tailwind theme partial 或 DTCG JSON 把同一套 primitive / semantic tokens 交付給開發。

Figma 中國傳統色：Variables、Tokens 與設計系統用法