Design Token 落地:先统一语义,再谈 Figma to Code

📅 2026/8/13 14:39:12
Design Token 落地:先统一语义,再谈 Figma to Code
Design Token 落地先统一语义再谈 Figma to CodeFigma 导出变量很容易难的是设计和代码是否把同一个 token 理解成同一层语义。直接按颜色值命名主题一换就会失控。建立基础与语义两层基础 token 保存色板和尺度语义 token 表达 text-primary、surface-danger 等用途。组件只引用语义层品牌或暗色主题再映射到底层值。生成代码要有稳定接口Figma 变量通过版本化脚本导出生成文件不手改。变更 PR 展示 token diff 和受影响组件删除前检查引用。命名规则由设计和开发共同维护。对比度进入自动检查。组件例子覆盖主题和状态。验收看页面而非变量数量挑选表单、弹窗和图表等代表页面检查设计稿与实现的间距、颜色和状态。工具只负责搬运语义仍需要人确认。Design Token 像调色盘背后的坐标系。坐标统一后Figma to Code 才是加速而不是批量制造魔法数字。原稿中的最小片段--color-action-primary: #2563eb;这段片段保留原样只用于说明接口形态接入项目时仍要补齐类型、错误和测试。