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

最近刷到Google AI Studio的界面，不知道你有没有注意到它那个输入框——周围有一圈五彩斑斓的光在流动，蓝色、紫色、粉色、橙色，特别有那种AI的未来感。我当时第一反应是，这玩意儿做起来肯定很复杂吧？结果发现，用Figma就能完整复刻出来。 对，这个效果确实是现在AI产品界面设计的一个标志性视觉语言了。你看不只是Google，ChatGPT用脉动光点表示思考状态，微软Copilot用渐变流光做品牌标识，苹果的Apple Intelligence也有柔和的彩色光晕。大家其实都在传达同一个隐喻——AI是一种流动的、有生命力的智能体，不是一个死板的工具。 嗯，这么一说确实是个趋势。那我们今天就来拆解一下这个效果到底怎么做。我理解核心就是一个会流动的彩色描边，但它并不是直接给矩形加个描边属性对吧？ 对，这是很多人一开始会走的弯路。直接加描边你没法做出那种弥散的、颜色在流动的感觉。真正的思路是两层矩形叠加加遮罩。你先画一个矩形作为底层形状，然后复制一份。关键在第二个矩形的填充方式——用角度渐变，英文叫Angular Gradient。 角度渐变？这个和我们平时用的线性渐变有什么区别？ 你可以这么理解：线性渐变是颜色沿着一条直线过渡，径向渐变是从中心往外扩散，而角度渐变呢，它是以一个中心点为圆心，颜色沿着360度方向分布的。就像你站在一个钟表的中心往外看，12点钟方向是蓝色，3点钟方向变成紫色，6点钟方向是粉色，9点钟方向是橙色——颜色绕了一整圈。这种特性天然就适合做环绕式的光效。在CSS里对应的就是conic-gradient这个属性。 哦，这样一说就很直观了。那颜色选好之后呢？ 颜色这块有个小技巧——除了蓝紫粉橙这些主色调之外，一定要加几个白色的光效节点。白色光点会让整体色彩更通透，不然纯彩色堆在一起会显得很沉闷。调完颜色之后，下一步很关键——给这个光效图层加图层模糊，就是Layer Blur。模糊值不用太大，目的是消除渐变色之间的硬边界，让光斑边缘变得柔和自然，有那种弥散光的质感。 图层模糊和背景模糊不一样吧？我记得Figma里有两种。 嗯，这是个好问题。图层模糊是对当前图层自身做高斯模糊，让它自己的边缘柔化；背景模糊是对图层下方的内容做模糊，就是我们常说的毛玻璃效果。这里我们要柔化的是光效图层本身的渐变硬边，所以用图层模糊。做完模糊之后，把光斑图层放到顶层，和底部矩形一起创建遮罩。这样光效就会被裁切成矩形描边的形状，一个漂亮的五彩描边就出来了。 遮罩这一步其实挺巧妙的。等于是用矩形的轮廓去框住了一个完整的渐变光斑，只露出边缘那一圈。 没错，而且遮罩是非破坏性的，原始图层数据都保留着，你随时可以调整。这就是静态效果的核心了。不过光有描边还不够，还得加投影才有立体感。这里要做两层投影：一层是紧贴边缘的彩色投影，颜色跟随光效主色调，让光效有种溢出来的感觉；另一层是底下的灰色投影，提供整体的悬浮感。灰色投影的透明度要克制，别太抢眼，让对话框看起来浮起来就行。 好，静态效果搞定了。接下来就是让它动起来了，这才是最让人好奇的部分。怎么让这个光效流转起来？ 其实原理比想象中简单。本质就是关键帧动画——你不需要做每一帧，只需要做几个关键节点的状态，Figma的Smart Animate会帮你自动补间。具体操作是把做好的画面复制七份，每一份里把光斑图层旋转不同的角度。七个关键帧均匀分布在360度里，大概每帧转51度左右。 为什么是七帧？多一点少一点行不行？ 这其实是流畅度和制作成本的平衡。帧数太少，比如只做三四帧，补间跨度太大，光效会有明显的跳跃感；帧数太多，比如做十几帧，制作和维护的工作量就上去了，但视觉提升其实不明显。七帧是一个比较甜蜜的点。 那做好七帧之后怎么让它们连起来播放？ 进Figma的原型模式，给每一帧做交互连线。触发方式选延迟触发，延迟时间设成10毫秒——基本上就是瞬间触发。动画类型选Smart Animate。Smart Animate会比较两个画面中同名图层的属性差异，自动生成过渡动画。这里有个特别要注意的点——它是靠图层命名来识别的，两个Frame里名字一样的图层才会被当成同一个元素做过渡。所以一定要用复制Frame的方式，别重新画。 最后一帧连回第一帧就能无限循环了？ 对，形成闭环。虽然只有七帧，但Smart Animate的补间过渡会填充帧与帧之间的空白，实际播放起来比七帧流畅得多。最后还有个小细节——描边宽度建议调到0.5像素，更细的描边会让整体更精致高级，不会显得光效太浓烈。 做完之后怎么交付给开发呢？ Figma可以通过插件导出为Lottie格式，就是Airbnb开源的那个轻量级动画格式。它本质是个JSON文件，体积可能只有GIF的十分之一，而且是矢量渲染，放大不模糊，开发还能用代码动态控制播放速度、颜色这些属性。前端用lottie-web，iOS和Android也都有原生库支持。基本上设计师在Figma里做的效果可以几乎无损还原到产品里。 所以总结一下，整个思路其实就是三层：视觉层用角度渐变加模糊加遮罩做出弥散光描边，层次层用双重投影增强立体感，动画层用七帧旋转配合Smart Animate实现循环流转。听起来每一步都不算特别难，但组合在一起效果确实很惊艳。 嗯，而且这个方法不只是能用在AI对话框上。任何需要光效流转的场景——按钮、卡片、加载状态——都可以复用这套思路。掌握了角度渐变和Smart Animate这个组合技，能玩出来的花样其实非常多。