编辑导语：设计师们经常会用各种优质的设计案例进行参考，所以很多设计师开始专注于构建一个统一的设计系统，希望将可以将各种设计聚集在一起，打造更完整的系统；本文作者拆解了 Bit 团队构建设计系统的过程，我们一起来了解一下。

在本篇文章中，我将呈现并拆解 Bit 团队构建设计系统的过程；为了帮大家更好理解，每个步骤内的真实案例将展示给大家。

设计系统的创建，是为了解决必然出现的无序状态，它带来了秩序。在 1976 年，NASA（美国国家航空航天局）推出了第一个设计系统。

到如今，几乎所有的大型组织（如 Uber，Pinterest，Airbnb 或 Shopify）都拥有一个这样的设计系统；这个系统能保持他们产品自身的连续性，且帮助更多混乱的产品与团队建立秩序。

在 Bit，我们为超过 15 万名有组件使用场景的开发者提供解决方案；平台帮助开发者构建、分享和使用组件，来加快和优化 Web 产品的研发过程。

我们享受构建一个 以组件为驱动方式的设计系统在过去的两年里，我们先“折腾”自身平台来构建出一个设计系统，然后再将其转变为一个由共享模式化组件构成的活跃生态系统。

这套系统提供的价值，远远不止保持了界面体验的一致性，它极大地加快与扩大了开发规模，且提高了产品质量，同时还改善了开发者与设计师及其他人的工作方式。

通过让所有成员参与合作，共同创建和共享组件，可以让这套设计系统得以更快更广泛的应用。

本文我将侧重从开发层面进行描述，并与各位分享我们的设计目标、设计过程 和设计结果。

目录：

1. 视觉语言
2. 组件共享
3. 文档与组件的可发现性
4. 增量升级
5. 依赖项的涟漪式更改
6. 项目更新
7. 团队沟通
8. 设计 – 研发的协作方式

一、视觉语言

审视已有，然后定义我们创建视觉语言的过程；与大多设计系统文章内描述的有所不同，那些是大型企业持有的特权，而这种方式对创业公司通常是奢侈选项。

作为一个生长期的创业公司，我们没有时间叫停，并将设计系统转换为大型复杂项目；取而代之的是——我们必须审视现有的视觉语言，然后将其组织成一个有秩序的系统。

这个项目由 Bit 的设计负责人 Amir Shalev 领导，项目分为两个部分：

• 审核现有样式与元素；
• 创建一致的系统后，将其作为强大且灵活的基础来标准视觉语言。

Bit.dev 的面板规范和色彩规范

视觉一致意味着为色彩、文字、尺寸、位置及其他视觉语言创建一个统一的样式标准指南；而字体、排版，主色与辅色等方面，则可以作为设计系统的一部分。

我们还需要创建一系列的 UI 元素，这些元素需要在将来能够使用现代的前端框架（例如 React 框架）实现为组件。

按钮、头像及其他基础组件

为了使系统中的元素在真实场景里具备可用性，必须保证元素除了包含像按钮或头像等基本 UI 组件外，更应包括组件的组成方式或组件的具体用法，这些是保证元素具备功能性的最基础方法。

将组件组合，可以创建出更多具象的、有进阶功能的复合组件

设计系统必须沉淀以下资产，才算准备就绪：

• 样式指南（Style – Guide）：用于定义 UI 样式和实现方式。表现形式通常是一个相当长的文档，带有许多的讲解和排版。
• 复用的系列视觉元素（Reusable Visual Elements）：它们通过组件将视觉（UI 方面）和功能（UX 方面）结合在一起，来保持一致性；表现形式通常是一个大型源文件，其元素在 Figma 或 Sketch 等软件上绘制。

二、组件共享

构建组件的生态系统有些人的做法是发布一个带全部组件的版本包，仅此而已，我们却更喜欢创建一个共享组件生态系统。