从开发层面进行描述，并与各位分享我们的设计目标、设计过程 和设计

到如今，几乎所有的大型组织（如 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 等软件上绘制。

二、组件共享

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

1. 我们的流程

如果前往 Bit.dev 的首页，你将发现一些很酷的东西；当鼠标悬停在一个组件上时，将触发高亮，提示该组件的名称、版本和父级范围。

Bit.dev首页 —一个展示共享组件的作品

你看到的页面，是由共享组件组成的；然而，这些独立组件是由不同团队开发且持有的，来源也是不同的项目，它们是混合后集成在一起的。

在 Bit，存在不止一个设计系统，我们有不同的团队在UI 组件生态系统中构建和共享他们的组件。

如果鼠标悬停在诸如「链接」（Link）或「段落」（Paragraph）之类的组件上，单击这些元素，你将看到相链页面显示这些组件是 “base-ui” 范围的一部分；这是我们设计系统最基础的部分，由我们的设计系统团队在自主的 GitHub repo 中开发，然后发布到 Bit.dev 供所有人使用。

“base-ui”—我们设计系统的基础组件

然而，市场部成员需要更具象的组件，例如与营销相关的“标题”（Heading）组件或“行动按钮”（Action – button）组件；这些不是 “base-ui” 设计系统的一部分，而是另一个称为“布道者”（Evangelist）的组件范围。

基于此背景，在 GitHub repo 中，这些组件自动归属于市场营销团队；但由于这些业务组件使用 “base-ui” 的组件搭建，因此它们的升级由 “base-ui” 团队负责。

“布道者”（Evangelist） — 市场营销组件

“布道者” 只是由 “base-ui” 组成和扩展的众多组件之一。事实上，每个企业团队都 参与了构建自己业务范围的组件，并与他人共享自己的成果。

与其为组件发布一个统一的软件包，我们选择了创建一个让所有人协同工作但独立发布版本的生态系统；设计系统的角色应是促进 和规范，而不是阻止或强制执行。

这个生态系统获得了巨大的成功，我们既减少了约 75% 新营销页面的搭建时间，还保持了设计风格的一致。

2. 用自主研发的工具工作

Bit 的 “折腾” 意味着我们以帮助别人的方式来建设自己的设计系统，并且从 2017 年开始，已经这样进行了好几年。

以下为要点：

• 我们使用Bit OSS 工作平台来开发、管理和发布来自不同团队不同代码库所拥有的解耦组件。
• 我们通过Bit 云平台，帮助所有团队顺利地彼此公开、共享和集成组件。
• 我们设计系统团队提供组件系统内的基本组件，并负责更新与调整，保证基本组件的标准和一致性。

3. 选择 React 框架

2017 年，基于各种原因，我们选择使用 React 框架，并且对这一选择感到非常满意；自从 React 16 引入 Hooks 和 Context API 后，它就开始变得非常强大；例如，即使是在状态管理方面，也能将多个组件彼此分离。

然而，我们正看到许多团队选择将 Bit 用于 Vue 或 Angular 甚至是 Stencil Web 组件。其实我们一直在与 Angular 团队合作，为 Angular 的 Bit 库提供支持；但在考虑了所有因素后，我们认为 React 是目前 Bit 团队的最佳解决方。

4. 独立组件

Bit 工作平台帮助你创建模块项目的同时，享受简单而全面的开发体验；每个组件都是独立开发、构建、测试、记录、发布并集成到新应用程序中的，所有的组件都是和谐组合与管理的。