设计的未来｜如何使用Figma变量构建更智能的设计系统

type

status

slug

summary

date

什么是变量？

变量专用于存储可在设计中用作属性的值。他们的目标是帮助你让设计更加智能；它们可能成为您的设计系统的代币或根据特定规则调整原型。使用它们进行高级原型设计变得更加简单。

当我写作时，本教程功能处于公开测试阶段，并且仍在动态开发中。

变量可以存储以下值：

颜色——用于填充和描边

String——应用于文本图层

数字——用于间距、大小、文本层和角半径

Boolean——变体实例的图层可见性的 true/false 值

Figma 团队承诺很快我们将看到以下变量的选项：版式、渐变、效果

变量模式、组和集合——这些是什么？

变量模式允许您定义应用于不同模式的替代值。

最实用和流行的用法可能是为浅色模式和深色模式创建背景变量。另一个示例可能是间距——为断点应用宽度或填充——桌面、平板电脑和移动设备。

‍

一旦有了变量及其模式，您可能会开始考虑如何轻松管理它们。

有多种方法可以组织变量。就像样式一样，您可以通过添加“/”对它们进行分组。

您可以为颜色、文本、半径或间距创建组。他们将在一个系列中工作。

‍

那么，什么是集合呢？它们是组织变量的下一个附加层。

如果您在设计系统中工作，您通常会定义基元，例如更广泛的颜色和完整的版式范围；然后构建更多语义颜色和参考基元，最后将语义颜色应用于特定组件标记。

这就是集合的用处。您可以将原语分离为单独的集合，然后将另一个集合用于语义标记，第三个集合用于组件层。显然还有其他实际用途，但这是最简单的情况。

‍

如何在设计中使用变量

现在您知道什么是变量，只需看一下示例即可了解它们如何使您的设计变得更好：

1）使用变量作为令牌来更好地管理设计系统

2）定义不同断点的属性

3）为浅色和深色模式甚至超快的多个主题准备您的设计

4）即时准备多种语言的设计

5）使用条件逻辑创建高级原型

现在我们来详细解释一下如何制作。

1.设计系统中的变量

使用变量在设计系统中定义设计标记。以下是您可以如何在自己的工作流程中执行此操作的示例工作流程：

1）将整个调色板添加为“Primitives”或“Foundation”集合。

2）准备一组语义颜色（背景、笔画、文本等）。作为值，使用 Primitives 集合中的引用。

3）此时，您还可以添加一种模式来为“浅色”和“深色”主题制作令牌

4）如果要将最后一层添加到设计系统中，请定义组件集合。它还将包括明暗模式。添加“按钮背景”、“模态笔划”等变量，并将对语义标记的引用作为值。

现在您的设计系统中的颜色标记已经有了相当坚实的基础！对于数字变量遵循相同的模式来创建间距和角半径。

‍

2.不同断点的变量

当涉及到使用数字变量添加间距值时，您可以考虑为特定设备断点添加模式。

根据您的项目要求，添加桌面、平板电脑和移动设备的默认选项。

如果您的产品要具有可自定义的 UI，您可以考虑为“标准”、“紧凑”和“宽敞”选项制作间距模式。

‍

3.带变量的明暗模式

正如我在第一点中已经提到的。当你添加一个变量时，你可以向它添加一个额外的模式。

利用模式最直观的方法是定义“暗”和“亮”模式。

4.带变量的多语言设计

如果您的项目处理多种语言，那么准备针对不同国家/地区的每个设计总是很困难。

现在，当您为项目副本定义集合时，请定义语言。变量的每种模式都是不同的语言。第一个始终是默认的。

现在，当 Figma 中有一个部分使用特定模式时，您的所有设计都将变成特定语言。

5. 借助变量进行高级原型设计。

您是否曾经准备过看起来像意大利面条的原型？使用变量构建更加智能和简单的高级原型！

借助变量，您可以创建进行计算或依赖条件逻辑的原型。

为了保持变量干净，您可以添加专用于原型值的单独变量集合。

由于原型选项“设置变量”，可以进行计算。您可以设置一个特定值，甚至可以根据其他引用的变量来计算它。

以下是如何使用变量准备交互式原型的示例：

1）您必须将变量连接到特定层（显示购物车中的商品数量的文本标签）

2）跳转到单击时将启动计算的组件（在大多数情况下，这将是一个按钮）。

3）选择按钮后，切换到原型模式并添加“点击交互”。

4）选择“设置变量”选项，然后选择从第一个点应用于文本标签的变量。

5）在下一节中，称为“to”，您将配置与按钮交互后出现的目标值。这可能是常数值、数学运算或表达式。

‍

条件操作允许您使用“if else”来提供特定逻辑。使用上面计算中的示例。如果没有条件，您的购物车中的商品可能会变成无限数量；如果您想限制项目数量（或防止其显示负值），请向上述按钮组件添加条件选项。您可以将“设置变量”选项拖到特定的条件部分，并在“其他”部分中设置替代路径。

了解所有这些可能性的最好方法就是尝试一段时间。反复几次，你就会熟悉了！

Figma 变量的附加提示

让我们为您关于变量的新知识添加一个樱桃。有一些推荐的做法可以立即帮助您：

提示 1：将集合设为私有

您可能希望将变量集合设为私有有多种原因。例如，您可能想要隐藏原始值并仅公开标记。

要将集合设为私有，就像使用组件一样，添加一个点“.”。或下划线“_”作为集合名称的前缀。

就是这么简单。

‍

提示 2：样式还是变量？

很明显，要问自己一个问题：我的设计要使用哪些功能？Figma 允许我们同时使用两者并获得几乎相同的结果。

然而，变量要先进得多，如果您正在构建一种设计系统或进行更多原型设计工作 - 就去使用它们吧！另一方面，某些属性（例如渐变或效果）没有变量，而样式在这些属性中效果很好。

另外，很高兴知道变量更加原子化；它们存储单个值，而样式可能是值的组合。

最后，变量可以引用其他变量，这使得它们更加可配置。样式不能做到这一点。

提示 3：使用“部分”（或“页面”）来显示变量选项集。

将设计放入特定部分后，您可以选择该部分并配置该区域中使用的集合和模式。

由于上述配置，您可以确定该部分中的所有设计都使用一组特定的变量。

值得一提的是，您可以将相同的技术应用于整个页面。这意味着您可以将不同的语言和暗/亮模式拆分到不同的 Figma 文档页面中。

‍

技巧 4：重新排序变量

变量按字母顺序组织。这意味着您（还？）无法像样式一样拖放来自定义它。

不幸的是，这意味着在核心文件中，您将在图层列表顶部看到所有私有变量，因为它们以“.”开头。或者 ”_。” 由于良好的命名约定，其余部分可能会更好地组织（集合可能以数字开头）。

技巧 5：在不同文件中使用变量

就像样式一样，您可以在库文档中发布变量。然后启用库，您将能够在不同的文档中看到它们。对于更复杂的设计系统非常有帮助。

总结一下

Figma Variables 对于每个设计师来说都是强大的武器。显然，您可以跳过它们并像以前准备设计一样工作。然而，利用新功能的强大功能将大大提高您的工作流程，因此我强烈建议探索它们并将其纳入您的日常设计活动中。

作者：thallium