Figma 这一招，让原型第一次像“有脑子”的 AI 系统

大多数人还把 Figma 原型当“会动的 PPT”，而这节课干了一件反直觉的事：不用写代码，只靠变量和条件逻辑，就把单一画面做成“会判断、会记忆、会联动”的系统。这不是设计技巧升级，而是设计思维的一次跃迁。

最反直觉的一点：复杂交互，根本不需要更多页面

Miggi 一开场就戳破了一个行业迷思：原型越复杂，画面就一定越多。恰恰相反，在 Figma 里，真正让原型失控的不是页面数量，而是“状态管理”。

他用一个最简单、却最有代表性的例子说明这一点：布尔变量。一个 true/false 的变量，被用来直接绑定图层的可见性。不是通过切换 Frame，也不是靠 Overlay，而是让同一个画面“自己决定”要不要显示某个元素。

更关键的是，这个变量不是静态的。你可以在变量面板里手动切换，也可以在原型模式中，通过按钮的 On Click + 条件逻辑去改变它。于是，图层的显示与隐藏，从“设计师手动摆状态”，变成了“系统响应行为”。

真正惊艳的地方在后面：他创建了一个“Show All”按钮，一次性交互多个布尔变量。这意味着，你第一次在 Figma 原型里，体验到了类似全局状态管理的感觉——一个动作，联动多个结果。对熟悉前端或 AI 系统的人来说，这一刻非常熟悉：这就是状态驱动 UI。

数字变量登场：原型开始拥有“连续变化”的能力

如果说布尔变量解决的是“有或没有”，那数字变量解决的就是更危险的一件事：连续变化。

Miggi 创建了一个 Num 类型变量，把它同时绑定到三个地方：文本内容、矩形宽度、自动布局的内边距。然后只做了一件事——修改变量的值。画面立刻发生了连锁反应：数字变了，宽度变了，间距也跟着变。

这背后传递的信号非常重要：一个变量，可以驱动多个设计属性。这不只是方便，而是在逼近真实产品的行为模型。

在原型模式下，他进一步加码：创建“+ / -”按钮，用变量运算实现递增和递减。每点击一次，Num 变量发生变化，所有绑定它的元素同步更新。你看到的已经不是‘动画’，而是‘逻辑结果’。

对 AI 从业者来说，这一段尤其熟悉：这是 reward、这是 state update、这是单一 source of truth。Figma 没有说这些词，但你一眼就能看懂它在做什么。

字符串变量：Figma 原型第一次学会“记住你输入了什么”

真正让人意识到“事情不一样了”的，是字符串变量。

Miggi 创建了一个 message 文本变量，把它绑定到文本框显示内容。然后，通过按钮交互，向这个字符串追加字符。每点一个按钮，字符串就多一个字母，效果就像一个极简版键盘。

关键不在于炫技，而在于：这个文本是有记忆的。它不是预先写死的，而是由用户的操作一步步构建出来的。

更妙的是，他展示了如何复制同一套交互逻辑到多个按钮——这意味着输入系统是可扩展的。最后再加一个 Reset 按钮，把字符串清空，完成一个完整的生命周期：生成、累积、清除。

如果你做过对话式 AI、表单流、Prompt 设计，你会立刻意识到：这是一个可以用来模拟“用户输入 → 系统状态变化 → 界面反馈”的完整闭环。

组件集 + 变量：Figma 开始逼近真正的系统设计

课程的最后一部分，才是隐藏的“王炸”。

Miggi 把变量引入组件集（Component Set）。他创建了导航和图库组件，用一个字符串变量 current item 作为状态标识，并让多个组件实例都绑定这个变量。

结果是：你点击导航，图库跟着切换；你操作图库，导航状态同步更新。不是复制粘贴的幻觉，而是真正的双向绑定。

这里有一个非常容易被忽略、却极其工程化的细节：命名一致性。变量名、组件属性名必须严格一致，否则绑定就会失效。这听起来很琐碎，但它和真实代码世界的约束一模一样。

这一刻，Figma 不再只是设计工具，而是一个低门槛的状态机实验场。你可以在一个画面里，模拟出多模块协同、状态共享、动画过渡的完整体验。

总结

这节课真正教的不是“Figma 新功能”，而是一种思维转变：从画状态，转向管理状态。对 AI 从业者来说，这是一个极好的练兵场——你可以在不写代码的前提下，验证交互逻辑、状态流转和系统一致性。我的建议是：下次做原型，强迫自己少建页面，多建变量。问自己一句话：这个变化，是不是应该由状态决定？一旦你开始这样思考，你会发现，原型第一次开始像一个真正的系统。

关键词： Figma 变量， 原型设计， 状态管理， 交互设计， AI 产品思维

事实核查备注： 需要核查：视频发布时间（2023-07-08）；讲师名 Miggi 的拼写；视频是否确实来自 Figma Config 官方频道；变量类型与功能是否与当前 Figma 版本一致