Design Token 落地：先统一语义，再谈 Figma to Code

Design Token 落地：先统一语义，再谈 Figma to Code

Figma 导出变量很容易，难的是设计和代码是否把同一个 token 理解成同一层语义。直接按颜色值命名，主题一换就会失控。

建立基础与语义两层

基础 token 保存色板和尺度，语义 token 表达 text-primary、surface-danger 等用途。组件只引用语义层，品牌或暗色主题再映射到底层值。

生成代码要有稳定接口

Figma 变量通过版本化脚本导出，生成文件不手改。变更 PR 展示 token diff 和受影响组件，删除前检查引用。

• 命名规则由设计和开发共同维护。
• 对比度进入自动检查。
• 组件例子覆盖主题和状态。

验收看页面而非变量数量

挑选表单、弹窗和图表等代表页面，检查设计稿与实现的间距、颜色和状态。工具只负责搬运，语义仍需要人确认。

Design Token 像调色盘背后的坐标系。坐标统一后，Figma to Code 才是加速，而不是批量制造魔法数字。

原稿中的最小片段

--color-action-primary: #2563eb;

这段片段保留原样，只用于说明接口形态；接入项目时仍要补齐类型、错误和测试。