Figma这堂课没讲AI，却偷偷教会了产品交互的底层逻辑

这不是一节讲设计工具的教学，而是一堂关于“交互如何被系统理解”的隐形产品课。一个看似简单的照片轮播，背后暴露了原型工具、状态建模、以及“机器如何判断连续性”的关键逻辑，AI从业者看完会突然意识到：这和我们做模型、做系统一模一样。

最反直觉的一幕：动画失效，不是因为参数，而是“名字”

视频里最值得反复看的，不是怎么画Frame，也不是Push动画怎么调，而是原型第一次跑起来“完全不对”的那一刻。所有交互都设好了，方向、曲线、300ms，一个不落，但动画就是不生效。原因只有一句话：Figma是靠“图层名字”来识别是否是同一个对象。

这一下，很多人会愣住。我们习惯把问题归结为参数、组件、设置，却忽略了系统最底层的判断方式：它并不理解你的“意图”，只认结构和标识。当三个图片Frame里的矩形都叫Rectangle 3，Figma就认为它们是完全不同的东西，动画自然无法“连续”。

直到把它们改名为trees、ocean、bike，交互才突然顺了。这一刻非常像AI系统里的一个经典场景：不是模型不行，而是ID、token或状态没对齐。工具没有变，世界却突然合理了。

照片轮播不是重点，重点是“状态是怎么被建模的”

表面看，这一段是在教学生做一个照片Carousel：三个Frame、左右箭头、Push动画。但换个视角看，你会发现这是一次非常完整的“状态机”训练。

每一个Frame，其实就是一个明确状态；左右箭头，是状态转移；Push方向，决定了用户对“时间和空间”的心理预期；Animate Matching Layers，本质上是在告诉系统：哪些变量在变，哪些保持不变。

这套逻辑和我们做AI产品、Agent流程几乎完全一致。你不是在‘画界面’，而是在定义：当用户做了一个动作，系统如何从状态A，平滑、可预期地过渡到状态B。

视频里有一个细节很容易被忽略：所有动画时间都被控制在300ms，并统一使用ease out。这不是随意的选择，而是在训练一种节奏感——既要让用户感知变化，又不能打断思路。这种“交互节奏”的把控，和AI产品里推理延迟、反馈速度的权衡，本质是同一个问题。

为什么一定要有“退出”？这是产品思维，不是设计技巧

在课程后半段，讲师突然停下来，说了一句很产品的话："I would like there to be a flow where I can exit out of the gallery." 于是加了一个X按钮，把用户送回主页。

这一步在教学上并不必要，但在产品上极其重要。因为没有退出路径的系统，本质上是个“死胡同”。无论是照片轮播，还是AI对话、工具链编排，只要用户不知道如何回到主状态，就会产生不安全感。

更有意思的是，这里的退出动画被刻意设成Instant，没有任何过渡。这是在用设计语言告诉用户：这是一次状态切换，而不是连续浏览。该快的地方快，该慢的地方慢，这种区分能力，恰恰是很多AI产品目前最欠缺的。

当你把这段视频当成一堂‘交互逻辑课’来看，会发现它一直在训练一种能力：站在系统和用户之间，替两边把话说清楚。

总结

这支视频表面讲的是K-12级别的Figma原型，但真正的价值在于，它用极低的门槛，展示了复杂系统如何“理解连续性、状态和意图”。对AI从业者来说，这是一次很好的反向学习：当你的模型或Agent行为不符合预期时，先别急着怀疑能力，很可能只是状态、命名或边界条件出了问题。

一个可执行的建议是：下次设计AI产品流程时，试着像做Figma原型一样，把每个状态单独拎出来，明确它的入口、出口和过渡方式。你会发现，很多“智能不够”的问题，其实是交互没讲清楚。

关键词： Figma原型， 交互设计， 状态建模， 产品思维， AI产品

事实核查备注： 需要核查：视频发布时间是否为2025-05-21；视频标题与频道名称准确性；是否明确使用了iPhone 16 Frame；动画参数是否为300ms、ease out；Figma中Animate Matching Layers对图层命名的依赖描述是否与官方一致