创建设计系统实用指南

我们将逐步指导如何为您的产品创建设计系统。

选择一个 UI 框架

如果您不想花费大量资金从头开始构建设计系统，则应该选择技术堆栈中现有的 UI 框架之一。

从零开始构建一个真正好的设计系统非常困难。

定义你的主题

每个现有的 UI 框架都会提供一个默认主题，您可以根据产品颜色和需求进行自定义。
避免过多的自定义，以免造成复杂性。
请同时定义明暗主题。

为您的设计系统创建一个包

在 Woovi，我们拥有@woovi/ui自己的设计系统。
如果您使用的是我们推荐的 Monorepo，只需在 Monorepo 中创建一个新的包，并仅导出供现有产品使用的公共组件即可。
遵循这种方法，所有产品都将始终使用您设计系统的最新版本。

如果您使用多仓库 (poly repo) 方式，则需要创建一个新的仓库来包含设计系统并将其发布到 npm。
按照此方法，每次修改设计系统后，您都需要发布新版本。您还需要更新所有使用该系统的产品。

故事书

将设计系统中的所有公共组件添加到故事书 (storybook) 中，每次设计系统变更时也应部署该故事书。
对于在产品中使用设计系统的团队来说，故事书是最好的文档。

避免在产品代码上自定义 CSS 和自定义组件

避免在产品代码中使用自定义 CSS 和自定义组件。
大多数组件，甚至所有组件都应该来自设计系统。
如果某个组件在设计系统中不存在，那么它可能在设计原型中也不存在，或者我们应该将其添加到现有的设计系统中。

每次向设计系统添加更多组件或值时，都会增加复杂性并增加维护成本。

回归 UI 测试

您可以将回归 UI 测试添加到设计系统，以确保每次更改都不会意外破坏产品代码。

综上所述

为你的产品构建设计系统听起来工作量很大，但这是一项非常值得的投资。
虽然前期工作量会更大，但构建新前端页面的边际成本会降低。

如果您需要更多理由来拥有设计系统，请查看这篇文章“每个产品都需要一个设计系统”

Woovi
Woovi是一家初创公司，致力于让购物者能够随心所欲地付款。Woovi 为商家提供即时支付解决方案，帮助他们接受订单，从而实现这一目标。

如果您想与我们一起工作，我们正在招聘！