Figma复刻Google AI Studio光效流转动效教程

Google AI Studio 的对话框设计中，有一个让人过目不忘的细节——输入框周围流动着五彩斑斓的光效描边，配合柔和的投影，营造出极具未来感的 AI 交互体验。这种动效看似复杂，实际上用 Figma 就能完整复刻。本文将拆解整个制作流程，从静态光效描边到循环流转动画，手把手带你实现这一效果。

值得一提的是，这种流动光效描边已经成为AI产品界面设计的标志性视觉语言。Google AI Studio 作为 Google 推出的 AI 模型调试与原型开发平台，其界面设计延续了 Material Design 3 的设计体系，同时融入了大量面向 AI 产品的视觉创新。类似的设计手法在行业中已形成趋势——OpenAI 的 ChatGPT 使用脉动光点表示思考状态，Microsoft Copilot 采用渐变流光作为品牌标识，Apple Intelligence 则以柔和的彩色光晕作为视觉符号。这些设计共同传达了一个隐喻：AI 是一种流动的、有生命力的智能体，而非静态的工具界面。Google 选用的蓝、紫、粉、橙色系也与其 Gemini 品牌色彩体系一脉相承，强化了产品的品牌认知。

静态光效描边的制作

第一步：绘制基础矩形

整个效果的核心是一个「会流动的彩色描边」。制作思路并不是直接给矩形加描边，而是通过两层矩形叠加加遮罩来实现。

先画一个矩形作为描边的基础形状，然后复制一份。第二个矩形将用来承载弥散光效，关键在于它的填充方式——使用角度渐变（Angular Gradient），颜色会沿着角度方向分布，天然适合做环绕式的光效。

角度渐变是一种以中心点为圆心、沿 360° 方向分布颜色的渐变类型，也被称为锥形渐变（Conic Gradient）。与线性渐变沿直线方向过渡、径向渐变从中心向外扩散不同，角度渐变的颜色变化路径是一个完整的圆周，这使得它天然适合模拟光线环绕物体边缘的效果。在 CSS 中，对应的属性是 conic-gradient()，于 2020 年前后获得主流浏览器的广泛支持。Figma 中的角度渐变可以通过拖动色标控制每段颜色的起止角度，配合透明度变化还能实现光效的明暗节奏感。

第二步：调配五彩斑斓的渐变色

在角度渐变中选取多个颜色节点，模拟 Google AI Studio 中蓝、紫、粉、橙等色彩的过渡。选好颜色后，需要仔细调整每个色标的位置和光效覆盖的范围，确保颜色分布自然且能覆盖整个对话框区域。

调整光效渐变颜色

颜色调配完成后，还需要补充一些白色的光效节点。白色光点的加入会让整体色彩更加通透，避免纯彩色带来的视觉沉闷感。

第三步：模糊处理与遮罩裁切

为了让光斑边缘柔和自然，对光效图层施加图层模糊（Layer Blur）。模糊值不宜过大，适度即可，目的是消除渐变色之间的硬边界，营造弥散光的质感。

Figma 中提供了两种模糊方式：图层模糊（Layer Blur）和背景模糊（Background Blur）。图层模糊对当前图层自身的像素进行高斯模糊处理，使边缘柔化、颜色过渡更平滑；背景模糊则是对图层下方的内容进行模糊，常用于实现毛玻璃效果。高斯模糊的数学原理是对每个像素点按照高斯分布函数加权平均其周围像素的颜色值，模糊半径越大，采样范围越广，画面越柔和。在本案例中使用图层模糊而非背景模糊，是因为我们需要柔化的是光效图层本身的渐变硬边，而不是透过它看到下方的内容。

处理完模糊后，将光斑图层置于顶层，框选光斑和底部矩形，创建一个遮罩（Mask）。光效会被裁切为矩形描边的形状，得到一个五彩斑斓的描边效果。最后调整描边的圆角使其与对话框匹配，并检查光斑是否完整覆盖了整个对话框边缘。

遮罩是一种非破坏性的裁切技术，它利用一个形状（遮罩层）的轮廓来控制另一个图层的可见区域。在 Figma 中，遮罩层位于被遮罩内容的下方，只有遮罩层覆盖的区域才会显示上方图层的内容。与直接裁切不同，遮罩保留了原始图层的完整数据，随时可以调整遮罩形状或解除遮罩关系。在本案例中，遮罩的巧妙之处在于将一个完整的角度渐变光斑裁切成环形描边的形状——底层矩形作为遮罩定义了可见区域，而光斑图层中超出矩形边缘的部分被隐藏，只保留沿边缘分布的光效。

投影效果的精细调整

光效描边做好后，还需要添加投影来增强立体感。这里要做两层投影：

本体投影：紧贴对话框边缘的彩色投影，颜色跟随光效的主色调，让光效看起来有「溢出」的感觉
底层灰色投影：置于对话框最底层，提供整体的层次感和悬浮感

一比一复刻参考效果

调整投影参数时，务必对照 Google AI Studio 的参考图进行比对。投影的透明度、模糊度、偏移量都需要反复微调。灰色投影的透明度不宜过高，保持克制的存在感即可，让对话框看起来更立体而不喧宾夺主。

循环流转动画的实现

关键帧动画原理

静态效果完成后，接下来让光效「流动」起来。这个动画的本质是关键帧动画——只需要制作完整动画周期中几个关键节点的状态，Figma 的智能动画会自动补间过渡。

关键帧动画（Keyframe Animation）是动画制作的基础范式，最早源于传统手绘动画中由主画师绘制关键姿态、助理画师补充中间帧的工作流程。在数字动画中，软件承担了补间计算的工作。本案例选择 7 个关键帧来覆盖 360° 旋转，意味着每帧之间约 51.4° 的旋转间隔。帧数的选择是流畅度与制作成本的平衡——帧数太少会导致补间跨度过大，光效跳跃感明显；帧数太多则增加制作和维护的工作量。

由于这是一个循环动画，需要复制出七份画面，每一份对光斑图层进行不同角度的旋转。七个关键帧均匀分布在 360° 的旋转周期中，确保动画首尾衔接流畅。

复制多份关键帧

交互连线与参数设置

进入 Figma 的 Prototype（原型）模式，对每一帧进行交互连线。核心参数如下：

触发方式：延迟触发（After Delay）
延迟时间：10 毫秒（极短延迟，让动画近乎连续播放）
动画类型：智能动画（Smart Animate）

智能动画设置

Smart Animate 是 Figma 原型模式中的核心动画功能，它通过比较两个画面（Frame）中同名图层的属性差异，自动生成中间过渡帧。可以被补间的属性包括位置、大小、旋转角度、透明度、填充颜色、圆角值等。其工作原理类似于 Flash 时代的补间动画（Tween Animation）或 CSS 中的 transition，系统根据缓动函数（Easing Function）计算每一帧的中间状态。需要特别注意的是，Smart Animate 依赖图层命名的一致性——只有在两个 Frame 中名称完全相同的图层才会被识别为同一元素并产生过渡动画。这也是为什么在制作多帧动画时，复制 Frame 而非重新绘制是更可靠的做法。

第一个连线设置好后，后续几帧按照相同参数依次连接。最后一帧连回第一帧，形成闭环，实现无限循环播放。配合 10 毫秒的极短延迟触发，实际播放时 Smart Animate 的补间过渡会填充帧与帧之间的空白，使动画看起来远比 7 帧流畅得多。

最终调优与导出

所有连线完成后，回到设计模式对描边做整体微调。将描边宽度调整为 0.5px，更细的描边会让画面更加简洁高级，避免光效过于浓烈。

点击预览按钮查看动画效果，确认光效流转顺畅、颜色过渡自然后即可导出。Figma 支持导出为 Lottie 动画文件或 GIF 格式，前者适合交付给开发直接集成到产品中，后者适合用于展示和沟通。

Lottie 是由 Airbnb 开源的轻量级动画格式，其核心是将动画导出为 JSON 文件，通过各平台的 Lottie 播放器进行实时渲染。与 GIF 相比，Lottie 具有显著优势：文件体积通常只有 GIF 的十分之一甚至更小；基于矢量渲染，在任何分辨率下都保持清晰锐利；支持通过代码动态控制播放速度、颜色、进度等属性。Figma 可以通过插件（如 LottieFiles 插件）将原型动画导出为 Lottie 格式。在前端开发中，lottie-web 库可以直接在网页中播放 Lottie 动画，iOS 和 Android 也分别有 lottie-ios 和 lottie-android 原生库支持。这使得设计师在 Figma 中制作的动效可以几乎无损地还原到最终产品中，大幅减少设计与开发之间的沟通损耗。

技术要点总结

这个动效的实现思路可以归纳为三个层次：

视觉层：角度渐变 + 图层模糊 + 遮罩，构建弥散光描边
层次层：双重投影（彩色 + 灰色），增强立体感
动画层：多帧旋转 + 智能动画 + 延迟触发，实现循环流转

这种制作方法不仅适用于 AI 产品的对话框设计，任何需要「光效流转」效果的场景都可以复用。掌握角度渐变与智能动画的组合技巧，你可以轻松创造出各种炫酷的光效动画，为产品界面增添科技感与精致度。