设计系统契约:组件既不在 Figma 中,也不在代码中 笔记

设计系统契约:组件既不在 Figma 中,也不在代码中

设计系统同时存在于 Figma 等设计工具和已发布的代码中,由此产生两者之间持续存在的“漂移”挑战。这种分歧源于在一处进行修改而另一处未同步,进而导致不一致。传统解决方案是将 Figma 或代码其中之一设为唯一事实来源(source of truth),但两者均需要不断更新另一方的副本。本文提出的方案引入第三个中立的事实来源:一个纯数据文件(通常为 JSON 或 YAML),作为每个组件的“契约”。该契约描述组件的属性与选项,且不涉及视觉或代码的具体实现。关键在于,Figma 组件和代码均自动从此单一契约文件生成。随后,检查工具会验证 Figma 与代码版本是否准确反映该契约。这种基于契约的方法确保 Figma 与代码保持同步,因为任何一方都无法直接更新另一方。随着 AI 在构建界面中作用的日益增强,对这一系统的迫切性也随之提升。无监督的 AI 可能加速设计系统的漂移,引发不一致与错误。然而,当提供设计系统契约时,AI 可遵循其规则,实现完美评分,且新功能仅需对契约进行实际修改。该系统确保 AI 生成的设计尊重既定的令牌(tokens)与组件属性,从而避免错误并维持完整性。虽然契约定义了组件的构成,但更复杂的行为与创意布局仍需人工介入。实施该方案需要迁移流程,并引入用于维护契约的工具,将治理模式转变为审查流程。处于中间地带的团队——规模不足以投入资源进行手动同步,但又大到足以出现显著漂移——将从这种 AI 驱动的方法中获益最多。
CdXz5zHNQW_WhiJVu4ly0.png