但这其实是件好事。欢迎来到条件逻辑设计的新时代。
说实话，像疯狂复制画框、在 Figma 中弄出一团蓝色的意大利面条一样酷。尽管有点凌乱，用这种方式制作的原型在分享概念、测试可用性或记录交互以便移交时都能发挥作用。那么，为什么要强迫我们使用新功能，比如变量和表达式，以完全不同的方式完成它们呢？
答案很简单。原型应该作为最终设计的蓝图。 产品所有者从不在用户故事中设置复制屏幕任务或类似意大利面条的功能。开发人员不会在最终代码中制造意大利面条……或者至少不应该。用户故事定义了产品的实际行为。开发工作在单个屏幕上进行真实验证，以便他们能够理解产品并轻松进行维护和升级。无论是由他们自己完成，还是由将来的其他开发人员完成。原型应该反映这种工作方式。否则，我们设计师可能并没有真正掌握我们为最终用户界面带来的实际验证或数据。
而且我们一直能够在其他工具上制作真实原型。Protopie、Framer、Axure 只是我们多年来已经掌握的一些选项。并非每个项目都有预算进行实际原型设计，但这一领域正在发展。Figma 正在努力从传统 UI 转向真正的交互设计，努力将“高级”原型设计推向聚光灯下。
我明白。实际原型设计很难掌握。从制作 UI 转向开发真正的交互会让人感到非常吓人。Figma 并没有通过称之为“高级”来帮助我们。我宁愿称之为简单的原型设计。
今天，我们要驱散围绕“高级”原型设计的神话和误解。让我们一起踏上揭示 Figma 在原型设计领域的全部潜力的 3 个关键技巧的旅程。最终，您将掌握足够的知识和信心，将您的设计流程提升到新的高度。让我们开始吧！
在 Figma 中有 4 种类型的变量：字符串、数字、布尔值和颜色。每种类型都可以在特定场景中使用，但最终它们都具有相同的属性，允许它们存储数据，将其链接到某些内容，并在屏幕之间打印值。
假设您有一个流程，需要将数据从一个屏幕传递到另一个屏幕。例如，一个简单的使用 ApplePay 的结账流程。您可以使用 数字变量 打印所需金额，而不是根据购买选项的数量重复相同的结账流程。
一旦购买完成，您可以通过在 #total-credits 变量中进行简单的求和运算来显示更新后的积分金额。
您甚至可以使用布尔变量为每次购买显示新卡片，其中包含用户在每次交易中获得的新积分详情。
这是最终原型。所有验证都在一个屏幕上运行，就像最终产品应该做的那样。
在这里尝试实时原型：
尽管在 UI 工具包中具有一组颜色变量用于设计系统中的标记化非常有用，但对于原型设计来说，这种方式有点傻。但是，是的，您可以在这里和那里为颜色分配颜色 (您可以将十六进制视为字符串，但是，是的，我明白 Figma，这对我们设计师来说太复杂了)。在这个示例中，我们有一组 4 种颜色，可以分配给单个变量，以自定义您的头像颜色。
无论愚蠢与否，颜色变量 帮助我们制作定制交互。例如，在这个原型中，您可以仅使用一个颜色变量为每个独角兽、熊或恐龙定义颜色。
在这里尝试实时原型：
在事件上进行验证赋予我们避免复制屏幕的超能力。在 Figma 中，我们可以通过操作和 “表达式” 在每个事件上设置验证。在深入研究条件逻辑之前，先看看这个伪代码表达式：
一种解释是：如果数字变量 #taco 等于 0，则将标记为 “me” 的字符串变量设置为字符串“😢”。否则，当 #taco 不等于 0 时，将“me”设置为字符串“😍”。
我喜欢这样阅读：如果我没有玉米卷，我会很难过。如果我有玉米卷，我会很开心。 是的，聪明的家伙，我们甚至可以得到负数的玉米卷，但是让我们不要把这个快乐的练习搞得太复杂……
这可能是最可怕的话题。但这个意大利面条杀手只是一个 if/else 语法，您可以在其中使用一组逻辑和数学规则定义验证。根据交互，验证会将用户发送到 2 条不同的路径。如果规则得到满足，“if”路径会将用户发送到一个根据规则发生的体验。而“else”路径则是如果情况不符合整个规则时发生的路径。
在 Figma 中，表达式允许我们玩弄条件逻辑，让设计师修改存储在变量中的数据。我们可以通过 SetVariable 事件直接更新数据，或者通过 Conditional 运行验证，如果规则允许原型，就会更新变量中存储的数据。
最终，您要么直接将新数据设置到变量中，或者通过条件运行验证，让 Figma 根据用户的操作决定是否更新数据。继续这种逻辑，一旦您制作了原型，您将不再看到蓝色意大利面条，而会看到这样的东西：
在这个示例中，每次头像定制在第二个屏幕上运行时，我都会存储临时数据。如果交互返回，我们会重置颜色的临时选择、显示角色图标的布尔值以及计数器归零。
当按钮允许您导航到下一个屏幕时，可以使用简单的条件。直到屏幕上显示“Enabled” 变体通过 variant binding，否则它什么也不做。
条件逻辑是这种原型设计方式的核心。这就是为什么我将这些技巧标记为对 逻辑设计 有用的东西。也许 条件逻辑设计 更准确，但那听起来不够酷。
计数器用于跟踪必须计数的任何内容。我们可以在计数器上构建一些逻辑，以在事件中运行验证，例如根据一组规则启用按钮。
在这个原型中，我设置了 2 个带有 数字变量 的计数器，一个用于角色选择_(#c-character)，一个用于颜色选择(#c-color)_。
然后，每当用户选择一个角色时，原型会在 #c-character 变量中添加 +1。
每当用户选择颜色时，也是相同的逻辑，将 #c-color 变量中添加 +1。
您可能会注意到每个事件中的最后一个条件。这是我们在计数器上构建的逻辑，我们验证用户至少选择了一个角色和一个颜色，因此我们可以启用继续按钮。
通过这个计数器，我们可以决定按钮是显示为已启用还是已禁用。我需要在按钮上添加一点 variant binding，但我们稍后会谈论这个。
在这里尝试实时原型：
假设您需要安排一堂需要 250 积分的健身课。如果您有足够的积分，课程就会被安排。如果您没有足够的积分，您将被提示购买更多积分。这里我们有一个验证，可以将我们发送到模态框或返回到原始屏幕。要在 Figma 中制作这个，我们只需要一个变量，记录用户目前拥有的总积分。
在确认操作中会发生一些神奇的事情，我们将设置一个条件来验证用户是否至少有250个积分。如果条件得到满足，我们将返回到原始屏幕，并显示一个包含课程预订确认信息的弹出通知。如果积分不足，日程安排模态框将关闭，并显示购买选项的新模态框。
这是具有250个积分的路径A。
现在是具有较少积分的路径B。
在这里可以尝试原型：
变体绑定是一个您最近可能经常听到的很酷的概念。简而言之，就是当一个实例被链接（或绑定）到一个变量时的配置。您只能将字符串变量绑定到变体属性。
一旦一个变体与一个变量绑定，您可以通过点击或轻触等操作来控制显示哪个变体。例如，现在插图实例已经绑定，我可以为我们的变体链接的变量设置不同的字符串数据。如果我将变体的确切名称与变量中存储的数据匹配，这将允许我们根据用户的选择显示独角兽、熊或恐龙。
字符串值动态设置了最后一个模态框中的实例。在这个示例中，我们通过“Bear”按钮控制了temp-character的选择，将我们的字符串设置为“bear”，因此当我们跳转到最后一个模态框时，将显示一只熊的插图。
简单如吃馅饼... 抱歉，这是另一个工具的说法...（实际上，在 Figma 上进行大量原型设计比 Protopie 更困难，但那是另一回事）。
同样的原则适用于将布尔变量绑定到实例的图层属性。您可以通过右键单击眼睛图标将布尔值链接到图层属性。在这个示例中，如果尚未选择头像，我们将在第一个屏幕上隐藏插图。
直到最后保存操作，我们将布尔值更改为true，因此当我们返回到第一个屏幕时，插图将显示所需的自定义。
看起来不错。
在这里可以尝试原型：
通过变体绑定绑定的交互式组件将您的原型推向新的高度。无论是触发警报、显示通知还是添加微妙的动画，可能性是无限的。
您可以通过设置一个带有动画交互和一个不带动画的交互作为变体来使用这个技巧。在这个示例中，我们正在制作一个通知的交互组件，它在屏幕下方移动，停留4秒，然后通过向下移动穿过蒙版自动消失。
在这个示例中，我将动画变体绑定到**“toast-anim”变量，因此当用户成功安排课程时，将触发一个setVariable事件，将变量的字符串值从“Default”更改为“Animated”**，立即触发动画，因为它将变体切换为动画变体。
你是对的。这是提示2的示例。
在这里可以尝试原型：
在快节奏的设计世界中，采用条件逻辑而不是混乱的意大利面原型不仅仅是一种选择 - 它是一种必要性。通过利用实际的原型技术，我们可以追求效率、清晰度和精确度的新高度。
我们已经使用专门的工具做到这一点一段时间了。但是很棒的是，随着 Figma 在**“高级”**原型设计方面的努力，我们得以突显将实际逻辑集成到原型中的好处。
今天，我们还看到了如何使用变量、表达式、交互式组件和变体绑定等少量功能来制作真正**“高级”**的东西。
希望这些技巧能帮助您进入**“高级”**领域。通过使用条件逻辑，与团队分享您构建的酷炫作品，这样我们就可以共同结束这种意大利面的疯狂，迎接具有实际原型和条件逻辑设计的简化艺术时代。
