设计系统是设计和开发的“单一事实来源”。组件、标准、指南，一切都记录在案。本指南向您介绍如何创建和维护设计系统。
什么是设计系统
定义
用于构建产品的可重用模式集。
组件
UI 组件、标记、模式、指南。
目的
一致性、效率、规模。
为什么要有设计系统
一致性
每个产品的统一体验。
速度
不要重新发明轮子。
质量
经过测试和批准的组件。
规模
大型团队协调一致地工作。
维护
更新一次，传播给所有人。
组件
设计代币
原始值：颜色、排版、间距。
用户界面组件
按钮、输入、卡片、模式。
###模式
重复出现问题的解决方案。
模板
页面布局。
设计代币
它们是什么
设计值的变量。
类型
颜色、排版、间距、阴影。
命名
语义：--color-primary 与 --color-blue。
工具
风格词典，Tokens Studio。
用户界面组件
解剖学
结构、变体、状态。
州
默认、悬停、活动、禁用、错误。
变体
尺寸、风格、背景。
成分
简单的组件组成了复杂的组件。
文档
记录什么
用法、解剖、注意事项。
为了谁
设计师和开发人员。
格式
专用网站：Storybook、Docusaurus。
示例
代码和视觉。
工具
设计
Figma，带有组件的草图。
发展
组件库：React、Vue 等。
文档
故事书，零高度。
代币
风格词典，Tokens Studio。
Figma 设计系统
###组件
可重复使用的主组件。
变体
状态和变化。
自动布局
响应式组件。
代币工作室
同步令牌。
图书馆
发布并分享。
组件库
###框架
React、Vue、[Web 组件0。
结构
隔离的、经过测试的组件。
道具
清晰一致的 API。
主题
按项目定制。
###包
发布为 npm 包。
创建过程
库存
审核现有 UI。
抽象
识别常见模式。
设计
在 Figma 中创建组件。
发展
在代码中实现。
文档
编写指南。
启动
发布和交流。
治理
所有权
谁维护系统。
贡献
团队如何做出贡献。
版本控制
组件的语义版本控制。
变更日志
沟通变化。
领养
入职
训练团队。
###冠军
每个团队的发起人。
###反馈
收集并合并。
指标
中期采用。
进化
反馈循环
通过使用来学习。
迭代
不断改进。
重大变化
沟通和版本。
弃用
淘汰旧组件。
常见错误
太快了
在有明确的标准之前进行创建。
非常严格
不允许必要的定制。
被遗弃
创建而不是维护。
未对齐
不同的设计和代码。
未记录
没有使用说明的组件。
设计系统示例
材料设计
谷歌。公开、全面。
苹果人机界面
iOS、macOS 指南。
碳
IBM。开源。
北极星
购物。
Atlassian 设计
Atlassian 产品。
结论
设计系统是一项投资，可以在一致性和速度上获得回报。从小事做起，做好记录，并随着使用而发展。其结果是更具凝聚力的产品和更高效的团队。
##常见问题解答
1) 何时创建设计系统？ 当您拥有多种产品或大型团队时。
2) 创建需要多长时间？ 初始版本几个月。它不断发展。
3) 我需要一个专门的团队吗？ 理想情况下。但你可以从兼职开始。
4) 公共或内部设计系统？ 这取决于上下文。许多是内部的。
5) 如何衡量成功？ 采用、设计/开发效率、视觉一致性。
另请阅读
- [交互设计：直观数字体验指南1
- [App UI Kit：如何使用标准化组件2
- [带有 Lit 的 Web 组件：可重用 UI 实用指南3
- [如何制作专业网站：完整指南4
- [以用户为中心的设计：UCD完整指南5
- [现代设计系统：使用 React 和 TypeScript 构建可扩展的组件库6