一个原型，三套逻辑：Figma 变量模式正在偷走工程师的活

你以为原型只是“点点点”的演示工具？Figma 在这支视频里给了一个相当反直觉的答案：只用变量、模式和条件判断，就能把一个接近真实电商结账流程的逻辑跑起来，而且几乎不用重复配置。这不是设计技巧升级，而是设计边界被重新定义。

最反直觉的一点：原型不再是“假动作”

这期 Study Hall 一上来就抛出一个隐含但炸裂的前提：原型不再只是给人“看”的，而是可以被“运行”的。Miggi 没有从界面开始，而是先讲“thinking and logic”。这一步本身就很反常——过去设计师通常是先画，再连线；而这里是先拆解状态、变量、变化路径。

核心变化在于变量。通过变量，原型第一次具备了“记住发生过什么”的能力：数量是加了还是减了、价格是否随之变化、某个组件是否被选中过。这些在过去要么靠工程实现，要么靠设计师用一堆 Frame 假装完成。现在，Figma 直接把这套逻辑前移到了设计阶段。

对 AI 和产品从业者来说，这意味着一件事：原型开始承担“逻辑验证”的角色，而不只是“视觉对齐”。

真正的杀手锏：模式（Modes）不是皮肤，而是状态机

视频里最容易被低估的，是“We have three modes. Each mode has a collection of variables.” 这句话。很多人第一次接触模式，会把它理解成深色 / 浅色这种主题切换。但 Miggi 展示的，是完全不同的用法。

模式在这里，更像一个轻量级状态机。你不是去逐个修改变量，而是通过切换模式，一次性改变一整组变量的取值。这带来两个巨大的效率跃迁：第一，避免变量爆炸；第二，让同一套交互在不同状态下复用。

当数量增加、价格更新、按钮状态联动变化时，你会发现一个事实：设计师在用接近工程师的方式思考，但仍然停留在可视化、可操作的设计环境里。这也是为什么视频里那句“we can just update the mode”听起来如此轻松，却意义重大。

从一张卡片到完整结账：变量的“传染性”

一个非常细节、但极其重要的点出现在卡片示例里：变量是在 definition level 绑定的，而不是每个实例。这背后的逻辑是父子关系——子组件天然继承父级变量。

这看似是组件机制的小优化，实际效果却是“变量的传染性”。一旦你在源头把变量想清楚，它会自然流向所有使用它的地方。于是，从单个商品卡片，到 View Cart，再到完整 checkout 体验，设计师做的不是重复劳动，而是逻辑扩展。

加减商品数量、实时价格展示、只在被选中时才显示的控件，这些在视频后半段被一一跑通。Miggi 最后一句“our math is pretty sound”听起来很轻描淡写，但对经历过复杂原型地狱的人来说，这是极高评价。

为什么这件事值得 AI 从业者关注

你可能会问：这不就是设计工具的进化吗？但如果你站在更高一层看，会发现一个趋势正在形成——逻辑正在从代码，向可视化工具迁移。

当设计师可以用变量、条件和模式表达业务规则时，产品早期验证的成本会被大幅拉低。对 AI 产品来说尤其如此：很多交互并不需要一开始就接模型，只需要验证“如果这样，系统应该如何反应”。

这意味着，未来讨论产品方案的人里，设计师不再只是“画界面的人”，而是可以直接参与逻辑建模的人。这对团队结构、沟通方式，甚至谁来主导产品决策，都会产生连锁反应。

总结

这支视频真正教会我们的，不是某个 Figma 功能怎么点，而是一种工作方式的转变：先想清楚状态和逻辑，再让界面自然生长。如果你是 AI 或产品从业者，可以立刻行动的有两点：第一，在下一个需求讨论中，用“变量和状态”而不是“页面”来描述交互；第二，逼自己用原型跑一次完整逻辑，而不是停在静态稿。思考题留给你：当设计工具越来越像编程工具，未来谁会最先被淘汰——只会画界面的设计师，还是只看 PRD 的工程师？

关键词： Figma变量， 原型设计， 模式Modes， 产品逻辑， AI产品

事实核查备注： 需要核查的视频信息包括：视频标题《Study Hall： Using variables in prototypes with modes and conditionals》、作者/频道 Figma Config、发布时间 2023-08-09、核心演示功能为 Figma 变量、模式和条件原型，文中未涉及具体公司或人物声明。