Figma 不再只是画图：一个按钮，已经像在写程序

大多数人还把 Figma 当成设计工具，但这支官方视频透露了一个关键信号：原型，正在变成“低代码程序”。变量、条件判断、状态更新，这些原本属于工程师的能力，正在被设计师直接掌握。

最反直觉的一点：你不是在做原型，而是在写“逻辑”

如果你对 Figma 的理解还停留在“能点、能跳页面”，那这支视频一开始就会让你出戏。Figma 官方直接抛出一句话：原型可以做计算，可以跑条件逻辑，而且只需要几个 frame。

这意味着什么？意味着原型不再只是“演示用的壳”，而是一个具备状态、规则和因果关系的系统。通过变量（Variables），Figma 引入了两个关键动作：Set Variable 和 Conditional。前者用来改变状态，后者用来判断条件。听起来是不是很熟？这就是最基础的程序结构。

在 AI 从业者眼里，这一步很重要：设计工具开始向“可执行逻辑”靠拢。它不再只是描述界面，而是在模拟真实系统的行为。这也是为什么 Figma 把这些能力放在付费计划里——它已经不是装饰，而是能力升级。

一个西瓜页面，暴露了 Figma 原型的真正野心

视频用一个极其简单的例子：卖西瓜。页面上只有库存数字、一个“Add to cart”按钮、一个购物篮。但正是在这个场景里，Figma 把变量的能力拆得非常细。

首先是 number 变量：Amount available。点击一次按钮，库存减 1。这一步已经不再是“点击跳转”，而是“状态变化”。更关键的是，它不是写死的数值，而是表达式：Amount available = Amount available - 1。

然后问题出现了：库存会变成负数。这时候，Conditional 登场——如果库存大于 0，才允许扣减，否则什么都不做。这一刻，原型第一次表现得像真实系统，而不是 PPT。

接着是 boolean 变量：Is Available。当库存为 0 时，文字直接消失。不是切页面，不是隐藏 frame，而是“状态驱动 UI”。这和我们在 AI 产品里做 feature flag、状态机，本质是同一件事。

视频里还特意强调了一个细节：多个 action 的执行顺序会影响结果。这是一个非常“工程化”的提醒——Figma 已经默认你在构建逻辑链，而不是简单交互。

从设计工具到“人机协作界面”的关键一步

真正让人警觉的，是后半段关于组件变体和变量绑定的演示。购物篮按钮的 Has Cart 状态、按钮文案的 string 变量切换，这些都在传递一个信号：设计师正在直接操控状态源。

对 AI 从业者来说，这意味着什么？意味着原型阶段就可以精确表达“当模型输出 X，界面状态应该如何变化”。你不再需要用一堆注释去告诉工程师“这里大概会变”，而是直接跑给他看。

更重要的是，这种能力天然适合 AI 产品。AI 界面几乎全是条件驱动：有结果/没结果、置信度高/低、可用/不可用。Figma 的变量原型，本质上是在为“不确定性 UI”做准备。

这也是为什么你会感觉这支视频不像是给初学者看的，而更像是在向行业释放一个信号：设计，不再只是静态表达，而是逻辑建模。

总结

如果你在做 AI 产品，这支视频至少传递了三个 takeaway：第一，原型已经可以承载真实逻辑，别再把它当示意图；第二，设计师和工程师的分工边界正在模糊，状态和条件正在前移到设计阶段；第三，未来的好设计，很可能是“能跑的设计”。

一个值得你回去思考的问题是：你现在的产品原型，有没有清楚表达系统在不同状态下的行为？如果没有，也许不是工程没跟上，而是原型本身太“静态”了。

关键词： Figma， 变量原型， 低代码设计， AI 产品设计， 交互逻辑

事实核查备注： 视频发布时间为 2023-06-21；变量、Set Variable、Conditional 为 Figma 官方功能；Conditional 和 Set Variable 目前仅在付费计划中提供；示例为西瓜商品页面，初始库存为 4。