在过去，要在 Figma 中制作一个包含“商品数量加减”、“总金额实时汇总计算”或“库存不足禁止下单”的动态高保真原型，往往需要为每一种可能性穷举绘制几十个画板，并在画板之间连满复杂的蜘蛛网交互线。这种方式不仅维护成本极高，而且一旦页面某个细节调整，所有分支画板都必须同步修改。

随着 Figma 原型引擎升级，引入了 Set Variable（设置变量）、Conditional（条件逻辑 if/else） 与 Expressions（数学表达式）。设计师现在可以在单一画板内实现带有数据状态和业务逻辑的真交互体验。本文将通过电商购物车步进器与结算中心的经典案例，全流程拆解高级逻辑驱动原型的实操秘籍。

---

1. 高级原型交互三大基石

在 Figma 原型面板的交互动作（Interactions）下拉列表中，以下三项能力构成了逻辑原型的核心支柱：

动作能力	触发语法	实际功能与设计用途
Set variable	Set [Variable] to [Value / Expression]	动态修改指定变量的值。支持常数赋值、加减乘除数学运算、字符串拼接。
Conditional	if ([Condition]) { ... } else { ... }	根据表达式真假值执行不同分支动作（如判断余额是否充足、判断商品数是否为 0）。
Scroll to / Open overlay	传统动作组合	与变量动作链式组合触发，例如“若表单校验通过则跳转成功页，否则弹出错误浮层”。

---

2. 核心数学表达式与支持的操作符

在 Set variable 面板中，可以直接书写数学计算式。Figma 支持以下操作：

• 加法 (+)：计算数值累加（如 total = price + shipping），或文本字符串合并（如 fullName = firstName + " " + lastName）。
• 减法 (-)：计算数值递减或库存扣减（如 itemCount = itemCount - 1）。
• 乘法 (*)：按单价与数量计算小计金额（如 subtotal = itemPrice * itemCount）。
• 除法 (/)：按折扣比例折算或平分金额（如 monthlyFee = totalAnnual / 12）。
• 比较逻辑符：==（等于）、!=（不等于）、>（大于）、<（小于）、>=（大于等于）、<=（小于等于）。

---

3. 实战：从零构建智能电商购物车计算器

我们将在一个画板内构建一个完整的商品卡片：包含商品单价、加减步进器、动态总价、以及“库存售罄/达到限购”的禁用条件拦截。

第一步：初始化相关原型变量 (Variables)

打开 Local Variables 面板，新建一个名为 CartSystem 的集合，创建以下变量：

[Number]  itemPrice    = 99     (商品单价，固定为 99 元)
[Number]  itemCount    = 1      (当前加购数量，初始为 1)
[Number]  maxStock     = 5      (库存上限，最多允许买 5 件)
[Number]  totalAmount  = 99     (总计金额，初始为 99)
[Boolean] isMaxReached = false  (是否触达上限)
[Boolean] isMinReached = true   (是否触达下限，数量为 1 时减号置灰)

第二步：将变量绑定到画板界面元素

1. 加购数量文本：选中展示数字 1 的文本图层，在右侧文本属性右键选中 Apply variable，绑定到 itemCount。
2. 总金额文本：选中展示 ¥99 的文本图层，绑定到 totalAmount。
3. 加号与减号按钮状态：
   • 减号按钮（-）：为其透明度或置灰样式绑定布尔变量或图层状态，当 isMinReached == true 时显示浅灰色不可点状态。
   • 加号按钮（+）：当 isMaxReached == true 时置灰。

第三步：为“加号按钮 (+)”编写递增与条件拦截逻辑

选中加号按钮，在右侧 Prototype 面板点击 + 添加交互：

• 触发条件 (Trigger): On click
• 动作列表 (Actions):
  1. 点击 + 添加第一层判断：Conditional
     • 条件：if (itemCount < maxStock)
  2. 在 if 分支内部添加嵌套动作：
     • Set variable: itemCount = itemCount + 1
     • Set variable: totalAmount = itemCount * itemPrice
     • Set variable: isMinReached = false (数量大于 1，减号一定可用)
  3. 继续在 if 内部添加边界判断：
     • Conditional: if (itemCount == maxStock)
       • Set variable: isMaxReached = true
  4. 在主 else 分支（即已达到最大库存时）：
     • Open overlay: 弹出 Toast 提示框：“抱歉，该商品每人限购 5 件！”

第四步：为“减号按钮 (-)”编写递减与下限保护逻辑

选中减号按钮，添加 On click 交互：

1. Conditional: if (itemCount > 1)
2. 在 if 分支内执行：
   • Set variable: itemCount = itemCount - 1
   • Set variable: totalAmount = itemCount * itemPrice
   • Set variable: isMaxReached = false (从最大库存扣减，加号重新激活)
3. 检查是否触底：
   • Conditional: if (itemCount == 1)
     • Set variable: isMinReached = true

---

4. 多变量连锁驱动与表单校验进阶

除了电商购物车，条件变量还能轻松驱动复杂的登录/注册表单联动验证：

┌───────────────────────────────────────────────┐
│ 用户输入手机号 / 密码                         │
└───────────────────────┬───────────────────────┘
                        │ On typing / change
                        ▼
┌───────────────────────────────────────────────┐
│ Set variable: isPhoneValid = (phone.length==11)│
│ Set variable: isPassValid  = (pass.length>=6)  │
└───────────────────────┬───────────────────────┘
                        │ 自动计算按钮激活态
                        ▼
┌───────────────────────────────────────────────┐
│ if (isPhoneValid && isPassValid)              │
│   Set variable: submitBtnEnabled = true       │
│ else                                          │
│   Set variable: submitBtnEnabled = false      │
└───────────────────────────────────────────────┘

通过将“登录按钮”的组件变体（Default / Disabled）绑定到 submitBtnEnabled，用户在原型中键入合法格式手机号时，按钮会在无任何页面刷新跳转的情况下，自动从置灰过渡到高亮可点！

---

5. 调试技巧与常见避坑指南

1. 原型预览中的变量重置： 在 Presentation 演示模式下测试交互后，若需重置所有变量初始值，只需在键盘上按下 R 键，整个原型的数据状态将立即恢复到初始值。
2. 运算顺序与执行时序 (Execution Order)： Figma 交互动作是从上至下同步线性执行的。在上述加法案例中，若先执行 totalAmount = itemCount * itemPrice 再执行 itemCount = itemCount + 1，则总价会以未递增前的旧数量计算。务必确保变量更新的逻辑顺序正确。
3. 避免过深的条件嵌套： 过多的嵌套 Conditional 会增加原型逻辑的理解成本。建议将复杂分支拆解为组件内部的交互式变体（Interactive Components），在宏观状态上使用 Variables 保持主线清晰。