Figma 新功能 Liquid Glass：一键实现 iOS 26 风格 UI

Figma官方推出了原生的液态玻璃效果（Liquid Glass Effect），适配了 iOS 26 的设计趋势，目前该功能还处于beta状态，以下是其核心特点、使用方法及注意事项，帮助快速上手。

什么是液态玻璃效果？液态玻璃效果是 Figma 新增的效果类型，灵感源自苹果 iOS 26 的半透明玻璃风格。它通过背景模糊、折射、光影层次和色散，创造出半透明、具有深度的视觉效果，类似 iOS 26 的导航栏或卡片组件。

核心特点：

• 原生支持：无需插件，直接在 Effects 面板应用。

• 仅限 Frame：目前仅支持框架（Frame），不支持形状或文本。

• 动态交互：效果会根据背景内容（如渐变或图片）自动调整，呈现玻璃般的折射感。

如何在 Figma 中使用液态玻璃效果以下是创建液态玻璃效果的步骤，操作简单：

1. 创建 Frame：

• 使用 Frame 工具（快捷键 F）绘制一个框架。

• 建议背景使用渐变或图片，单色背景可能让效果显得单调。

2. 应用 Glass 效果：

该效果提供5个参数，分别是：

• Light（光照强度）：控制边缘光线的角度和强度，70-80% 适合大多数场景。

• Refraction（折射）：调节玻璃对背景的扭曲程度，80-90% 提供适度扭曲，过高可能影响可读性。

• Depth（深度）：调节玻璃对背景的扭曲程度，15-25% 增加层次感。

• Dispersion（色散）：色差效果（彩虹边缘），30-40% 添加轻微色差。

• Frost（磨砂）：背景模糊程度，0-15%，根据背景复杂度调整。

• 选中 Frame，打开右侧 Effects 面板。

• 点击 “+” 选择 Glass 效果，调整参数。

1. 优化细节：

• 为 Frame 添加圆角（20-30px），模拟玻璃边缘。

• 使用 Auto Layout 确保元素响应式。

• 在 Prototype 模式下预览，检查效果的动态表现。

功能亮点

• 提高效率：以前需多层模糊、渐变和阴影模拟玻璃效果，现一个效果即可完成。

• 适配苹果设计：与 iOS 26 和 iPadOS 26 的设计语言高度契合，苹果的 UI 套件广泛应用类似效果。

• 动态调整：效果根据背景内容自动调整折射和模糊，呈现自然表现。

注意事项使用时需注意以下几点：

• 性能影响：在复杂文件中，过多 Glass 效果可能导致 Figma 运行缓慢，建议迭代时关闭效果预览。

• 仅限 Frame：无法直接应用于矩形或文本层，略有局限。

• 导出限制：Glass 效果不支持 SVG 导出，建议使用 PNG。

• 开发支持：Dev 模式下，SwiftUI 代码不会自动包含 .glassEffect()，需手动添加。

• 渲染问题：在 Figma Sites 发布时，效果可能出现渲染错误，需提前测试。

社区反馈Figma 社区对该功能评价较高。X 和 Reddit 上的设计师分享了创意用法，如用径向遮罩增强边缘折射，或结合渐变增加效果层次。

Figma 官方提供了 Glass Effect Playground 文件，方便用户学习参数调整。苹果的 iOS 26 UI 套件也为该效果提供了模板。

Figma 的液态玻璃效果是 2025 年的一项重要更新，为 UI 设计增添了现代感和深度，同时简化了工作流程。对于 iOS 26 或类似项目，该功能值得尝试。

可访问 Figma Community 获取 Glass Effect Playground 文件，或直接在项目中实验。

https://www.figma.com/community/file/1522715486231239473