作为一个致力于提升产品协作的平台，我们非常关注团队如何开发和维护其所有设计和开发项目的单一可信来源。而所有来源的终极目标当然是设计系统。

许多公司都会发布品牌手册，但设计系统远不止是一套指南。它存储了您的团队将在所有产品、页面和平台上反复使用的实际组件。有了它，您无需花费数小时来整理 20 个不同的组件（这些组件都标有“主要按钮”），也无需了解它们的来源或具体使用哪个。

将组件库、模式、设计令牌和样式指南打包到一个足够简单的系统中，以便设计师、开发人员和非技术产品团队成员轻松导航，这是一门艺术。作为这门艺术的狂热欣赏者，我们有很多自己的看法。

我与 Zeplin 的设计和产品团队聊了聊他们最喜欢的设计系统以及它们的独特之处。以下是我们最喜欢的九个例子。

你的团队越大，你的设计系统就需要越复杂；你的设计系统越复杂，就越难以有组织的、易于导航的方式构建它。

正因如此，我们始终欣赏那些能够以普通读者能够直观的方式组织其庞大设计系统的大品牌。当你的团队包含许多非技术人员，例如文案撰写人、研究人员、项目经理和品牌设计师时，这一点尤其重要。

精简设计系统固然重要，但您也不应将其过度简化，以至于开发人员不得不费力钻研基础知识才能找到所需的技术细节。Gusto 的设计系统 Workbench 通过将实现细节与实时组件相结合，很好地平衡了这两个优先事项，使其易于采用和理解。

可视化的讲解、代码片段和全面的实现说明，使 Workshop 成为设计师和开发者的一站式平台。Gusto 独特的设计系统元素呈现方式，确保任何人都能理解组件，并找到充分发挥其潜力的最佳方法。

存储库：GitHub
JS 库/框架：React
UI 工具包：Figma
发行版：npm
设计令牌：是
语义颜色：否
无障碍指南：是

Zendesk 的设计系统 Garden 之所以脱颖而出，是因为它为产品团队中一个经常被忽视的成员——产品文案——提供了指导。无论您拥有专职的文案撰写人，还是您的设计师兼任产品文案撰写者，内容指南对于在整个产品中保持一致的基调都至关重要。

Garden 提供了全套标准设计系统资源，以及一整节关于“产品语言写作原则”的内容。它涵盖了品牌的语言价值观、语音和语调指南，甚至还有 Zendesk 使用和不使用的特定词汇列表。

Zendesk 的设计系统也连接到 Code Sandbox，这使得开发者无需先将 Garden 组件拖入自己的项目，即可查看、交互和测试对任何组件的编辑。这是另一种有效的方法，可以让您的设计系统尽可能轻巧灵活，方便所有用户使用。

代码库：GitHub
JS 库/框架：React
UI 工具包：无
发行版：npm
语义颜色：否
无障碍指南：否

正如我们之前提到的，设计系统真正看重的一点是为新用户提供清晰且有指导性的入门介绍。设计系统就像产品团队的家，一些小细节，例如系统内容的介绍概述或书面的入门指南，对于确保团队中非技术成员能够轻松上手设计系统大有裨益。

《华盛顿邮报》的设计系统在为新用户提供快速上手其内容的资源方面做得非常出色。其“深入了解”版块提供完整的视频研讨会——一个面向设计师，一个面向开发者——专门讲解该设计系统的工作原理。（它还提供了将 WPDS 与 Zeplin 结合使用的入门指南，包括如何启用 Connected Components，以便工程师能够在设计中轻松访问其代码库中的组件。）

我们也很喜欢 WPDS 为仍在开发中的组件添加“草稿”标签。设计师和开发人员的协作很大程度上依赖于清晰的版本控制沟通，提前标记未完成的组件可以避免日后出现很多混乱。

代码库：GitHub
JS 库/框架：React、Stitches
UI 工具包：React、Figma、Storybook
发行版：npm
设计令牌：是
语义颜色：是

Material 3——该系统的最新版本——是目前最全面、文档最齐全的设计系统之一。虽然大多数设计系统都制定了创建品牌产品的指南，但 Google 的设计系统既可以作为 Google 品牌产品的指南，也可以作为 Android 和 Web 产品及体验设计方面的通用最佳实践。该系统旨在帮助统一不同平台、设备和输入法的用户体验。Apple 也为 iOS 系统提供了一个类似的设计系统，称为“人机界面指南”。

并非所有设计系统都包含如此程度的细节，而这正是 Material 3 脱颖而出的众多原因之一，它为交互状态、动效和可访问性模式等内容提供了高度标记化的指南。Material 3 还附带 Figma 套件、教程，甚至还有自己的博客！

代码库：GitHub
JS 库/框架：React
UI 工具包：Figma
发行版：npm
设计令牌：是
语义颜色：是
无障碍指南：是

Shopify 的独特之处在于，其产品设计如同变色龙，能够适应每家使用 Shopify 的小型企业的外观和风格。因此，该公司的设计系统 Polaris 并非仅适用于 Shopify 品牌产品，而是一个面向消费者的系统，其中包含过滤器、面包屑导航和导航菜单等常用功能的模式，商家可以自定义并使用这些模式来设计自己独特的店面。该系统使小型企业主能够为其独立企业创建 Shopify 品质的设计。

Shopify 团队根据自身平台的经验构建了 Polaris，因此系统中的所有组件和模式均由专家创建和精心策划。因此，用户可以放心使用该设计系统，因为所有组件都针对平台进行了优化。

另一个强大的功能是 VS Code 扩展，每当它检测到您正在向代码中添加样式变量时，它就会生成一个 Polaris 设计标记的自动完成菜单。它可以节省大量的时间和精力，并且是另一个强大的工具，可以帮助确保即使是最大的产品团队中的每个人都使用相同的可复用组件。

代码库：GitHub
JS 库/框架：React
UI 工具包：Sketch
发行版：npm
设计令牌：是
语义颜色：是
无障碍指南：是

奥迪使用 Storybook 构建了其组件库，因此 CI Portal 的所有组件都已记录为故事。因此，开发人员无需手动编写所有内容，只需更新组件控件并选择必要的组件变体，设计系统就会自动生成相应的代码并将其复制到项目中。这真是节省时间！

奥迪的设计系统还包含一些独特的类别。由于该公司在其数字和网络产品中高度依赖视频拍摄，其设计系统包含针对视频甚至声音的具体指南。他们甚至还为现场体验制定了设计指南，虽然与产品设计关系不大，但仍然非常酷。

代码库：GitHub
JS 库/框架：Vanilla
UI 工具包：Sketch、Photoshop
发行版：npm、Bower
设计令牌：否
语义颜色：否
无障碍指南：否

如果说有一种方法可以确保 Zeplin 团队会喜欢你的设计系统，那就是添加一个专门介绍交接流程和指南的页面。这在设计系统中并不常见，但在节省时间、避免交接阶段出现沟通混乱和错误方面，它是一项极其宝贵的资源。REI 的交接指南包含非常具体的建议，甚至包括画板的数量和像素大小，这无疑可以为开发人员节省大量时间。

代码库：GitHub
JS 库/框架：Vue
UI 工具包：无
发行版：npm、Yarn
设计令牌：否
语义颜色：否

Mailchimp 最初是一个电子邮件平台，但如今已发展成为一个功能齐全的小型企业营销工具。随着产品种类日益丰富，该公司调整了品牌和设计指南，力求在不限制设计师创造力的情况下，赋予 Mailchimp 品牌统一的外观和风格。

Mailchimp 有三份主要的创意内容和设计指南。其中最全面的是一份独特且独具匠心的风格指南，概述了公司的整体创意理念。公司的内容风格指南提供了更详细的编辑和文案规则，这些规则几乎涵盖了 Mailchimp 在各个场景下的写作风格，从网页和产品文案到法律内容和商标。最后，模式库存储了交互式设计系统组件以及如何在 Mailchimp 产品中使用它们的详尽指南。

Mailchimp 的内容和风格指南非常全面，许多设计师、内容创作者和编辑都用它来管理自己公司的内容。事实上，几年前我们创立 Zeplin 品牌时，就深受 Mailchimp 创意方法的启发！

代码库：GitHub
设计令牌：否
语义颜色：否

数字产品设计系统在现代科技前沿的公司中最为常见，其中许多公司仅存在了十几二十年。因此，NASA 的网页设计系统提供了一个绝佳的机会，让我们了解一个组织的数字设计系统是如何从一本 1975 年创建的传统品牌手册（准确地说是《美国国家航空航天局图形标准手册》）演变而来的。

NASA 网页设计系统包含交互式组件、代码片段和实施指南。它还提供了两个完整的落地页和文档页模板，并提供了每种页面类型的使用场景和时间说明。

相比之下，1975 年的指南涵盖了汽车、航天飞机、联邦大楼标识，甚至 NASA 连体衣的设计规范。但它也包含了一些保持不变的元素——比如 Helvetica 字体，它近 50 年来一直是 NASA 的主要字体系统。很少有设计系统可以追溯到互联网发明之前，观察哪些设计元素发生了变化，哪些保持不变，这令人着迷。

代码库：GitHub
发行版：npm
设计令牌：否
语义颜色：否
无障碍指南：是

所有这些例子中都出现了一些清晰的主题，并准确地展示了设计系统的亮点。

这看似简单，但那些以清晰直观的层次结构组织内容，并遵循经典“物尽其用，各得其位”原则的设计系统，总能在众多设计系统中脱颖而出。能够为开发人员减少不必要或易于自动化的工作的工具和集成，可以节省时间和精力，并帮助团队避免可避免的错误。

设计系统考虑到了整个产品团队的需求，使其对非技术人员友好，并为用户体验文案和研究人员等利益相关者提供必要的信息，真正体现了“单一事实来源”产品开发方法的全部精神。

Zeplin 为迪士尼、华盛顿邮报、STARZ、Bombas、Veeva Systems 等公司的团队提供设计系统文档和团队范围的采用方面的帮助 - 请联系我们了解更多信息。