你的 Figma Color System 是手动的。这就是它在规模化时会出问题的原因。

Source: Dev.to

没有人谈论的现实

你在项目开始时只有三种品牌颜色。六个月后，你的 Figma 文件已经有 42 种颜色。构建配色系统并不是挑选十六进制代码，而是关于逻辑和可扩展性。

1. 目测法

通过移动光标直至看起来合适来挑选色调。结果是：整个调色板在感知上不一致。

2. 可访问性被事后考虑

在设计完成后才检查对比度，结果发现你的主色不符合可访问性标准。

3. 命名债务

像 Blue-Light-1、Blue-Light-Final-v2、Blue-Light-Final-FINAL 这样的名称很快就会变成考古遗物。如果没有系统化的 token 方法，你的颜色库在一年内就会变得难以管理。

为什么需要系统

• 感知统一性 – 整个调色板中每个 “500” 权重的色调在肉眼看来都是等价的。
• 即时迭代 – 更改一个基础颜色，完整的色阶会自动更新。
• 开发者就绪输出 – 当调色板存在时 token 已经生成，省去任何转换步骤。

在 “我有品牌颜色” 与 “我的系统已准备好供开发使用” 之间的差距往往完全是手动的。一个强大的系统应该通过数学曲线生成色阶，而不是凭感觉。

Paletta 解决方案

Paletta 是一个旨在弥补手动差距的工具。

工作流（三步）

1. 生成 – 通过数学方式生成 50–900 的色阶。
2. 验证 – 在调色板视图中内置可访问性检查，用于对比度检查。
3. 实现 – 将 token 直接导出为 CSS 变量、Tailwind 配置或设计 token 格式。

特性

• Figma 插件 – 当前正在社区审查中。
• 导出选项 – CSS 变量、Tailwind 配置、设计 token。
• 免费层 – 可在 处获取。

行动号召

• 在 usepaletta.io 试用 Paletta（提供免费层）。
• 在 X 上关注发布更新：@andresmclavijo。
• 在 dev.to 关注完整的构建过程，获取下一篇关于设计 token 架构的文章。