Figma Glass 玻璃效果教學 (Liquid Glass) • Figma 教學 (含CC字幕)
2.2K views · 2025-07-23
Interaction & UXUI Design
我們來看一下Figma新推出的Glass玻璃效果。
我們可以利用這效果,製作出像Apple最近推出的Liquid Glass的設計樣式。
---------------------------------------------------------
【參考連結】
Glass Effect Playground 設計檔: https://www.figma.com/community/file/1522715486231239473
Apple Liquid Glass: https://youtu.be/jGztGfRujSE?si=PNos_0wvM_Xb71b6
我對Liquid Glass初次的想法: https://youtu.be/NbEpsvRgQKM
---------------------------------------------------------
【章節】
00:00 主題前言
00:38 Glass Effect Playground 設計檔
01:10 Glass玻璃效果簡介
02:21 Frame建立
03:31 邊角弧度一致
04:55 Glass操控: Light 光
07:08 Glass操控: Refraction 折射
08:12 Glass操控: Depth 鏡片厚度
08:56 Glass操控: Dispersion 色散
10:53 Glass操控: Frost 霜
13:07 Glass & Component
14:17 表面對比度增強
16:25 物件吸取背景顏色
17:56 Glass & Smart Animate
19:44 Glass & Auto Layout
21:30 Glass效果注意事項
24:10 利用Glass做圖
25:45 結尾
---------------------------------------------------------
支持我在Ko-fi (美金單位): https://ko-fi.com/alandesign
#FigmaGlass #liquidglass #Figma玻璃效果
我們可以利用這效果,製作出像Apple最近推出的Liquid Glass的設計樣式。
---------------------------------------------------------
【參考連結】
Glass Effect Playground 設計檔: https://www.figma.com/community/file/1522715486231239473
Apple Liquid Glass: https://youtu.be/jGztGfRujSE?si=PNos_0wvM_Xb71b6
我對Liquid Glass初次的想法: https://youtu.be/NbEpsvRgQKM
---------------------------------------------------------
【章節】
00:00 主題前言
00:38 Glass Effect Playground 設計檔
01:10 Glass玻璃效果簡介
02:21 Frame建立
03:31 邊角弧度一致
04:55 Glass操控: Light 光
07:08 Glass操控: Refraction 折射
08:12 Glass操控: Depth 鏡片厚度
08:56 Glass操控: Dispersion 色散
10:53 Glass操控: Frost 霜
13:07 Glass & Component
14:17 表面對比度增強
16:25 物件吸取背景顏色
17:56 Glass & Smart Animate
19:44 Glass & Auto Layout
21:30 Glass效果注意事項
24:10 利用Glass做圖
25:45 結尾
---------------------------------------------------------
支持我在Ko-fi (美金單位): https://ko-fi.com/alandesign
#FigmaGlass #liquidglass #Figma玻璃效果