如果你问设计师什么是设计系统，你可能会得到很多不同的答案。首先，库和样式指南可以作为设计系统使用，所以人们经常认为它们是同一件事。但是，虽然它们之间肯定有一些重叠，但设计系统的目的有所不同。
在本文中，我们将讨论什么是设计系统、它们的作用以及它们的组件。我们还将向你展示我们自己的设计系统 Prism，以便你更好地了解它们在现实生活中的工作原理。
什么是设计系统？
设计系统是你与团队其他成员之间的一项协议。它是一种通用语言，可以帮助你改善沟通、提高效率和决策。这种通用语言可以是一组可重复使用的组件、样式指南或品牌——仅举几例。简而言之，设计系统需要做的不仅仅是告诉你可以使用哪些元素或颜色。它需要告诉你如何使用它们。
组件 Web 视图是一种浏览设计系统中所有可重复使用的组件和样式的有用方法。你还可以使用搜索选项来筛选你的符号和样式。
设计系统的目的是什么？
设计周围通常存在许多复杂性——可能是因为团队中设计师的范围或你正在处理的项目的范围。而复杂性的真正问题在于它会影响一致性。在适当的位置使用设计系统是保持你和你的团队保持一致的简单解决方案。设计系统可以规定使用哪些字体和徽标、如何在空间中定位不同的元素等等。它通过充当关键元素的存储库和使用指南来实现这一点。
但是，设计系统的价值并不止于此。有一种误解认为设计系统仅供设计师和开发人员使用。但你的团队中的每个人都能够并且应该从你的设计系统中受益。产品经理可以使用组件进行原型设计和可用性测试。营销人员可以使用颜色变量来保持一致性和品牌化。你的设计系统甚至可以包含关于UX 文案和语气的内容指南。
你还可以将其他团队成员链接到 Web 应用，以便他们能够检查和导出你的不同设计系统组件。
作为一名独立设计师工作？创建设计系统可能听起来比它值得的要多，但它将帮助你在未来节省大量时间。它还可以让你更容易与任何人在项目上进行协作或与他人分享你的工作。
设计系统的目标很简单：构建一组构建块，你和你的团队可以使用这些构建块来更高效地工作。你花在构建适合你需求的优秀设计系统上的时间越多，你以后节省的时间就越多。有了这些额外的时间，你可以做什么？专注于设计中有趣、有创意的部分。
设计系统的元素有哪些？
因此，我们已经讨论了构建块和可重复使用的元素，但它们到底是什么？让我们看看你可以在设计系统中包含哪些元素。
- 符号：这种特殊的画板类型包含可以重复使用和更新的图层。它们是你将包含在设计系统中的构建块。
- 颜色变量和颜色标记：这些工具帮助你维护、共享并轻松地将设计系统的调色板从单一的事实来源传递给开发人员。
- 文本样式：你可以存储一组样式并在设计中的不同文本图层中重复使用它们。你还可以编辑原始文本样式，它将自动更新其余部分。
- 图层样式：这些样式的工作方式与文本样式完全相同，但使用的是形状图层（如圆形或星形），而不是文本图层。
- 库：包含组件（符号、文本样式、颜色变量和图层样式）的 Sketch 文档，你可以在所有其他文档中共享这些组件——甚至可以在整个团队中共享。
虽然这看起来可能很多，但请记住，这些都是你最终可能会经常使用的设计元素。我们只是在开始时添加了正确组织它们的额外步骤，以便你可以轻松地重复使用和共享它们。
设计系统示例：Sketch 的 Prism
为了让你更好地了解设计系统的工作原理，我们将向你介绍我们自己的设计系统：Prism。在过去，没有设计系统对我们的设计师来说是一个巨大的问题。他们正在处理 Web 应用的不同方面，但并没有完全了解其他设计师正在做什么或最新的设计是什么。我们知道我们可以更有效地工作。我们需要为 Web 应用创建事实来源以及我们希望它成为的样子。
我们的 Web 应用正在不断发展，同时仍然遵循核心 Prism 设计系统。
因此，我们构建了 Prism——一个帮助指导设计师工作的设计系统。他们可以通过实时协作和文档更新更有效地与他人协作。他们还能够在处理 Web 应用的任何方面时提取标准化元素，从而节省时间并创建非常一致的外观。
Prism 的众多指南之一的示例——如何正确使用按钮。
设计系统的适应性让我们能够持续迭代 Prism。这意味着随着设计空间的变化以及我们开发新功能，Prism 也将随之发展。它现在影响着公司的各个方面——包括这篇博文本身。
将 Prism 作为设计系统有助于使整个 Sketch 设计生态系统具有凝聚力，并在我们的产品和团队内部创造无缝的体验。创建你自己的设计系统可能需要一些努力，但结果不言而喻。我们稍后将介绍创建你自己的设计系统的最佳实践，敬请期待！
