系统架构设计
在第 2 章中，我们将从现有的组件库中提取一个设计系统。在此过程中，我们将确定哪些组件属于设计系统，并概述开发人员在入门时面临的常见挑战。
在大型公司中，此练习与设计、工程和产品团队共同完成。Chromatic（Storybook 背后的公司）和 Storybook 共享一个活跃的前端基础设施团队，为跨 3 个以上属性的 1400 多名开源贡献者提供服务，因此我们将为您概述此过程。
挑战
如果您在开发团队工作，您可能已经注意到，团队规模越大，效率就越低。随着团队的壮大，沟通不畅变得猖獗。现有的 UI 模式没有文档记录，或者完全丢失。这意味着开发人员在重复造轮子，而不是构建新功能。随着时间的推移，项目中充斥着一次性组件。
我们陷入了这种困境。尽管经验丰富的团队拥有良好的意愿，但 UI 组件还是不断地被重建或粘贴到位。本应相同的 UI 模式在外观和功能上却出现了分歧。每个组件都是独一无二的，这使得新开发人员不可能辨别真理来源，更不用说做出贡献了。
创建设计系统
设计系统将通用的 UI 组件整合到一个维护良好的中央存储库中，并通过包管理器进行分发。开发人员导入标准化的 UI 组件，而不是在多个项目中粘贴相同的 UI 代码。
大多数设计系统不是从头开始构建的。相反，它们是从公司中使用过的、经过实践检验的 UI 组件组装而成，并重新打包为设计系统。我们的项目也不例外。我们将从现有的生产组件库中精选组件，以节省时间并更快地向利益相关者交付我们的设计系统。
设计系统位于何处？
您可以将设计系统视为另一个组件库，但它服务于整个组织，而不是一个应用程序。设计系统专注于 UI 原语，而特定于项目的组件库可以包含从复合组件到屏幕的任何内容。
因此，我们的设计系统必须独立于任何项目，并且也是所有项目的依赖项。更改通过包管理器分发的版本化包在整个组织中传播。项目可以重用设计系统组件，并在需要时进一步自定义。这些约束为我们组织前端项目提供了蓝图。
在 GitHub 上设置存储库
根据 State of JS 调查，React 是最流行的视图层。绝大多数 Storybook 都使用 React，因此我们在本教程中使用它来构建我们的设计系统。
在您的命令行中，运行以下命令
# Clone the files
npx degit chromaui/learnstorybook-design-system-template learnstorybook-design-system
cd learnstorybook-design-system
# Install the dependencies
yarn install
安装完成后，我们可以将其推送到 GitHub（我们将使用它来托管我们设计系统的代码）。首先登录并在 GitHub.com 上创建一个新的存储库
然后按照 GitHub 的说明创建（目前几乎为空的）存储库
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your-username/learnstorybook-design-system.git
git push -u origin main
请务必将 your-username 替换为您的帐户名。
哪些属于，哪些不属于
设计系统应仅包含纯粹的展示型组件。这些组件处理 UI 的外观，专门响应 props，不包含特定于应用程序的业务逻辑，并且与数据加载方式无关。这些属性对于允许组件可重用至关重要。
设计系统不是组织中每个组件库的超集。那样的话，跟踪起来会很麻烦。
不应包含包含业务逻辑的特定于应用程序的组件，因为这会限制重用，从而要求使用者项目具有相同的业务约束。
省略当前未被重用的一次性组件。即使您希望它们有一天成为设计系统的一部分，灵活的团队也会尽可能避免维护过多的代码。
创建清单
首要任务是创建组件清单，以识别最常用的组件。这通常涉及手动编目各种网站或应用程序中的屏幕，以识别通用的 UI 模式。设计师如 Brad Frost 和 Nathan Curtis 发布了用于盘点组件的便捷方法，因此我们不会在本教程中进一步详细介绍。
对开发人员有用的启发式方法
- 如果 UI 模式被使用超过三次，则将其转化为可重用的 UI 组件。
- 如果 UI 组件在 3 个或更多项目/团队中使用，则将其放入您的设计系统中。
按照这种方法，我们最终得到 UI 原语：Avatar、Badge、Button、Checkbox、Input、Radio、Select、Textarea、Highlight（用于代码）、Icon、Link、Tooltip 等。这些构建块以不同的方式配置，以在我们客户端应用程序中组装无数独特的功能和布局。
我们为本教程选择了这些组件的子集，以简化对存储库的推理。一些团队还在其设计系统中包含定制的第三方组件，用于表格和表单等其他组件。
除了 UI 组件之外，包含在项目中重用的排版、颜色、间距等的样式常量也是有意义的。在设计系统术语中，全局样式变量称为“设计令牌”。我们不会在本指南中深入探讨设计令牌背后的理论，但您可以在网上了解更多信息（这是一篇好文章）。
让我们开始开发吧
我们已经定义了要构建的内容以及如何将其组合在一起。现在是开始工作的时候了。在第 3 章中，我们将为设计系统搭建基本工具。借助 Storybook，我们的原始 UI 组件目录将被编目和可视化。