一个Figma小技巧，正在悄悄拉开顶级产品和普通产品的差距

大多数人以为交互细节只是“好看”，但在这支Figma官方视频里，一个看似不起眼的Overlay原型技巧，揭示了为什么真正优秀的产品，总能让人感觉“顺手”“高级”“不想离开”。这不是视觉问题，而是设计师对行为、节奏和反馈的理解差异。

反直觉的一点：用户记住的不是界面，而是“过渡”

视频一上来，Miggi就没有讲配色、布局，也没有讲组件库，而是直接切入一个极容易被忽视的点：缩略图的Overlay过渡动画。

大多数设计师会觉得，Overlay不就是“鼠标移入→放大→移出→消失”吗？但问题在于，用户对“状态变化”的感知，几乎全部来自过渡本身。如果过渡是瞬间的、线性的、机械的，哪怕视觉再精致，体验依然是“硬的”。

Miggi在这里做的第一件事，其实非常反直觉：他不是先把页面搭好，而是先把“一个会自己呼吸的Overlay”做成交互组件（Interactive Component）。放大、缩小、延迟关闭，全都被封装进组件内部。

这背后的设计思维很高级：用户交互不是页面级的，而是行为级的。你不是在设计页面，你是在设计“当用户靠近、停留、离开时，系统如何回应”。

真正值钱的不是Overlay，而是那条Bezier曲线

如果你只记住视频里的一个技术点，那一定是这里：Miggi手动输入了一条自定义Bezier曲线。

在Variant之间，他没有用默认的Smart Animate，而是直接输入了控制点数值，做出一个“ease in + ease out + 轻微回弹”的动画。效果很微妙：不是炫技的弹跳，而是那种“几乎感觉不到，但少了就不对劲”的反馈。

这一步非常像AI产品里的交互反馈设计。模型输出快0.2秒、慢0.2秒，用户的主观感受是完全不同的。同样，Overlay的放大如果是线性的，就像机器在执行指令；但有回弹，就像系统在“理解你”。

更狠的一点在后面：鼠标移出后，他加了一个After Delay = 1ms 的交互，用来自动关闭Overlay。这个操作不是为了炫技巧，而是为了避免Overlay“僵死”在界面上。

这其实是在模拟真实世界的物理逻辑：东西不会凭空消失，但也不会赖着不走。

为什么这个技巧，特别值得AI从业者学

表面上，这是一个Figma原型技巧；但往深一层看，它解决的是一个AI产品正在集体面对的问题：系统行为是否“像人”。

Miggi把Overlay做成组件，再作为Overlay叠加到多个缩略图上，意味着什么？意味着交互逻辑可以复用，但感知体验保持一致。这和今天做AI Copilot、智能助手、Agent UI的逻辑完全一致。

你不可能为每个场景重写一套交互反馈，但你必须保证：
- 用户靠近时，系统有“预期内”的回应
- 用户离开时，系统能体面地收尾
- 多个实例同时存在时，永远知道谁在“最上层”

视频最后一个很容易被忽略的点是：即使这些缩略图在Auto Layout里，Overlay依然能正确地出现在最上层。这不是Figma的小聪明，这是对复杂系统层级关系的敬畏。

如果你正在做AI产品，这几乎就是一个隐喻：当系统复杂到一定程度，真正的差距，来自你是否提前设计好了“谁该被看见，谁该退场”。

总结

这支视频真正教会你的，并不是“如何在Figma里做Overlay”，而是一个更重要的能力：把用户行为拆解成连续的状态变化，并且为每一次变化设计合适的反馈。

对AI从业者来说，这意味着什么？意味着你在设计模型能力之外，还要设计“模型出现和消失的方式”。下一个让人上瘾的AI产品，未必是最聪明的那个，但一定是最懂得什么时候靠近、什么时候后退的那个。

不妨回头看看你现在的产品：当用户第一次靠近时，系统是“欢迎”，还是“冷启动”？当用户离开时，是优雅收尾，还是突然中断？答案，往往就藏在这些被忽略的过渡里。

关键词： Figma原型， 交互设计， Overlay动画， AI产品体验， 微交互

事实核查备注： 需核查：视频作者Miggi是否为Figma官方成员；视频发布时间为2022-12-16；Bezier曲线具体数值是否为0.5， 0.6， 1.5；After Delay最小值是否为1ms；视频是否明确提到Overlay在Auto Layout中的z-index行为