技术文章

伟大的设计往往是伟大的副产品 协作 .但是当涉及到像品牌指南或者产品重新设计这样的大型项目时,你需要一个额外的沟通工具。设计系统就是这样,一种确保每个人都在同一个页面上执行相同的视觉的方法。

今天,我将向你展示如何在草图中建立你自己的设计系统。

开始吧!新一代的

什么是设计系统?

在开始之前,让我们快速回顾一下 设计系统 是的。从本质上讲,这是你和团队其他成员,包括开发人员和产品经理之间的协议。设计系统帮助您创建具有一致性和可伸缩性的产品,这些产品包含一组共享的设计指南、组件和风格。

sketch" style="box-sizing: border-box; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1.75rem; line-height: 2.125rem; font-family: "Marfa Mono", "SF Mono", "Source Code Pro", Consolas, Menlo, monospace; margin: 3.75rem 0px 1.25rem; padding: 0px; vertical-align: baseline; letter-spacing: -1px; text-wrap: wrap;">如何在草图中建立设计体系

您可以使用库创建源文档来存储您的组件,如符号、颜色变量、样式和艺术板模板。它们是任何建筑在素描中的设计系统的基础。如果您需要复习图书馆或新的素描,我们鼓励您查看我们的  第102课图书馆 这是免费的!

基本部件

设计系统的主要目标是创建适合每个人的可伸缩的东西。为此,最好从最基本的元素开始,然后从那里成长。你首先要定义你的 颜色变量 , 文本 和 分层风格 ,你可以根据你的品牌身份或项目,视你的设计系统的范围而定。

一旦你准备好了基本的组件,你就可以使用它们来构建更复杂的组件 符号 和 艺术板模板 .

符号和艺术板模板

符号 是草图中任何设计系统的核心。它们非常适合创建复杂程度不同的可重用组件。虽然可以自由地编辑符号实例到我们内心的内容中是它们的好处之一,但我们如何才能确保我们忠实于品牌呢?

这就是将风格和颜色变量应用到符号中的地方。使用符号覆盖可以很容易地在样式和颜色之间进行交换,而不必对父符号本身进行任何更改。例如,您可能希望使用两个颜色变量来区分活动和不活动按钮。或者,您可能需要为长度或突出度不同的副本更改文本样式。

同样的逻辑,你可以使用 艺术板模板 持有许多符号,如导航条或标识。这些模板可以作为您的屏幕,您可以重用它们并以与符号相同的方式更新它们你越依赖文本样式、图层风格和颜色变量,就越容易管理和扩展你的设计系统。这样的话,你就可以通过简单的调整来改变应用程序设计的整个外观和感觉--所有这些都是在跟踪项目或品牌的预定身份的同时进行的。

把一切都集中起来

让我们看一个例子,说明我们如何将所有组件组合在一起。如果我想设计一个带有搜索框的登陆页面,我会遵循以下步骤:

• 为图标和文本字段创建颜色变量。

• 创建图标作为符号,并应用颜色变量.

• 使用颜色变量为字段创建层样式。

• 创建文本形式字段作为符号.

• 为占位符文本创建文本样式。

• 使用搜索图标符号、文本字段符号和占位符样式为搜索字段创建一个符号。

• 将搜索字段符号添加到登陆页面的画板上,并将其设置为模板。

使用这种方法,如果你需要改变文本框的颜色,它只需要改变一个颜色变量。您还可以一次性地更改占位符文本的样式并将其应用到所有地方。奠定基础使以后的迭代和缩放变得容易得多。

把你的设计系统提升到下一个层次

正如我提到的,设计系统不仅仅是一个组件的集合。他们通过设置正确的规则和指导方针,直接与设计团队或项目的需求沟通。

设计系统应该回答这样的问题:"我如何运用这种风格?"和"我如何使用这个组件?这样,你的团队中的每个人都能做出一致的决定,而不需要同步每个步骤。

准则和协定

在设计系统中加入指导方针和协议没有正确或错误的方式。在这里你可以应用的最佳实践是与你的团队达成一些基本规则。这就意味着引入开发人员、项目经理和任何其他的利益相关者,他们最终将与您所创建的设计交互。

指南也不必局限于设计。你可以带上你的用户界面作者 复制生态系统 就在眼前。你也可以与你的开发人员建立一些基本的规则,这样你就可以以一种最有帮助的方式构建设计系统。 转让 .

别忘了间隔

使用素描,你可以使用类似 智能布局 给组件分配一个内部逻辑。设置间距规则非常重要,可以帮助您保持一个定义的网格,使您的设计看起来连贯和平衡。

智能布局允许你的图层按照内容的比例自动扩展或缩小,直接传达你希望设计在利润率和比例方面的表现。覆盖

不要忘记,您可以在符号实例中覆盖文本、样式和颜色。覆盖使您的设计系统具有难以置信的灵活性,并使定制符号变得轻而易举。这是你可以使用的最有用的工具之一。

此外,您还可以在草图中为每个组件指定哪些覆盖将是可用的。这使设计系统管理员能够更好地控制组件和符号的行为,同时防止不太熟悉的团队成员实现不符合设计系统规则的结果。

设计系统是每个伟大的、可伸缩的项目的核心。所以一个帖子不足以覆盖所有的内容!下一期我们将讨论如何在草图中组织设计系统。