如何在 Figma 中模糊背景——背景效果快速指南

了解如何在 Figma 中使用背景模糊和图层效果来模糊背景。非常适合 UI 设计和简洁的叠加层。

使用 AI 创建令人惊艳的产品视频和文档

本教程由 Trupeer 在不到 5 分钟内制作完成

免费创建

在本指南中，你将学习如何使用设计菜单在 Figma 中为框架应用模糊效果。
按照详细步骤，在你的设计项目中实现所需的元素模糊效果。

Figma 中的背景模糊效果会让你的设计呈现磨砂玻璃般的外观，常用于弹窗、卡片和覆盖层。

步骤 1：准备模糊图层

创建一个形状
使用矩形或任何你希望出现模糊效果的形状/框架。
添加填充
用纯色填充它（例如白色或灰色）。
降低不透明度
降低该图层的不透明度（通常约为 10–40%）。这一步是必要的模糊效果，没有透明度就不会显示。

步骤 2：应用背景模糊

选择图层
点击你刚创建的形状。
前往效果面板
在右侧边栏中，点击效果旁边的 "+"，然后从下拉菜单中选择背景模糊。
调整模糊值
点击效果旁边的设置图标，并使用滑块控制背景的模糊程度。

可选：微调

你可以将背景模糊与投影结合，以增加层次感。
同时调整不透明度和模糊，打造柔和的磨砂效果或更强烈的玻璃质感。

分步指南：如何在 Figma 中模糊背景

步骤 1

要开始在 Figma 中应用模糊效果，请先选择你想要模糊的框架。

转到界面右侧的设计菜单。在该菜单中找到效果部分并点击它。

在效果部分，点击“+”符号，然后选择“添加新效果”。

To begin applying a blur effect in Figma, first select the frame you wish to blur. Navigate to the design menu located on the right side of the interface. Within this menu, find the effects section and click on it. In the effects section, click on 'Add a new effect' by clicking the '+' symbol within it.

步骤 2

添加新效果后，会出现一个下拉菜单。点击该菜单并选择“图层模糊”。此时，模糊效果已成功应用到你选择的框架上。

Once the new effect is added, a drop-down menu will appear. Click on this menu and select 'Layer Blur.' The blur effect has now been successfully applied to your chosen frame.

在 Figma 中模糊背景的专业技巧

对对象应用模糊：
选择你想要模糊的对象（图像、形状或框架）。在右侧边栏的 Effects 部分，点击 + 图标，然后从下拉菜单中选择 Background Blur 或 Layer Blur。
调整模糊强度：
应用模糊后，使用滑块调整模糊强度。你可以增大或减小模糊量，以达到你想要的效果。
使用高斯模糊以获得更多控制：
如果你想更精确地控制模糊效果，可以使用高斯模糊，它能提供更平滑、更渐进的模糊效果。
模糊图像或框架：
如果你正在模糊一张图像或一个框架，请确保已选中该图像。你可以在不影响其他设计元素的情况下对图像进行模糊处理。
在图层上应用多重模糊：
你可以将多个模糊效果应用到不同的图层上。例如，如果你想要一个背景模糊但文字清晰的效果，只需将模糊应用到背景图层。

在 Figma 中模糊背景的常见误区

模糊了错误的图层：
解决方法：在应用模糊之前，仔细检查你选择的图层。使用图层面板确保你正在编辑正确的图层。
过度使用模糊效果：
解决方法：不要对文字或徽标等重要元素应用过多模糊，否则会降低可读性。请谨慎使用模糊来突出设计重点。
模糊后出现意外的清晰度：
解决方法：如果对图像应用模糊后仍出现不想要的清晰效果，请调整模糊量，并尝试不同的效果，例如高斯模糊，以获得理想外观。
导出后模糊效果未显示：
解决方法：如果导出时模糊效果没有显示，请确保以高分辨率（PNG 或 SVG）导出，以获得更好的质量。

在 Figma 中模糊背景的常见 FAQ

我可以在 Figma 中模糊文本吗？
虽然你可以模糊矢量形状和图像，但不能直接对 Figma 中的文本应用模糊效果。不过，你可以先将文本栅格化为形状，然后再应用模糊效果。
如何模糊设计的背景？
选择背景图层或图像，应用图层模糊效果，并调整强度。这非常适合突出前景元素。
我可以控制模糊的方向吗？
Figma 的模糊效果是均匀应用的。如果你需要方向性模糊（如运动模糊），在将图像重新导入 Figma 之前，需要先使用 Photoshop 或 Illustrator 等外部图像编辑工具处理。
导出设计后，模糊效果会保留吗？
会，只要文件保存为 PNG 或 JPG 等受支持的格式，导出的设计中就会保留模糊效果。
有没有办法只模糊图像的一部分？
有，你可以在 Figma 中使用蒙版来隔离图像的特定区域，并且只对那一部分应用模糊效果。
如何在 Mac 上录屏？
要在 Mac 上录屏，你可以使用 Trupeer AI。它允许你捕捉整个屏幕，并提供 AI 功能，例如添加 AI 头像、添加旁白、在视频中放大和缩小。借助 trupeer 的 AI 视频翻译功能，你可以将视频翻译成 30 多种语言。
如何为屏幕录制添加 AI 头像？
要为屏幕录制添加 AI 头像，你需要使用AI 屏幕录制工具。 Trupeer AI 是一款 AI 屏幕录制工具，可以帮助你创建包含多个头像的视频，也能帮助你为视频创建自己的头像。
如何在 Windows 上录屏？
要在 Windows 上录屏，你可以使用内置的游戏栏（Windows + G），或者使用像 Trupeer AI 这样的高级 AI 工具来获得更高级的功能，例如 AI 头像、旁白、翻译等。
如何为视频添加旁白？
要为视频添加旁白，请下载 trupeer ai Chrome 扩展程序。注册后，上传带有声音的视频，从 trupeer 中选择所需的旁白，然后导出你编辑后的视频。
如何在屏幕录制中放大？
要在屏幕录制过程中放大，请使用 Trupeer AI 中的缩放效果，它允许你在特定时刻放大和缩小，从而增强视频内容的视觉冲击力。