一致性是关键–如何构建Figma设计系统

本文概述

• 组件库的力量
• 设计系统主要是一个工具包
• 为什么Figma非常适合创建组件库
• 创建一个库文件
• 在Figma中构建设计系统–入门
• 创建一个Figma库文件
• 使用Figma库
• 除了在Figma中构建组件库之外

设计师之间的常识是, 好的设计系统会对我们运送的产品质量和开发速度产生巨大影响。随着创建全面设计系统的案例已经被阐明了许多次, 例如Google, GitHub, IBM等公司都在使用它们来更快地创建更好的产品, 所以问题就从”为什么要设计一个设计”转变了。系统？”到”我们如何创建出色的设计系统？”

那么设计系统到底是什么？ Will Fanguy将其定义为”在明确标准的指导下, 可组装以构建任何数量的应用程序的可重复使用组件的集合。”设计系统不仅可以包括UI组件库和模式库, 还可以包括样式指南, 最佳实践, 代码等。就像建筑师的建筑蓝图一样, 设计系统还可以作为产品团队在构建产品时的”唯一真相”, 并有助于保持一致性。

GitHub甚至可以共享他们的Figma组件库, 这是基于Figma的设计系统的一个很好的例子。诸如Storybook和Component-Driven Development之类的更广泛的工具对于实现和记录设计系统也非常有用。

设计系统可以保持设计的一致性, 并且对创建产品的每个人都应该有用。它是一个工具包, 可帮助设计人员更快地创建新的屏幕, 流程和原型。一个好的设计系统可以帮助开发人员了解设计决策背后的逻辑, 并有助于创建更具凝聚力的产品。它加快了设计过程, 使设计师有更多的时间进行试验。

对于那些与Figma合作的设计师, 让我们看看如何在Figma中创建组件库如何成为全面设计系统的关键部分。

IBM的Carbon Design System。

组件库的力量

有时, 过早投资于创建设计系统可能会适得其反。在设计产品的早期阶段, 该过程仍然很流畅。例如, 如果尝试使用两个主要导航栏, 则将两个导航栏都添加到组件库中将是没有意义的, 因为这会使团队中的每个人感到困惑。最好等到产品设计确定之后再进行测试(最好经过测试并最终确定)。

如果产品是成熟产品并且没有现有的组件库, 则设计系统应该已经由当前的实现方式确定。但这还没有编纂。在这一点上, 定义通用的UX模式并将产品提炼成在整个产品中定期使用的一组组件将是有利的。此外, 理想的是将组件库保存在易于所有人访问的中央位置。

Salesforce的组件库是其Salesforce Lightning设计系统的一部分。

设计系统主要是一个工具包

尝试使用像工具箱这样的设计系统是对其有效性的一个很好的试金石。如果有多个设计师定期使用它来加快流程, 那么它做得很好。如果开发人员可以在颜色, 字体样式上引用它, 或者在设计人员较少投入的情况下进行引用, 那么这也是一个好兆头。

通常, 将高度复杂的组件或只能在产品中使用一次或两次的组件包括在内是没有用的。某事物可重用性越高, 它在设计系统中的归属就越多。

Figma最近为组织发布了设计系统分析, 团队可以在其中查看设计系统不同部分的效率, 并帮助对其进行优化。

Figma提供了用于优化Figma中的设计系统的设计系统分析工具。

为什么Figma非常适合创建组件库

Figma是一个功能强大的设计工具, 具有许多强大的功能, 但是其中的一部分元素在设计复杂产品时变得特别有用：样式, 组件和库文件。这些功能有助于使设计系统保持最新状态, 有助于保持设计之间的一致性, 并提供从中心位置更新多个设计的快捷方式。

• 样式是一种颜色和字体(字体, 大小, 粗细等), 它们在一个位置定义, 可以应用于许多对象。
• 组件是按钮或聊天气泡之类的东西, 可以从样式, 形状和文本等对象以及其他组件中构建。
• 库文件允许样式和组件在多个文件之间以及与团队或组织共享。

Figma的核心是协作和共享。设计文件可以由浏览器中的任何人编辑, 自由共享, 并且可以实时更新, 因为多个用户可以同时编辑它们。这为设计系统打开了大门, 使其不仅可以在设计人员之间, 而且可以与开发人员和其他利益相关者进行更有效的协作。

创建一个库文件

在Figma中, 可以创建一个或多或少用作设计系统开始的库文件。在这里, 我们可以定义样式和组件, 然后在整个团队或组织中共享它们并在多个设计中使用。样式和组件可以在一处进行更新, 然后可以将这些更改自动引入所有单独的设计文件中。

这有两个主要优点：

1. 速度。通过消除设计人员手动更新可能数百种设计的需求, 可以节省时间。通过将组件管理在一个库文件中, 只需单击几下就可以在一个位置更新颜色, 从而可以遍历使用该组件库创建的每个设计。
2. 一致性。它通过使任务自动化来减少出错的可能性。

组织

在Figma中构建设计系统时, 在工具和理论之间建立相似之处非常有用。例如, 可以将Figma中的样式视为最基本的级别, 甚至比Brad Frost的Atomic Design模型中的Atoms更基本。这些是颜色和字体之类的东西, 它们有助于弥补产品的美感。

在原子设计模型中, 一个简单的Figma组件将被视为原子, 例如按钮。更为复杂的Figma组件将被视为分子或生物, 然后将其用于构建模板和页面。

Figma中的设计系统类似于Atomic Design。

组件库中最有用的一些东西是：

• 色彩
• 字型
• 品牌资产, 徽标等
• 导航
• 纽扣
• 通知事项
• 礼节
• 表单元素和验证

在Figma中构建设计系统–入门

在此示例中, 我们将创建一个简单的登录表单, 并说明可以推断和使用的组件和样式。

首先, 让我们考虑一下可以从此表单中重用的组件和样式。有一张卡片, 其中包含徽标, 表单字段和按钮。还有三种字体样式以及一些不同的颜色和效果可能有用。

如上所述, 在库中确定要包含的样式和组件后, 就该创建一个库文件并开始填充它了。

创建一个Figma库文件

创建一个新文件并将其发布为库。创建新文件后, 单击”资产”选项卡, 单击”库”图标, 然后单击”发布”。这会在库文件中发布样式和组件, 以便可以在其他文件中使用它们。

将文件发布为库：单击资产, 库, 然后单击发布以将文件转换为库文件。

现在可以在库文件中创建样式和组件, 并可以在其他文件中使用它们并从中央库文件进行更新。

如何创建Figma样式

库文件中的创建样式与其他文件中的创建样式相同, 如以下步骤所述。

• 选择要从中创建样式的对象。样式可以是颜色, 文本属性, 效果和布局网格。
• 单击要在新样式中使用的属性旁边的样式按钮(正方形中的四个点), 然后在弹出窗口中单击加号按钮以创建新样式。

• 这将显示一个模式来命名样式。使用语义名称而不是外观名称通常会很有帮助, 例如, 使用”主要颜色”而不是”绿色”, 这样可以更清楚地使用”样式”。
• 使用屏幕右下角的弹出窗口将样式发布到你的团队资源库, 或者在第一个实例中重复执行发布资源库的步骤。

这是Figma的有关如何创建样式的教程。

如何创建一个Figma组件

创建组件也非常容易。只需选择要从中创建组件的对象, 然后右键单击并选择”创建组件”。

组件以与样式相同的方式发布到团队库。

这是Figma的有关如何创建组件的教程。

一旦创建了一些样式和组件, 就可以与团队共享”库”文件, 并且可以在任意数量的文件中使用”样式和组件”。

使用Figma库

要在另一个文件中使用这些样式和组件, 库文件需要链接到我们要在其中使用新样式和组件的设计文件。只需再次打开库模式(资产, 库图标), 然后打开切换开关即可。用于要使用的库文件。

单击资产, 库, 然后打开要在此文件中可用的库。

现在可以使用组件库了。可以通过从屏幕左侧的”资产”选项卡将它们拖动到设计文件中来放置它们。更改文本样式, 填充颜色, 笔触, 效果和布局网格时, 可以以与本地样式相​​同的方式使用库样式。

在库中更新组件和样式后, 使用它们的文件需要接受更改。在库文件中进行更新时, Figma将显示通知, 并提供发布它们的选项。发布后, 所有使用”组件和样式”的文件都必须通过类似的通知或资产标签接受更改, 以更新其组件和样式。这样可以防止更改被意外发布和更新。

除了在Figma中构建组件库之外

Figma仅涵盖了完整设计系统的组件库部分。对于全面完善的设计系统, 值得考虑其他可以合并的部分, 例如品牌指南, 内容样式指南和开发人员文档。

Mailchimp的内容样式指南就是一个很好的例子, 它通过内容详细说明了语音语调和品牌。 GitHub上有一些很好的文档, 说明了它们的组件库如何在代码中工作, 而Google的Material Design System也有一些出色的示例, 记录了设计系统背后的逻辑。

作为一种设计工具, Figma已经非常成熟, 并且不断添加新功能。整个组织都可以访问的带有内置分析功能的Figma设计系统的添加是巨大的进步。这些功能的增加表明Figma的目标是成为一个成熟的, 全面的设计工具, 并且它正在朝着成功的方向发展。

• • •

在srcmini设计博客上进一步阅读：

• Figma作为设计工具的力量
• 使用Figma简化协作设计
• 迷你教程–在整个设计过程中充分利用Figma的功能
• 迷你教程–使用Figma按钮组件
• 使用这些顶级UX工具掌握你的手艺