How to Create a Liquid Glass Button in Figma – Step-by-Step Tutorial
In this tutorial, I’ll show you exactly how to create a beautiful Liquid Glass button effect in Figma. We’ll design a responsive button, add gradient strokes, apply blur and shadow effects, and customize it to look just like the Apple Liquid Glass style seen in their latest UI design.
💡 What you’ll learn:
- How to create responsive buttons in Figma
- How to apply gradient strokes and customize them
- How to use background blur and inner shadows for a glass effect
- Tips for layering, clipping, and reusing your button components
Follow along step by step and learn how to turn any button into a stunning, modern glass component inspired by Apple’s design language.
👉 Chapters and Timestamps.
0:00 – Intro
0:32 – Adding Gradient Stroke
0:58 – Applying Background Blur
1:20 – Adding Inner Shadows
2:40 – Ignore Auto Layout
3:11 – Creating the Liquid Effect
3:48 – Duplicating and Reusing the Button
4:30 – Final Touches and Tips
6:20 – Outro
💡 Don’t forget to subscribe for more Figma tutorials and UI design tips.
🛠 Created by ELEWAY — Elevate your way.
Видео How to Create a Liquid Glass Button in Figma – Step-by-Step Tutorial канала ELEWAY
💡 What you’ll learn:
- How to create responsive buttons in Figma
- How to apply gradient strokes and customize them
- How to use background blur and inner shadows for a glass effect
- Tips for layering, clipping, and reusing your button components
Follow along step by step and learn how to turn any button into a stunning, modern glass component inspired by Apple’s design language.
👉 Chapters and Timestamps.
0:00 – Intro
0:32 – Adding Gradient Stroke
0:58 – Applying Background Blur
1:20 – Adding Inner Shadows
2:40 – Ignore Auto Layout
3:11 – Creating the Liquid Effect
3:48 – Duplicating and Reusing the Button
4:30 – Final Touches and Tips
6:20 – Outro
💡 Don’t forget to subscribe for more Figma tutorials and UI design tips.
🛠 Created by ELEWAY — Elevate your way.
Видео How to Create a Liquid Glass Button in Figma – Step-by-Step Tutorial канала ELEWAY
Figma Figma tutorial glassmorphism liquid glass button Figma button design UI design Figma effects Figma gradient stroke modern UI Figma glass effect Figma blur effect Figma responsive design Figma beginner tutorial glass button Figma Apple UI design Figma design tips How to Create a Liquid Glass Button in Figma Step-by-Step Tutorial
Комментарии отсутствуют
Информация о видео
6 июля 2025 г. 19:01:02
00:04:56
Другие видео канала