一、什么是效果

效果（Effects）是一套针对图层或文本的视觉效果工具，用于快速增强立体感和层次感，让界面元素在视觉上更突出、更精致。例如，在按钮上添加阴影可以帮助引起人们对它的注意，并表明该元素是互动的。

Figma提供了以下7种类型效果：

• 内阴影Inner shadow
• 外阴影Drop shadow
• 图层模糊Layer blur
• 背景模糊Background blur
• 噪点Noise
• 纹理Texture
• 玻璃Glass

每个图层最多可以有8个内阴影、8个外阴影、1个图层模糊、1个背景模糊、2个噪点效果、1个纹理效果和1个玻璃效果。还可以将效果与混合模式与填充相结合，以创建更丰富的视觉样式和效果。

在菜单中，先将鼠标悬停在每个选项上预览效果，再点击选择效果类型。

二、阴影效果

01 外阴影

外阴影是为设计添加深度和维度的好方法。可以通过在物体后面的表面上创建物体的阴影来做到这一点。阴影可以具有不同的透明度。

我们可以使用外阴影来达到以下目的：

• 在物体之间拉开距离
• 设置光源的方向
• 让设计元素在背景中脱颖而出
• 营造立体感
• 设计风格化的文本和图标
• 在图层或对象周围添加边框

02 内阴影

像外阴影一样，内阴影允许您在二维设计中创造深度。

内阴影应用中图层或对象的内部，而不是在所选对象的后面与外部。

我们可以使用内阴影达到以下目的：

• 为文字营造立体深度
• 让对象呈现出内陷或凹陷的视觉效果
• 显示按钮的活跃或点击状态

03 通过透明区域显示阴影

默认情况下，Figma不会通过图层的透明区域显示阴影。如果您希望通过透明区域显示阴影：

1. 确保图层至少满足以下1个条件：

• 填充属性的不透明度低于100%
• 有描边，但没有填充
• 有1个填充或描边，且混合模式不是「正常」
• 居中的外部描边，且不透明度低于100%

2. 单击效果图标打开阴影的属性菜单。
3. 勾选“显示透明区域的后面”复选框。

内阴影不支持在透明区域的后面显示

04 阴影扩散

阴影扩散功能支持矩形、椭圆、图像、框架和组件，不支持文本、直线、箭头、多边形、星形。

框架或组件应用阴影扩散必须开启裁剪内容设置。

05 添加阴影

您可以将外阴影或内阴影应用于单个图层或框架、组、组件。

1. 选择图层或对象
2. 点击右侧边栏效果面板中的加号图标。默认选择外阴影，可使用下拉菜单切换内阴影。
3. 点击效果属性左侧的效果设置图标，调整阴影参数设置。

• X：沿着X轴偏移阴影（水平）。与Y偏移一起使用来设置光源的方向。
• Y：沿着Y轴偏移阴影（垂直）。与X偏移一起使用来设置光源的方向。
• 填充：使用颜色选择器为阴影设置颜色，并为阴影设置不透明度。
• 模糊：调整阴影的模糊度。增加模糊度以软化阴影并将其与背景混合。减少模糊度，以创造更鲜明锐利的对比度。
• 扩散：调整阴影的大小，以表示前景和背景对象之间的距离。

tips：效果属性支持复制。在右侧边啦中单击选中效果属性，使用快捷键Command+C(Mac)或Ctrl+C(Windows）进行复制，选中要应用效果的图层或对象，并使用快捷键Command+V(Mac)或Ctrl+V(Windows）进行粘贴。

三、模糊效果

提示：大量模糊效果可能会导致文件性能下降。背景模糊通常是渲染最慢的效果。为了暂时提高性能，您可以隐藏单个效果。

01 图层模糊

图层模糊有助于暗示动作或运动，或在二维设计营造深度的错觉。使用图层模糊可以达到以下目的：

• 匿名信息
• 软化或分散背景的焦点
• 从照片和图像中创造抽象背景
• 复制相机深度和其他摄影效果，如散景效果

图层模糊有两种类型：

• 统一：在整个图层上应用相同的模糊
• 渐进式：允许控制模糊的大小、方向和强度，以及模糊的开始位置和结束位置

02 背景模糊

当您对图层应用背景模糊时，Figma 会模糊画布上您选择的内容后面的任何图层。你可以把它看成一个阴影，但它不是图层产生阴影，而是模糊。

您可以使用背景模糊来软化或分散焦点。这吸引了背景和所选图层的注意力。

背景模糊通常用于iOS中的交互式菜单。但您还可以使用背景模糊来遮挡屏幕截图中的文本或个人信息。

背景模糊有两种类型：

• 统一：在整个图层上应用相同的模糊
• 渐进式：允许您控制模糊的大小、方向和强度，以及模糊的开始位置和结束位置

要观察到背景模糊的视觉效果，所选图层的填充属性应具备一定的不透明度，不透明度应低于100%。若图层填充属性的不透明度为100%，您将完全看不到背景模糊。

提示：只能像图层或对象添加一个图层模糊或背景模糊。如果你应用了其他带有背景模糊的图层，Figma将忽略它们，而不是相互叠加，如图层A与B均带有一个背景模糊的效果，复制图层B的背景模糊效果给图层A时，会发现图层A并没有应用图层B的背景模糊效果，表现为图层B的背景模糊效果复制失败。

03 应用模糊效果

模糊效果不仅适用于单个图层，还适用于框架、组和组件。只能像图层或对象添加一个图层模糊或背景模糊。

1. 从画布或图层面板中选中对象。
2. 点击右侧边栏效果属性面板右侧的加号图标。默认选择“外阴影”效果，可通过下拉菜单切换选择图层模糊或背景模糊。
3. 点击效果属性左侧的效果设置图标，调整模糊参数，值越大图层越是模糊，反之值越小图层越清晰。
4. 检查图层填充属性的不透明度，是否低于100%。

阴影和模糊效果可以创建样式。这允许您保存这些设置，并在设计文件中使用它们。

四、噪点效果

噪点效果会在图层上叠加随机像素，形成细腻的颗粒质感，模拟胶片摄影的视觉特征。

噪点效果可应用于任何类型的图层。每个对象只能添加两个噪点效果。

应用噪点效果：

1. 选择图层
2. 点击右侧边栏效果属性面板右侧的加号图标。
3. 在下拉菜单中选择“噪点”选项
4. 点击效果属性左侧的效果设置图标，在设置窗口中配置效果：

• 颜色数量：分为单色、双色和多色三项选择
• 噪点大小：设置噪点像素的尺寸
• 密度：设置噪点像素的浓度
• 颜色（仅限单色和双色通道）：为噪点像素选择颜色和不透明度
• 不透明度（多色）：设置噪点像素的不透明度

五、纹理效果

纹理效果使物体的边缘受到磨损，产生粗糙效果。

应用纹理效果

您可以将纹理效果应用于任何图层类型，每个对象只能应用一个纹理效果。

应用纹理效果：

1. 选择图层
2. 在右侧边栏中点击效果面板右侧的加号图标
3. 选择下拉菜单中的“纹理
4. 打开效果设置菜单配置效果：

• 大小：设置纹理的尺寸
• 半径：调节该值可控制效果向图层边界外扩散的距离。
• 剪切到形状：勾选此选项可将纹理效果限制在图层边界内：纹理本身会被裁剪到形状内部，而投影仍会与裁切后的纹理交互，形成带纹理的阴影效果。

六、玻璃效果

玻璃效果赋予框架一种半透明的特质，动态地改变它们下面物体的外观。玻璃只能应用于框架，每个框架只能应用一个玻璃效果。

01 一些限制因素

使用玻璃时有一些限制：

• 玻璃不能应用于圆角大小不一致的框架。框架的圆角大小相同才能渲染玻璃效果。
• 将一个玻璃框架叠加在另一个框架上时，背景模糊不会影响前景玻璃的渲染。
• 填充设置为100%不透明度的框架上不会显示玻璃
• 玻璃不支持环境光反射
• 导出SVG格式时不支持玻璃效果
• Figma网站不提供玻璃

使用玻璃和背景模糊时，还有一些额外注意事项：

• 无法对同一图层同时使用背景模糊和玻璃效果。如果两者都运用，则只会渲染第一个效果。这是因为背景模糊和玻璃模糊在同一视觉图层中渲染，当多个效果应用于单个图层时，会产生冲突。
• 在玻璃框架顶部叠加背景模糊的框架将足尺玻璃效果渲染。背景模糊的框架顶部的玻璃框架将正常渲染。

02 应用玻璃效果

1. 选择一个框架
2. 点击右侧边栏效果面板右侧加号图标
3. 从下拉菜单中选择「玻璃」
4. 打开效果设置菜单配置效果：

• 光角：光线投射到框架上的方向
• 光强度：投影光的亮度
• 折射：沿弯曲边缘的光学失真程度
• 深度：弯曲的边缘从框架的边框向内延伸的距离。
• 色散：沿弯曲边缘的颜色分裂强度。更高的值会产生更强的彩虹效应。
• 霜冻（雾化）：玻璃上存在的背景模糊程度。

七、效果排序

如果某个选择的对象应用了多个效果，可点击并拖动手柄重新排序。效果的排列顺序会直接影响该对象的最终渲染效果。

八、渲染排序

Figma渲染效果的方式的取决于应用的效果类型、它们在右侧边栏效果面板中的顺序，以及所选对象是图层还是组。在这种情况下，蒙版被认为是组。组阴影和图层阴影的差异在重叠的图层上最为明显。当形状不重叠时，它们看起来是一样的。

渲染图层的顺序：

1. 顶部：图层模糊、噪点、纹理（按指定顺序应用）
2. 描边
3. 内阴影
4. 填充
5. 外阴影
6. 底部：背景模糊、玻璃（无法在单个图层上同时渲染两种效果；只有第一个效果会被呈现。）

渲染组的顺序：

1. 顶部：图层模糊、噪点、纹理（按指定顺序应用）
2. 内阴影
3. 用于单个填充或描边的颜料、蒙版与效果
4. 外阴影
5. 底部：背景模糊

图层模糊和剪切纹理如何影响渲染

图层模糊和剪切纹理效果超出所选范围的边界。在对所选内容应用图层模糊或未剪切纹理时，需要记住一些事情：

噪点和剪切纹理

噪点和剪切纹理通常不会超出所选的边界，但如果放置在“效果”面板的图层模糊或未剪切纹理上方，则可以这样做。

例如，要使噪点效果到达阴影的边缘，您可以在“效果”面板中将图层模糊或未剪辑的纹理放在它们之间。

阴影上的混合模式

通常，阴影上的混合模式与应用阴影的图层后面的内容交互。将图层模糊或未剪切纹理应用于同一图层将隔离混合模式，导致它仅与图层本身的其他效果交互。

填充和描边上的混合模式

通常，填充和描边上的混合模式将与图层后面的内容交互。将图层模糊与未剪切纹理应用于图层将隔离混合模式，导致它仅与所选图层上的其他填充和描边交互。您可以在右侧边栏的“外观”部分将混合模式应用于图层本身，以使混合模式与画布上的其他内容进行交互。

---

从「不会画界面」到「只会画界面」再到「懂用户心理」，这条路我走了 10年 —— 如果你也在进阶，关注我，咱们结伴走得更快。