how to add realistic shadows in Figma
In this video, we explore the concept of depth in design and how it can help create more engaging and memorable experiences for users. We'll look at examples of flat design and how it has dominated the design landscape in recent years, but also discuss some of its limitations.
From there, we'll dive into Figma, and using the toggle interface element as an example, explore principles of depth, including layering, shadows, and animation.
https://paavandesign.com/
/ p44v9n
---
Get the Figma file and follow along: https://www.figma.com/community/file/...
---
00:00 A history lesson
01:30 Let's get into Figma
02:04 Step 1: Inner shadow on outer frame
02:38 Step 2: Drop shadow on button
02:49 Step 3: Button roundness with radial gradient
03:55 Step 4: Bounced light with white inner shadow
04:47 Step 5: Outer glow
06:00 Step 6: Outer stroke
06:36 Final toggle design
06:59 Step 7: Easing and animation
08:50 Final prototype
09:10 Closing thoughts
---
PS I'm still learning how to make videos for YouTube. If this video was helpful, please do drop a like or share it with a friend. If you want to help me, leave a comment letting me know what I can improve or what you want to see more of!