跳过导航
学习设计

如何在 Sketch 中组织和维护设计系统

开始以全新的方式思考设计系统

最近,我谈到了如何构建设计系统。我涵盖了基本组件,例如颜色变量样式,以及如何在准则和协议中工作。但是,随着您的设计系统的发展,您可能会发现需要整理的元素太多。不用担心!没有什么良好的组织最佳实践无法解决的 - 至少在设计系统方面是这样。

今天,我们将学习不同的技术来分组和组织我们的组件。我们还将介绍一些在您发展设计系统时需要记住的事情。

让我们看看👀

拥抱你内心的组织者

当我们想到设计系统时,我们通常会想到每个组件的单个资源库。但是,没有规则说您需要将所有内容都保存在单个文档中。例如,您可能希望为不同类型的组件使用单独的资源库,甚至使用另一个文档来保存指南和文档。

在 Sketch 中,您可以使用项目集合作为主要和次要的组织级别。例如,您可以为您的品牌创建一个项目,并将您的资源库和其他设计文档分组到一个集合中。

您的设计系统越复杂,您就可以越有创意。但是,我建议一开始保持简单——您添加的级别越多,以后找到正确的组件就越具挑战性。

选择平台无关和平台优先

如果您从事产品设计工作,一个有用的起点是在平台无关和平台优先之间进行选择。我的意思是选择您是专注于组件还是平台,例如设备、操作系统、浏览器等。

对于设计系统,一次更新和维护组件及其所有变体比在许多不同的位置(每个平台)寻找相同的组件更容易。这是一种平台无关的方法。

另一方面,通过平台优先,您更有可能搜索和选择特定平台的组件。浏览特定于平台的组件可能需要更多时间,但这也意味着您的设计系统将更容易扩展和维护。平台优先的一个很好的例子是Apple 的 UI 工具包

两种方法都有其优点和缺点。重要的是尽早做出选择并坚持您的选择。并确保其他所有参与设计系统工作的人也这样做!

对组件进行分组

在创建组件时,最好考虑它们彼此之间的关系。问自己以下问题:此符号是否是另一个符号的非活动状态?或者,此画板模板是否特定于某个设备?

确定一组命名约定,以帮助将组件分组在一起,甚至在它们之间创建层次结构。例如,您可能有一个标准的按钮符号,然后创建您经常重复使用的其他版本,例如非活动状态变体或带有不同 CTA 的按钮。通过将这些符号命名为“Button”、“Button/Inactive”、“Button/Buy-Now”、“Button/Inactive/Buy-Now”等,您可以自动在 Sketch 中对它们进行分组。

每当您搜索组件时,这些按钮将并排显示,从而更容易找到或交换。但是,尽量保持您的组件层次结构尽可能平坦。在确定结构并添加不必要的复杂性之前,请始终问自己是否可以简化您当前的方法。

专家提示: 您可以使用表情符号,例如📱和💻表情符号,来命名特定于设备的组件。

使用单一来源

随着设计系统的发展,您可能会发现自己需要进行重大或临时更改。但是,如何在不干扰可能已经在使用的设计系统组件的团队成员的情况下进行更改?

加星标版本可以通过将您的设计系统的最新(或任何)迭代设置为其他人可以继续使用的默认值来提供帮助。这意味着您可以处理新版本,而不会影响团队的工作流程。完成所有更改后,您可以星标该资源库的版本,我们将向任何使用该资源库的人发送更新。

以下是一些关于如何使用版本星标来更好地管理设计系统的额外提示

  • 添加一个用于预览更改的页面。 通过在您的资源库中添加一个用于高保真模型和屏幕的专用页面,您可以查看您的组件更新将如何影响最终设计——所有这些都无需对版本进行星标或推送任何真正的更新。
  • 添加描述。 您可以向您的星标版本添加描述,以描述任何重大更改,从而使您的团队更容易找到合适的版本。
  • 为您的团队设置“发布日期”。 根据您的更新节奏,您可以设置一周或一个月的特定日期来星标您的资源库的新版本。设置一个固定的日期也可以让您的团队有一个时间范围来在发布之前检查和测试任何更改。

星标版本对于随着时间的推移维护和发展设计系统非常有用。它提供了控制权,记录了您的更改,并将创建与使用分开。

使用样式构建组件

在创建组件时,尽量尽可能多地依赖样式和颜色变量,而不是单独自定义每个组件。这种方法保证了,如果将来某个地方出现任何样式和颜色更改,您可以轻松地更新组件和屏幕,而不会造成太大的干扰。

例如,假设您基于品牌颜色和排版设计一个着陆页。如果您使用颜色变量和样式,您可以通过更改这些库组件来重新设计整个设计,而无需单独更新所有内容。

如果您想了解更多信息,我们有一整套关于颜色变量的指南!

建立设计系统委员会

无论您的团队规模如何,定期举行会议来确定您的设计系统的状态可能都是一个好主意。 我们可以将其称为设计系统委员会,它可以由任何需要参与的团队成员组成。

目标是围绕您的设计系统以及它是否适合当前状态下的每个人进行持续对话。通过这些会议,您可以决定要删除、组合、添加或修改哪些元素。利用这段时间来建立您的设计系统架构,围绕组件的演变和创建设置原则,并定义您的文档目标和版本控制策略。

总的来说,建立一个设计系统委员会是收集反馈并让每个人都有机会谈论自己的经验和痛点的好方法。它们也非常适合让所有重要的利益相关者保持同步,并确保团队中的每个人都感到被包括在内。仪式和程序由您决定 - 没有人会抱怨免费披萨!🍕

最终,只有当人们实际使用设计系统时,它才有用。建立委员会将增加设计系统满足团队或组织需求的可能性。此外,它可以阻止人们擅自行动并在指定的库之外创建自己的组件。


设计系统既通用又有用,但它们确实需要在开始时做一些准备工作。给自己和您的团队足够的时间来考虑您的需求以及您可以使用哪些技术来最好地解决它们。这样,您将构建一个真正适合您的设计系统,并在以后进行迭代和扩展时获得额外的信心。

您可能还喜欢

免费试用 Sketch

无论您是 Sketch 的新手,还是回来看看有什么新功能,我们都会让您在几分钟内完成设置并准备好完成您的最佳作品。

免费开始
免费开始