在Figma中如何使用变量-初学者手册

在Figma Config 2023活动中，Figma团队发布了许多新功能-包括变量。Figma中变量的推出为设计师提供了一种新方法，帮助他们使设计更加灵活和适应性强。

在本教程中，您将学习Figma中的变量是什么，以及在设计中创建和实现不同类型的变量。

先决条件：

要充分利用本手册，最好具备如何使用Figma及其功能的基本知识。但请注意，这并非必需，因为我为每个人编写了本手册-无论他们的知识水平如何。

这本手册适用于所有对学习更多关于变量、Figma和设计的人。 内容：

• 什么是变量？
• Figma中变量和样式的区别
• 为什么变量对设计过程很重要？
• 如何在Figma中创建变量
  • 如何在Figma中创建颜色变量
    • 如何为令牌创建颜色变量
    • 如何在设计中实施颜色变量
    • 如何使用变量创建不同模式
  • 如何在Figma中创建数字变量
  • 如何在Figma中创建字符串变量
  • 如何在Figma中创建布尔变量 如何在Figma中创建布尔变量

什么是变量？

“变量”一词有很多定义。牛津词典将“variable”定义为“不一致或没有固定模式; 可能会改变”。另一种定义是“一个可能变化或改变的元素、特征或因素”。

上面的定义告诉我们，变量是动态的元素，容易改变。有了这些定义，我们现在可以定义在Figma中什么是变量。

在Figma中，变量存储可重复使用的值，如颜色和文本值。 与 Figma 中的变量和样式之间的区别

在上面对变量的定义中，您可能已经开始看到变量和样式指南之间的一些相似之处。虽然这两个功能都旨在改善您的工作，但有一些关键区别需要牢记：

• 变量是一种更高级的功能，它允许您在设计中定义和重用值，如颜色、文本和间距。另一方面，样式是预定义的设计属性集，如文本样式、颜色样式和效果样式。
• 变量允许设计在不同上下文中使用时发生变化，由于它们的动态性质，这与样式不同。例如，您可以将设计从浅色模式更改为深色模式，或者在为不同设备设计时更改填充值。这使变量非常适用于创建具有适应性组件的设计系统。
• 变量提供更灵活的设计 灵活设计组件的过程中，特别是在您想要在同一组件的不同实例中更改值（如按钮文本或颜色）时。样式通常用于维护一致的设计元素，如按钮样式、文本标题或颜色调色板。变量可以存储原始、单个值，而样式存储一组值。

为什么变量对设计过程很重要？

使用变量有很多重要性。

首先，变量有助于在设计系统中保持一致性。通过为颜色、排版、间距和其他设计元素定义变量，您确保这些元素在整个项目中具有统一的外观。这种一致性对品牌和用户体验至关重要。

变量还使设计具有适应性。设计师可以通过调整变量来迅速尝试不同的值，如配色方案或字体大小。这种适应性在为设计创建时非常有价值。 变量在设计中具有高效性。当一个变量被更新时，设计中所有该变量的实例都会自动更新。这节省了时间和精力，消除了手动更新特定元素的每个实例的需要。

变量在大型项目或设计系统中尤为有用，因为它们具有可扩展性和易维护性。它们允许设计师在不失控的情况下扩展其设计。

由于项目的增长和设计系统随时间演变，变量可以全局调整以适应新的要求。变量还提供了一个集中的位置来更新这些变化，确保所有设计元素都得到一致修改。

最后，变量在交接过程中对开发人员也有益。设计师可以为开发人员提供设计元素的精确数值，减少误解的可能性，简化实施过程。 在Figma中创建变量非常容易。接下来，我将为您介绍在Figma中创建不同类型变量的步骤。

目前，我们在Figma中有四种类型的变量：

• 颜色：用于颜色填充。
• 数字：用于尺寸、圆角半径和自动布局属性。
• 字符串：用于文本层和变体属性。
• 布尔值：用于切换图层可见性。

我们将在Figma中创建和实现每种变量，并且还将在高级原型设计中使用它们。

如何在Figma中创建颜色变量

我们将创建的第一种类型的变量是颜色变量。作为设计师或开发人员，您可能已经在项目中使用过颜色。因此，从设计角度来看，颜色的概念对您来说不陌生。

步骤1：打开一个新的Figma文件

假设您想为即将开始工作的新设计项目（例如杂志网站）创建颜色变量。您需要做的第一件事是打开一个新的Figma文件。 空白的 Figma 文件

步骤2：选择一个配色方案

接下来的步骤是为项目选择一个配色方案。每个设计项目都有一组颜色，可以重复使用以确保一致性 - 例如，用于标题和背景，用于突出主要按钮等等。

您需要选择相互搭配的颜色来设计。如果您需要帮助，请阅读我关于设计中的60-30-10规则 (opens new window)的文章。

步骤3：为每种颜色创建变量

接下来，我们将为调色板中的每种颜色代码创建变量。转到右侧面板，点击 本地变量。

本地变量指的是设计文件中的所有变量。 点击本地变量

点击 创建变量 来在文件中创建第一个变量。

一个下拉菜单会出现，包含我之前解释过的四种变量类型。由于我们尝试在本节中创建颜色变量，我们将选择 color。

创建颜色变量

一个创建的变量部分会出现，有两列：变量的标题（颜色）和变量的值（颜色代码-FFFFFF）。

选择颜色变量

给你的新变量起一个名字 – 你可以使用颜色的作用，比如主要背景。在下一列，输入颜色代码或使用颜色选择器。

重命名变量 & 类型 现在，您已经创建了您的第一个颜色变量！

要查看更多编辑选项，请将鼠标悬停在变量的行上。会出现一个 编辑变量 图标。

点击它以编辑颜色变量以适应您的喜好。

在编辑部分，您可以添加有关如何使用变量、隐藏发布信息等的描述。

完成以上步骤后，按照上述步骤为颜色调色板中的其他颜色创建变量。

您还可以将变量组织成组。为此，选择您要分组的颜色变量（按住 SHIFT 键），然后右键单击。 将颜色变量分组

这将带来一些选项:

• 创建具有选择的新组
• 编辑变量
• 复制变量
• 删除变量

创建具有选择的新组

选择 创建具有选择的新组，双击组名称，将其重命名为 color/blue。

重命名组

您可以根据自己的喜好将颜色变量进行分组 - 例如，背景颜色、标题颜色、特定颜色的不同色调等等。

蓝色颜色变量已分组。

瞧！您刚刚在 Figma 中创建了一个颜色变量组。点击集合下拉菜单，选择 重命名集合。 重命名集合

您可以将此集合重命名为_primitives_。

Primitives 意味着基本。您也可以决定是否重命名您的集合。选择权在您手中。

重命名基本集合

如何为令牌创建颜色变量

现在，我们将为项目中所需的文本、表面（如背景）和边框创建颜色变量。我们希望为我们之前创建的颜色调色板（变量）分配不同的功能。

点击本地变量并创建一个新集合。您可以将其命名为_tokens_。

创建新颜色变量并将其重命名为“primary text”。

为了节省时间，并在命名变量时对其进行分组，将变量重命名为_text/primary_。这将自动形成一个组。 创建和分组文本变量

点击填充框，转到_库_以查看所有创建的颜色变量。

从库中选择_Main Black_，位于_color/greys_下。

我们可以继续为不同的文本功能分配其他颜色变量，想分配多少就分配多少。记得在实际变量名称之前添加_text/_，这样它将自动形成一个组。

接下来，我们将为背景等表面和边框创建颜色变量。 颜色变量用于表面和边框

一些颜色变量可能具有相同的颜色代码，但它们具有不同的功能，这完全没问题。例如，按钮文本的颜色代码与主背景的颜色代码相同。

如何在设计中实现颜色变量

接下来，我们将在设计中实现这些颜色变量。

在下面的图片中，有四个没有颜色和图片的移动线框（我之前创建过这些）。

您可以在这篇文章中阅读关于如何创建线框的内容：什么是线框？ 如何从纸上草图转移到高保真线框 (opens new window)。

我们将使用我们创建的颜色变量为按钮和文本添加颜色，确保所有元素保持一致。

低保真线框

从第一个屏幕开始，让我们开始添加颜色到按钮和文本。 为按钮添加颜色。点击按钮，然后转到屏幕右侧的“填充”。

点击按钮

在“填充”部分，点击“样式”（旁边的四个点图标）。选择“样式”将显示您的库中的颜色列表。选择您为主按钮分配的颜色以实现它。

从库中的颜色变量中选择填充颜色

实现的按钮颜色

接下来，按照相同步骤为按钮文本设置白色颜色。

为按钮文本实现颜色变量 实现按钮文本颜色

您可以按照上述步骤继续为其他屏幕执行相同操作。不要忘记更新文本和颜色。

更新其他屏幕的颜色变量

您还可以添加一些图片或插图来完成外观。

更新设计添加插图

注意：您可以从 Figma 插件（如 Storyset by Freepik、Artify Illustrations 等）以及插图库（如 Freepik、Lapa Ninja 等）中获取插图。

如何使用变量创建不同模式

接下来，我们将为设计创建不同的模式。例如，如果您正在开发一个需要明亮色调的项目。 在设计中实现浅色和深色模式时，您可以简单地使用变量来实现，而不是手动更改所有设计元素以适应这些模式。

首先，点击“局部变量”创建一个新变量。文件中所有变量及其组的列表将显示：

颜色/蓝色：

• 主按钮
• 主蓝色

颜色/灰色：

• 主黑色
• 主背景

打开“局部变量”

接下来，我将创建一个新集合，这样我就可以专注于即将创建的模式。要创建一个新集合，只需点击变量标题上的菜单图标。

请注意，创建新集合并不是必需的。这只是为了帮助您将注意力从已经创建的其他变量上转移。

创建一个新集合

接下来，我将将集合重命名为“模式”。要重命名集合，s 双击标题，输入您喜欢的标题。

更改集合名称

重命名集合“模式”

接下来，点击_创建变量_以创建一个新变量。我会选择_颜色_，因为这是我们正在使用的变量。

创建名为Color的变量

创建的颜色变量将显示默认颜色代码：FFFFFF。

接下来，我会将变量重命名为_背景_，因为我正在尝试为每种模式（明亮和暗）设置背景颜色。 更改颜色变量名称：背景

我们一直在使用我们创建的变量的名称和值，但是当我们想要创建模式时，我们可以添加另一列。要做到这一点，只需点击标题上的加号图标添加一个新的变量模式。

点击加号图标

新模式将包含三列：

• 列1（变量的标题 - 背景）
• 模式1（变量的第一个值 - 颜色代码 FFFFFF）
• 模式2（变量的第二个值 - 颜色代码 FFFFFF）

创建新模式

接下来，我将将模式重命名为亮和暗。要做到这一点，只需双击标题并编辑名称。

重命名模式：亮和暗

现在，我们将为背景分配一个值。 为暗模式更改背景值

接下来，我们将为其他元素创建其他颜色变量，如文本、按钮颜色、按钮文本颜色等，适用于两种模式。我将列出规格，以便更容易理解：

浅色/深色：

• 正文文本：1A1A1A/FFFFFF
• 按钮：0C3272/FFFFFF
• 按钮文本：FFFFFF/0C3272
• iPhone标题：1A1A1A/FFFFFF

接下来，我们将继续创建变量。只需按照之前创建变量并为每种模式分配值的步骤进行操作。

为其他元素创建变量

接下来，我们要确保设计与我们创建的变量连接在一起。要做到这一点，只需保持ele 在设计中，选择文本，然后单击_Fill_中的样式图标。

点击“FFill”部分的样式图标

接下来，向下滚动弹出的列表，找到要将变量与之绑定的特定变量（在本例中为正文文本）。

选择正文文本变量。

对设计中的其他元素执行相同操作，包括背景。

请注意，我将保留插图的原样。

连接到变量模式的屏幕。

要检查模式是否有效，请在屏幕右侧面板的_Layer_部分上单击_change variable mode_图标。 点击“更改变量模式”图标

将出现所有模式（浅色和深色）的列表，您可以将屏幕切换到您选择的任何模式。

切换模式

在“图层”部分将出现一个名为“模式”的部分，表明其中一个屏幕处于暗模式。

一个暗模式和一个浅色模式屏幕。

如何在Figma中创建数字变量

接下来，我将向您展示如何在Figma中创建数字变量。

数字变量由数字值定义，可以应用于角半径、宽度或高度填充等。以下是创建您自己数字变量的步骤：

步骤1：选择一个变量

就像我们创建颜色变量时所做的那样，单击本地变量面板以选择您要创建的变量类型。 在这里，您将选择_number._

选择要创建的变量

选择“number”

当您选择_number_时，它将显示在具有值的变量列表中，在本例中为0。

显示带有默认值0的Number变量

现在，您可以将Number变量重命名为您决定的任何名称。要重命名变量，请双击_number_，并将其更改为任何您想要的名称。

重命名Number变量

我会将我的重命名为_OrderCount_，因为我试图实现一个允许用户增加他们尝试订购的食物份数量的功能。 更改编号变量

接下来，我们将将默认数字值设置为_1_。

设置默认数字值

现在我们将设计中的数字与数字变量（OrderCount）相关联。要做到这一点，请点击设计中的数字。

实施数字变量

然后转到屏幕左侧的_Text_。单击_Apply variable_图标以应用变量。

注意：只有在创建了变量时，_应用变量_图标才会出现在_Text_部分。

单击“应用变量”图标

单击图标将显示文件中所有可用的数字变量列表。接下来，您将选择要实施的变量。我会选择_OrderCount_。 选择一个数字变量

当变量已经实现（与数字相关联）时，它将显示在文本部分，表示已经实现了一个数字变量。

已实现的数字变量

现在，我们还需要两个数字变量用于设计中的其他数字值（食物成本和总成本）。这样，当用户增加他们订购的分数时，这些值也会发生变化。

我们不会包括送货费，因为不管用户订购的分数如何，它都保持不变。

接下来，我们将按照上面我们所做的相同过程来为这些创建数字变量。

创建其他数字变量

接下来，我们将把设计中的数字与他们连接起来。 他们各自的数字变量，就像我们之前所做的那样。

注意：在主设计中，我给实际数字（25）和美元符号（以文本形式）分配了不同的框架。这是因为在创建数字变量时，美元符号不会附加在数字上，因为它是一个单词，而不是一个数字。

因此，当我将数字变量与设计绑定时，我将将其应用于仅包含数字的框架。

给数字一个不同的框架，不同于美元符号

因此，当我将第一个数字与我创建的数字变量（Cost-Portion）绑定时，发生了有趣的事情。设计中的数字取得了变量的值。屏幕上之前的25.00变成了只有25，因为这是数字变量设置的值。 设计

为了避免任何不愉快，我将更改其他数字的值，并重新对齐它们。

更改并重新对齐设计中的数字值

我们刚刚为我们的设计创建了数字变量。在高级原型设计部分，我们将检查这些数字变量是否真正有效。

如何在 Figma 中创建字符串变量

接下来，您将学习如何在 Figma 中创建字符串变量。

如我之前所写，字符串变量用于文本图层和变体属性。使用字符串变量，您可以更改设计中的标题，翻转不同屏幕上的文本，更改语言模式等。

在本文中，我们将使用字符串变量来更改我们之前创建的每种模式屏幕上的标题（明亮和黑暗）。

和往常一样，我们的第一步是点击 本地变量 并选择我们想要创建的变量类型。 在本地变量中创建一个新变量

我会选择_String_。

从所有变量列表中选择“String”

当我这样做时，我刚创建的字符串变量将出现在变量列表中。

创建的字符串变量

如果您注意到，字符串变量有两列“字符串值”，因为我在_Modes_集合中创建了该变量。接下来，让我们看看是否可以更改每种模式的标题。

注意：字符串值是您要更改的实际文本。

所以，对于第一个屏幕，标题为“轻松完成交易”，我希望在黑暗模式下更改为“轻松交易，减少压力”。对于第二个屏幕，标题为“轻松支付账单”，我希望将其更改为“已支付账单”。 更容易的生活"适用于深色模式。

由于我们要更改两个不同屏幕的标题，我们将创建另一个字符串变量。

创建另一个字符串变量

接下来，我们将为不同模式输入不同的值。只需在两个模式的两个屏幕中输入不同的文本即可。

输入字符串值

接下来，我们将将刚刚创建的字符串变量与标题关联起来。要做到这一点，点击特定标题，然后转到_Text_部分的_Apply variable_图标。

应用字符串变量

然后，向下滚动并选择要应用的字符串。选择字符串变量。 一旦完成，字符串图标将出现，表示文本已应用字符串变量。

对第二个字符串执行相同操作：

将字符串变量应用于第二个屏幕

接下来，让我们测试一下字符串变量是否有效。选择应用了变量的屏幕，转到“图层”，并将模式从明亮调整为暗黑。

选择应用了变量的屏幕

选择暗黑模式

我的可以：

屏幕切换为暗黑模式

如何创建布尔值 在Figma中使用布尔变量

接下来，我们将学习如何创建布尔变量。

一般来说，布尔变量是只能有两个可能值的变量——true或false。在Figma中，布尔变量具有相同的功能：它们用于具有两个值（true或false）的变体属性或组件。

还记得上面设计中的切换吗？

我将把它改成复选框，并使用布尔变量使其起作用。

为此，我将复制组件并粘贴到另一个画框中。然后，我会添加复选框（稍后在主设计屏幕中替换它）。

接下来，我们将使选择成为一个变体。要做到这一点，在Figma文件标题上双击“创建组件”图标。 双击“创建组件”图标

一个变体将自动出现:

变体组件

接下来，我将为复选框创建不同的状态：默认、悬停和填充。

复选框的不同状态：默认、悬停和填充。

现在，我们将创建布尔变量。

要做到这一点，像往常一样转到_本地变量_并选择_布尔_。

打开本地变量

点击_创建变量_。

接下来，我们将从列表中选择_布尔_。

从列表中选择“布尔” 创建布尔变量

接下来，我们将重命名布尔变量_SaveFood_，因为我们正在尝试为后续订单保存食物选择的功能。

重命名布尔变量

接下来，我们将使变量_True_默认为真。要做到这一点，只需点击变量旁边的切换图标。

您已经创建了一个布尔变量！

我们将在高级原型制作部分为这个布尔变量创建一个交互，并检查它是否有效。

如何在高级原型制作中使用变量

在本节中，我们将学习如何在 Figma 中使用变量进行高级原型制作，使用我们之前在设计中实现的颜色、数字、字符串和布尔变量。

注意：只有当您的文件位于付费团队中时，才能在 Figma 上使用高级原型特性。 如果您没有付费团队版本，可以申请_Figma for Education (opens new window)_计划。这是 Figma 通过为学习者和教育工作者提供免费资源和付费版本的所有优势来帮助他们的方式。

当您需要处理大量屏幕并简化原型制作时，您可以使用高级原型设计。

使用数字变量进行高级原型设计

从我们上面创建的数字变量开始，让我们尝试检查它是否真的有效。但在这之前，我们必须实际制作原型设计。

请注意，您可以为用户可以增加或减少屏幕上某个项目数量的设计制作数字变量原型。制作原型有助于展示功能以及特定功能的工作方式。

首先，我会制作一个订单计数为组件的框架。要做到这一点，请选择框架，并单击 Figma 文件标题栏上的组件图标。 选择订单数量框架

点击组件图标

订单数量组件

再次点击组件图标，使其成为变体

使订单数量组件成为变体

我会在屏幕外创建一个框架，将变体拖放到那里，这样我就能很好地处理交互。

将一个框架放在屏幕外

记住，我们希望实现这样一个功能：当用户点击加号图标时，食物份数增加。

我们将从这里开始原型设计。

现在，点击默认变体中的加号图标并转到下一页。 点击默认变体中的加号图标

接下来，在交互区域中点击加号图标以添加交互。

添加交互

将显示一个显示交互的选项卡。在这种情况下，它被设置为默认的“点击时”，尚未添加任何交互（无）。

现在，点击下拉图标，上面写着“无”。

点击下拉图标

它会弹出一个列表：

• 转到
• 更改为
• 返回
• 设置变量
• 条件
• 滚动到
• 打开链接
• 打开覆盖
• 交换覆盖
• 关闭覆盖 在下拉菜单中列出

选择_设置变量_。

文件中的所有变量列表将显示出来，然后您可以选择要实现的特定变量。我将点击_OrderCount_。

选择“设置变量”

再次点击_OrderCount_以编写数学表达式，所有可用的数学表达式将出现：

点击Order Count（第二次）并显示所有数学表达式

我会选择_加法_，因为这是我们要做的操作。 接下来，我将在加法图标旁边输入“1”以表示加1。

将数字1添加到表达式中

完成！

现在，我们将按照同样的步骤为减号图标做同样的操作，使表达式变为减法而不是加法。

为减号图标添加交互

完成！

注：我们实际上不需要之前创建的变体。您可能只在想要创建悬停状态的情况下使用变体。我只是想向您展示在这个过程中创建变体有多么容易。

接下来，我们只需复制原型组件并将其放回主设计中。

包含原型变量的框架 在主设计中的原型组件，点击左侧面板顶部的_Assets_。

此部分将显示您当前页面中的所有资产。

显示页面上的所有资产

接下来，我会将框架拖到设计中。

将资产拖到主设计中

注意：如果您不想按照上述过程将原型组件放置在设计中，只需复制组件（CTRL + C），然后_粘贴以替换_主设计上的框架。

现在，让我们查看我们的原型。要做到这一点，您不需要在另一个选项卡中打开原型。您只需点击资产，然后按SHIFT +空格键。

点击资产

您的屏幕上将出现另一个框架。它是交互式的，您可以测试您的 互动框架显示在您的 Figma 屏幕上。

尝试点击框架上的减号和加号图标，看看它们是否起作用。

检查原型后，我想要实现一些逻辑。

我们不希望在点击减号图标后继续，直到0之后给我们一个负号，就像您在下面的图片中看到的那样。

减号图标给我们负值

这是没有意义的，所以我们将添加一个条件。

条件简单地设置了关于交互应如何工作的规则。

为此，我将转到之前制作的组件所在的框架。

包含原型组件的框架

我将在减号图标上添加条件。 所以，我希望数值停在1，因为这是用户可以订购的最小数量（例如，他们不能订购一半或0）。

因此，我们将放大到组件以添加条件。确保您也在原型标签上。

移动到原型标签并放大到原型化的组件

我将点击减号框旁边的变量图标。

选择与减号图标框附近的变量图标

这将显示已设置的交互：

接下来，我将点击交互标题上的“×”旁边的加号图标。 点击交互式标题栏中的加号图标

我会从列表中选择 条件，然后会出现以下选项：

• 导航至
• 更改为
• 返回
• 设置变量
• 条件
• 滚动至
• 打开链接
• 打开覆盖层
• 交换覆盖层
• 关闭覆盖层

选择列表中的条件

然后我们会编写条件。要做到这一点，点击 if else 语句旁边的 编写条件。

编写交互操作的条件

当我们点击 编写条件 时，会出现所有数字变量的列表。我会选择 OrderCount。

选择 OrderCount

这将显示所有可用条件的列表：

• 等于
• 不等于
• 大于
• 大于或等于 * 小于
• 小于或等于

我会选择 不等于。

选择“不等于”条件

接下来，我选择的条件图标将出现在编写条件的输入字段上。

条件出现在输入字段上

接下来，我会输入0，这意味着交互不等于0。

输入0

接下来，我会关闭框架，并尝试将“设置变量”部分移动到交互中的“条件部分”下。要关闭“设置变量”部分，请单击小的下拉图标。

单击下拉图标关闭设置变量时，设置变量 封闭集变量部分

接下来，我将把“设置变量”部分拖到“条件”部分下面。要做到这一点，只需将鼠标悬停在“设置变量”部分上，然后使用触控板或鼠标拖动它。

将设置变量拖到条件下面

我们刚刚为我们的交互添加了一个条件！减号框的图标将变成一个条件图标，表明已添加了一个条件。

将条件添加到减号交互

现在，您可以测试这个新的交互，看看它是如何工作的。

我的肯定可以！它再也不会低于0了。

如何实现每份成本变量

现在，我们希望其他数字变量部分将被最小化，允许您将该部分移动到“条件”部分下面。 成本（每份成本和总成本）会随用户订购的份数增加而增加。

我们将从加号图标框开始：

回到我们一直在工作的组件...

点击加号框，然后继续设置变量。

打开原型组件的框架

我会点击互动标头上的加号图标。

点击互动标头上的加号图标

接下来，我会选择设置变量。

选择设置变量

会出现已在文件中创建的所有变量的列表：

• 用于文本、按钮、标题等的颜色变量 * 数字变量 - OrderCount, _Cost-Portion_等等。

A list of all variables in the file

I'll scroll down to choose cost-portion, which is the cost per food portion a user orders.

Choosing "Cost-portion" (the first time)

An input field to write an expression for the variable will come up.

Write expression input filed

To write an expression, click on Cost-Portion again and select Addition.

Choosing cost-portion (the second time) and selecting addition

Addition icon coming up on input field

Next, I'll input 25, m 每点餐一份食物，应添加+25。

输入25

在为加号框架添加交互后，我们将按照同样的过程为减号框架添加交互。完成后，“设置变量”部分应位于“条件”部分下方。

为减号框架添加交互

请记住减号框架有一个条件，我只需将新交互拖到条件内部。

将新的“设置变量”交互拖到条件里；

现在，请尝试测试您刚刚添加的新交互。我的肯定有效！

测试新交互

接下来，我们还有最后一个 在下面的互动中，按照上述步骤来重建这个互动。从加号框开始，实施变量以确保订单增加时增加25美元。它应该显示一个占位符 - 总成本 + 25。

实施总成本变量

现在，对减号框执行相同的操作并测试互动。不要忘记在条件中添加新的互动。

我的运作正常！

测试互动

您刚刚学会了如何在 Figma 中通过高级原型制作数字变量。恭喜！

使用布尔变量进行高级原型制作

接下来，我们将为之前在文章中创建的布尔变量创建一个互动。

注意，您可以在具有复选框和切换功能的设计中原型制作布尔变量。原型制作将实现布尔变量。 如何使复选框正常工作。

要创建交互，请转到原型标签，并专注于包含布尔组件的帧。

包含布尔组件的帧

现在，我们的主要交互将从悬停状态开始，因为这是用户尝试单击复选框时的状态。但是，我们仍然需要添加一个操作，将用户从默认状态转移到悬停状态。

为此，我将只需单击第一个变体，并将其拖动到第二个变体。

将第一个变体连接到第二个变体

我将将_On-click_更改为_While Hovering_。要做到这一点，只需单击_On-click_下拉菜单，然后从弹出的列表中进行选择：

• 单击
• 拖动
• 悬停时
• 按下时
• 键盘/游戏手柄
• 鼠标进入
• 鼠标离开
• 鼠标按下 设置延迟后

单击下拉

从列表中选择“悬停”

已选择“悬停”

我还想将“即时”更改为“智能动画”，因此我将单击“即时”旁边的下拉图标，并从显示的列表中选择：

• 即时
• 溶解
• 智能动画

更改“即时”为“智能动画”

交互效果如何

因此，我们已完成第一个交互，并将开始连接第二个变体与第三个变体（悬停 - 填充）。

就像我们之前所做的那样，w 我们将仅将第二个变体拖动到第三个变体。

将第二个连接到第三个变体

交互效果如何

正如我之前所说，主要交互从第二个变体开始，因此我们不会按照添加第一个交互的相同步骤进行。

继续操作，我将点击交互标题上的加号图标以添加操作，并从弹出的列表中选择“设置变量”：

• 导航到
• 更改为
• 返回
• 设置变量
• 条件
• 滚动到
• 打开链接
• 打开覆盖
• 交换覆盖
• 关闭覆盖

点击交互标题上的加号图标

选择 设置变量

接下来，我将点击“选择目标变量”以选择布尔变量。

点击“选择目标变量”

我会滚动变量列表以选择我想要的变量：SaveFood。

选择“SaveFood”变量

现在，为了编写这个变量的表达式，我们将说值将等于true。因此，我会选择“True”。

编写表达式并选择“true”

选择了“True”之后，表达式（true）将放在SaveFood变量下面，表示应用了表达式。

交互效果展示

接下来，我们只需复制原始组件并 将默认组件粘贴到主设计中

要直接在 Figma 页面上检查原型，请单击 Shift + 空格键。

我的可以！

但是我注意到一个问题；我无法取消复选框。没有为此提供交互。现在，我们将快速添加该交互，以使我们的组件完美运作。

为此，我们将返回到我们的组件，确保我们处于原型模式，并将连接从填充状态拖回到默认状态。

现在，它完美运作！

如何为开发人员使用变量 - 使用 API

变量对于团队非常有帮助。 Figma的插件API和REST API现在支持变量。由于变量目前处于公开测试阶段，功能和特性可能会根据反馈而发生变化。- Figma文档

Figma有三个文档为开发人员提供了关于变量的支持：

• REST API (opens new window):

该API包括用于查询、创建、更新和删除变量的端点。- Figma文档

要使用此API，您必须是企业成员。

• 插件API (opens new window):

此API支持创建和读取变量，并将变量绑定到组件。- Figma文档

• 小部件API (opens new window): 该API与插件API相连。小部件可以通过包含插件API来访问它。 小部件是可以用来创建交互式原型的交互式元素。小部件扩展了设计文件和FigJam板的功能，并经常是更大设计系统的一部分，这是可重用组件的集合。

变量存在于Figma中，可以使您的设计更好。它们易于使用和创建，并在每个设计项目中都很有帮助。为了节省时间，请确保将变量纳入您的设计过程中。

关键是要练习和探索，随着您的进步，您会变得更好。

感谢您阅读本文，希望您喜欢！

学习免费编程。freeCodeCamp的开源课程已经帮助超过40,000人获得开发人员的工作。开始学习 (opens new window)