我如何防止Figma设计令牌与生产CSS漂移

我在产品设计工作流程中遇到了这个问题，Figma令牌被导出到前端主题中。问题是按钮间距和文本颜色在Figma中匹配，但在生产中经过两次发布后发生了漂移。最初我认为工程师忽略了设计文件，但是在设计师重命名令牌组时，它会出现，即使是在组件清理过程中。这导致QA不断提交视觉bug，双方都无法快速复现，所以我将其视为工作流程问题，而不是小问题。 我的过程是收集Figma令牌导出、CSS变量、拉取请求差异和组件截图，并将其与Figma令牌、主题包和Storybook视觉检查进行比较。首先，我比较了令牌名称和值，而不是仅查看截图。然后，我检查了哪些令牌被重命名和删除、重建。关键线索是导出生成了新的令牌键，而生产仍然引用了旧的CSS变量名称。 解决方案是冻结公共令牌名称、添加令牌差异审查，并在所需的CSS变量消失时使CI失败。我通过在样本分支上运行导出并检查Storybook快照来测试它。我添加了令牌…