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 与设计系统用法