从零搭建设计系统：我的实战经验

设计系统不是一个 Figma 文件，也不是一个 Storybook，而是一种工作方式。这篇文章分享我在过去两年中搭建并维护设计系统的实战经验。

为什么需要设计系统？

当团队规模超过 3-4 人，或者产品线超过 2 条时，你就会开始感受到"一致性税"——大量时间花在对齐颜色、间距、文案规范上，而不是真正的设计创新。

设计系统的核心价值：

• 效率：复用而非重建
• 一致性：相同场景，相同解决方案
• 沟通：设计师与工程师共用同一语言

第一步：定义设计 Token

设计 Token 是设计系统的原子单位，建议分三层：

原始 Token（Primitive Tokens）

color-blue-50: #eff6ff
color-blue-100: #dbeafe
...
color-blue-600: #2563eb

语义 Token（Semantic Tokens）

color-brand-primary: {color-blue-600}
color-interactive-hover: {color-blue-700}
color-text-default: {color-gray-900}

组件 Token（Component Tokens）

button-background-primary: {color-brand-primary}
button-text-primary: {color-white}

这种三层结构的好处是：更换主题时只需修改语义层，无需改动组件。

第二步：建立组件规范

每个组件需要文档化以下内容：

1. 用途说明：这个组件解决什么问题
2. 变体（Variants）：尺寸、状态、视觉变体
3. 使用规范：何时用、何时不用
4. 内容规范：文案长度限制、图片比例要求

第三步：维护与演进

设计系统不是一锤子买卖。建议：

• 建立 RFC（Request for Comment）流程处理新增请求
• 每季度做一次使用情况复盘
• 保持向后兼容，废弃而非删除

结语

好的设计系统是团队共识的产物，而不是某一个人的作品。从小处着手，迭代推进，比追求完美的第一版更重要。