Figma交互中的变量和条件

前面提到的Figma交互设置，都是围绕页面本身的基础操作和不同画板Frame之间的跳转，动效的起始和结束都是已经设计好的界面。

而Figma还提供了三个进阶的交互动作，可以直接变更页面（没有提供结束页设计）内的特定内容，分别是：

• Set variable 设置变量
• Set variable mode 设置变量模式
• Conditional 设置交互条件

提示：想要掌握这些交互设置的应用就必须先了解Figma中的变量Variable功能。

Set variable 设置变量功能，即通过交互变更指定变量的值。在选中后包含Target变量目标和Value变量值两个操作选项。

Target可以展开已经添加过的变量列表，可以选中任意已经添加过的变量和类型，包括颜色、数字、文本、布尔等。选中后，可以在 Value内设置要变更的值。

变更变量值，就可以顺势变更变量关联的图层内容。例如添加了文本变量和值为 “Username：未登录”，在登录按钮交互中选择Set variable 并把Username的值改为“酸梅干超人”，那么在界面中所有关联了 Username的图层文本就都变更成“酸梅干超人”。

总结起来，如果想通过交互变更一个界面内的色彩、文本、图层显示，就必须结合变量功能，而不能像别的交互软件一样直接通过交互动作实现。

这么做的原因，是因为Figma希望内容变更的影响是“全局”的，而不是一个个添加。假设交互中的所有界面出现了10个用户名，传统的交互设置逻辑需要添加10条交互设置来变更它们，而添加了变量作为媒介，就只需要设置变量即可。

Set variable mode 设置变量模式是切换合集 Collections中应用的模式列表，可以批量切换该合集内的变量值。这种改动也是全局的，只要交互所有页面中关联了这些变量的图层都会受到影响。

模式切换最常应用于预览中的色彩模式切换，比如在交互中将界面的浅色模式改为深色模式。

Conditional 设置交互条件，则是先通过条件判断再执行指定交互的动作模式。当选择 Conditional 以后，它的面板样式就会有发生转变，需要先添加条件 Conditional，再分别指定 if执行的交互动作和else执行的交互动作。

if…else…条件语句即如果…否则…，对没有编程基础的同学会比较陌生，简单解释起来就是先有个前置的条件判断，这个判断会包含“是”或“不是”两种结果，是的话给出一种应对方案即if…，不是的话则给出另一种应对方案即else…。

所以Conditional 设置的第一步，就是在条件输入框内添加条件。在Figma中条件是以特定表达式的形式设置的，表达式内包含变量、运算符、判断值三个部分。

变量即在 variables 中添加过的变量，是用于判断的对象，运算符则是等于(==)、不等于(!=)、大于(>)、大于等于(>=)、小于(<)、小于等于(<=) 这6种判断方式，判断值则是用于实现最终判定的标准。这么说听起来可能有点绕，但看看下面几个案就能很快理解：

在表达式中，判断值可以是手动输入的值，也可以是其它变量（的值）。如果用于判断的变量是布尔型 Beolean，则它的判断值只有 True是、False否、Not无三种，其它值不生效。如果用于判断的变量是字符串 String，那么判断值需要被英文双引号””包含。

Condition除了是单一的条件判断以外，也可以是一个逻辑表达式，即在条件之后添加 “与 and”、“或or”运算符，对多个条件进行并列的逻辑运算，这就会让条件进行更复杂的判定。但这个操作应用场景非常有限（为了碗醋做顿火锅），且理解起来过于复杂，所以不在这里解释，大家可以忽略它。

在左侧的面板中，if和else if 下方都可以添加交互动作 Action，当条件表达式的判定结果为是则执行if的动作，不是则执行 else if 的动作。要注意的是，左侧面板下方可以有添加按钮可以添加其它交互动作，一个交互事件内可以一边做条件判断，一边并行实现其它动作。

同时，一个交互事件内还可以添加多个Conditional，每个条件判断都是一个独立的动作，设计师确保它们的动作不会有冲突。

条件判断的应用是为了帮助我们实现一些更智能的交互结果，比如注册过程中选择性别跳转到不同页面，设置年龄过程中成年和未成年打开的弹窗不同，添加商品数量后根据不同价格给出不同满减提示等等。

最后再次强调，因为Figma是设计软件而不是交互软件，变量和条件功能的设计并不理想，实现过程非常的繁琐，投入和产出不成正比。在真实项目中，只在必要的地方使用它们，尽可能减少它们的应用次数。如果一定要做拟真的交互演示，就建议切换到Axure中实现。