Figma After Delay Animation | Overlay Prototype

Figma Smart Animate Tutorial:

In this video I go over how to add an animation delay to your Figma prototype. I go over my entire process - how to add interactions to your Figma design, how to add an 'after delay' animation and how to customize the position and animation properties for an overlay.

In this video I show you:
0:00 - Intro
0:16 - Figma UI Project
1:11 - Notification Overlay
1:45 - Figma Interactions
3:50 - Custom Figma Interactions

--

Gear

--

Let's Connect

--

DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

[martinlee]

i just wanted to say... you're the best - your channel is truly a blessing for the Figma UX world!

[miknike]

Have been trying to figure this thing out and have had no luck until I found this video. Thank you!!!

[MissAnimequest]

oh my god you literally saved my ass! ive been going crazy trying to figure this out since a week now, i didnt even know what this was called! thank you so much!!!!

[jessicaloreto]

Girl, you rock!!! Thanks a lot for this video!! It's perfect!! Keep on the great job you're doing!

[ewertoncassianoxavier]

Thank you so much for this amazing video. It is exactly what I needed!

[arjunjacob]

Could you make a video on pop up overlays that appear for a few seconds then ease out? Like message notifications on mobiles.

[amongdoomers]

"In this video" at the start is so satisfying 😂

[nope]

This was really helpful and solved my issue - thank you!

[larahiller]

Thank you so much for this tutorial. This was exactly what I needed.

[whoooo]

Тhanks, this video helped me so much!

[dcasuto]

Thank you. However, why is my After Delay button grayed out?

[anwarshadaab]

you explain so nicely, so your motive behind every action is easily understandable.

I have been working with bootstrap recently and I used different size of images for my carousel.

Sadly images are looking bad due to aspect ratio, some were cropped very badly and my page became scrollable even I set carousel height to 100vh.

So its my request to you, please make a bootstrap carousel video where navbar is already built and please guide in the best way how to handle different sized images in carousel and also make them responsive as well.

ONLY YOU CAN DO IT

[nurulislam-xwdi]

Good video about FIgma. Thank very much Angela Delise.

[Nonob]

Ive been trying to connect frame by doing the "after delay" animation but I never could for some reason figma alway "gray" this option. How to solve that?

[marine]

Thanks for all your videos! Do you have tips on a animating overlays so it moves in on the screen under a symbol (in my case, a navbar)?

[manikantamatta]

Good video can you make a on accordion using HTML and CSS it would help me a lot

[jonnylaris]

Good video but could have been 30 seconds instead of 6 minutes...