Figma里最被低估的能力：图片和视频，正在重塑AI产品原型

很多人以为 Figma 只是“画界面”的工具，但这期官方 Study Hall 揭示了一个被严重低估的事实：在 Figma 里，图片和视频不是素材，而是系统级能力。理解这一点，直接决定你能不能把 AI 想法，快速变成能“演示给别人看”的原型。

一个反直觉设定：Figma 里根本没有“图片对象”

视频里最容易被忽略、但最重要的一句话是：“Images and video are fills on objects.”——图片和视频，在 Figma 里只是“填充”。

这件事听起来很抽象，但一旦你意识到这一点，很多操作会突然“开窍”。图片不是独立存在的，而是附着在形状、文本、甚至任意矢量图形上的填充层。这意味着什么？意味着你可以把一张图直接填进文字里、填进星形里、填进任何非矩形结构里，而且尺寸怎么变，填充逻辑都跟着走。

对 AI 从业者来说，这极其关键。你在做的不是静态 UI，而是“概念验证”。当你要展示一个多模态模型、一个生成式界面、一个推荐系统的状态变化，用图片填充文本、用图片填充复杂形状，比传统截图拼贴高效太多。

更狠的是：填充是可以叠加的。多个 image fill 可以像图层一样共存，通过调透明度实现“合成”。这不是设计炫技，而是让你在原型阶段就能表达“多信号叠加”“多模态融合”这类 AI 概念，而不用打开 Photoshop。

复制的不是图片，是“视觉逻辑”

Miggi 展示了一个非常工程化、但极少人系统用过的技巧：直接复制 image fill，而不是复制整个对象。

在 Figma 右侧面板里，每一个填充本身就是一个可复制单元。选中填充，Command+C，再粘贴到另一个形状上，你复制的不是“像素”，而是一整套映射、裁剪、叠加关系。

这件事的价值在于：你可以把一套复杂的视觉表达，当作“组件逻辑”来复用。比如多张图片叠加形成的状态背景、渐进透明度表达的不确定性、不同信息层的权重关系——这些在 AI 产品里都非常常见。

传统做法是：截图、导出、重新放。Figma 的做法是：复制一组 fill，就像复制一段代码。这种思维方式，本质上和 AI 工程里复用 pipeline、复用 prompt 结构是同构的。

如果你发现一个设计师在原型阶段就能稳定复用复杂视觉结构，大概率他理解的不是“画图”，而是系统。

裁剪、填充模式，其实是在训练你如何“控制模型输出”

视频里对 fill、fit、crop 的讲解，看起来是设计细节，其实非常像我们控制模型输出的方式。

默认的 Fill，是“尽量填满空间”；Fit，是“完整保留信息”；Crop，则是“人为选择关注区域”。这三种模式，本质上对应三种产品决策：强调表现力、强调完整性、强调重点。

更有意思的是，进入 crop 模式后，你可以在不破坏原图比例的情况下，精细控制展示区域。这种“非破坏式编辑”，非常接近我们在 AI 产品里追求的目标：不重算、不重训，只调整呈现方式。

对需要频繁 Demo 的 AI 团队来说，这意味着什么？意味着你可以快速用同一批素材，做出面向投资人、面向客户、面向内部评审的不同版本，而不用维护三套文件。

视频、GIF 和 Mask：把“动态智能”直接放进原型

真正拉开差距的，是视频和 GIF。

在教育团队下，Figma 支持直接上传 MP4、MOV、WebM（100MB 以内），而且视频在画布里看起来就像一张静态图——直到你在 Prototype 或 Presentation 模式里点下 Play。

关键点有三个：
第一，视频必须放在 Frame 里才能播放；
第二，视频有原生交互事件，比如“播放结束时跳转”“播放到某一刻触发动作”；
第三，GIF 和 PNG 的透明区域，可以直接作为 Mask 使用，甚至支持动画 Mask。

这对 AI 产品意味着什么？你可以在不写一行前端代码的情况下，演示：模型推理过程、状态流转、生成结果变化，甚至是“智能在后台发生”的感觉。

很多 AI Demo 看起来不可信，不是模型不行，而是表达太弱。Figma 在这里，正在成为 AI 产品的“叙事引擎”。

总结

这期 Study Hall 表面讲的是图片和视频，实际上讲的是一件更重要的事：如何把复杂系统，用最低成本表达出来。

对 AI 从业者来说，Figma 不只是设计工具，而是你把“抽象智能”转译成“可感知体验”的中间层。理解 fill、mask、video prototype，本质上是在训练你如何讲清楚：模型在干什么、用户为什么要信。

一个值得你带走的行动点是：下次做 AI 原型时，别急着写代码，先用 Figma 把“动态智能”演出来。你会发现，很多问题在原型阶段就已经暴露，而这，才是真正的专业感来源。

关键词： Figma， AI产品原型， 图片填充， 视频原型， 多模态设计

事实核查备注： 视频发布时间：2023-04-05；功能来源：Figma Study Hall 官方演示；视频上传限制：教育团队、100MB 以内、支持 MP4/MOV/WebM；快捷键：Command+Shift+K（Windows 为 Control+Shift+K）