什么是设计系统？以及为什么你需要一个

如果你问设计师什么是设计系统，你可能会得到很多不同的答案。 一方面，库和风格指南可以用作设计系统，所以人们经常认为它们是同一件事。 然而，虽然肯定有一些重叠，但设计系统的目的却不同。

在本文中，我们将讨论什么是设计系统，它们是做什么用的，以及它们的组件。我们还将展示我们自己的设计系统 Prism，以便你更好地了解它们在现实生活中的运作方式。

什么是设计系统？

设计系统是你和团队其他成员之间的协议。它是一种**通用语言**，可以帮助你改善沟通、效率和决策。这种通用语言可以是可重用的组件集、风格指南或品牌推广——仅举几例。简而言之，设计系统需要做的不仅仅是告诉你可以使用哪些元素或颜色。它需要告诉你 *如何* 使用它们。

设计系统的目的是什么？

设计通常有很多复杂性——无论是由于团队中设计师的范围还是你正在进行的项目范围。复杂性的真正问题在于它会对一致性造成影响。拥有一个设计系统是保持你和你的团队保持一致的一个简单解决方案。设计系统可以规定使用什么字体和徽标，如何在空间中定位不同的元素等等。它通过充当关键元素的存储库和如何使用它们的指南来实现这一点。

但设计系统的价值并不止于此。人们常常误解设计系统只适用于设计师和开发人员。但是你团队中的每个人都可以而且应该从你的设计系统中受益。产品经理可以使用组件进行 原型设计 和可用性测试。营销可以使用 颜色变量 来保持一致和品牌化。你的设计系统甚至可以包含关于 用户体验文案 和语气的内容指南。

作为一名独立设计师工作？创建一个设计系统听起来可能比它本身的价值更高，但它将帮助你在未来节省大量时间。它还使得与项目中的任何人协作或与他人分享你的作品变得更加容易。

设计系统的目标很简单：容纳一组构建块，你和你的团队可以使用这些构建块来更有效地工作。你在构建满足你需求的良好设计系统上花费的时间越多，以后节省的时间就越多。你能用所有这些额外的时间做什么？专注于设计中那些有趣、有创意的部分。

设计系统有哪些元素？

所以我们已经讨论过构建块和可重用元素，但这些到底是什么？让我们来看看你可以包含在设计系统中的元素。

• 符号：这种特殊的画板类型包含可以重用和更新的图层。它们是你将包含在设计系统中的构建块。
• 颜色变量 和 颜色令牌：这些工具可帮助你从单一的事实来源维护、共享和轻松交付设计系统的调色板给开发人员。
• 文本样式：你可以存储一组样式并在设计中的不同文本图层中重复使用它们。你还可以编辑原始文本样式，它将自动更新其余部分。
• 图层样式：它们的工作方式与文本样式完全相同，但使用形状图层（如圆形或星星）而不是文本图层。
• 库：Sketch 文档，其中包含你可以跨所有其他文档甚至跨整个团队共享的组件（符号、文本样式、颜色变量和图层样式）。

虽然这看起来很多，但请记住，这些都是你最终可能会经常使用的设计元素。我们只是从一开始就增加了正确组织它们的额外步骤，以便你可以轻松地重复使用和共享它们。

设计系统示例：Sketch 的 Prism

为了让你更好地了解设计系统的工作原理，我们将向你介绍我们自己的设计系统：Prism。早些时候，没有设计系统对我们的设计师来说是一个巨大的问题。他们在不完全了解其他设计师在做什么或最新设计是什么的情况下，从事 Web 应用程序的不同方面的工作。我们知道我们可以更有效地工作。我们需要为 Web 应用程序和我们想要的内容创建一个事实来源。

因此，我们构建了 Prism——一个帮助指导设计师工作的设计系统。他们可以通过实时协作和文档更新更有效地与他人协作。他们还能够在处理 Web 应用程序的任何方面时提取标准化元素，从而节省他们的时间并创建非常一致的外观。

设计系统的适应性特性使我们可以不断地迭代 Prism。这意味着随着设计领域的变化和我们开发新功能，Prism 也会发展。它现在触及公司的每个部分——包括这篇博文。

将 Prism 作为一个设计系统有助于使整个 Sketch 设计生态系统具有凝聚力，并在我们的产品和团队中实现无缝体验。创建你自己的设计系统可能需要一些努力，但结果不言自明。稍后我们将介绍创建你自己的设计系统的最佳实践，敬请关注！