Website Animations Using ONLY Figma

The goal today is to create fancy preloading animation and hero animation for our Figma Website. This will help you impress your clients and also prepare for when you're going to hand off or develop this website yourself so you understand what kind of animations and interactions you want to use. Figma does it all, no After Effects or other design software is needed, not even plugins. Let's get started.

📽️ CHAPTERS
00:00 - Intro
00:24 - Component variants Technique
02:30 - Reveal Animation
09:04 - Preloading Animation
14:30 - Final Thoughts

⬇ Would you like to see other Figma related videos? Let us know in the comments. ⬇

📱 Find us on SOCIAL MEDIA

Thanks for watching our video!

#Figma #WebDesign #FluxAcademy

[DanialJaveed]

Flux Academy always coming in with the gold stuff. Thanks for this, GREAT starting point for more complex animations which I can already imagine doing. Like for example, putting more variants in the loading bar, making it look like it is actually loading instead of just going through. Animating the illustrated elements as well, and then the icons, etc. Thank you again!

[rtubiras]

I would like you to know that the way you explain is very easy to understand and follow. Really appreciate your hard work here. Thank you so much!

[christianeholden]

thanks so much for this! started using Figma transitioning from XD and still learning how best to navigate with components quickly. That replace function is new and saves time!

[scribbling.panda_]

WOW! That was really cool. Loved how you have explained such complex animations in such an easy way!!!!

[felipecuenca]

Amazing tutorial, I had been having trouble understanding the logic behind the animations, but no more! Thanks a lot!

[ui.debbie]

Of all the animation tutorials, this is packed full
Thank you

[callu]

This is gold. Can't thank you enough, you're bringing my designs to a new level

[rowdyleon]

Oh my god, this video was an eye-opener. Never knew this was possible. Thank you so much for sharing.

[InkiestOfInks]

literally awesome and helpful. this is my first time using figma. i’m trying to make a fun and interesting portfolio and this simple video is a game changer!! when i got it to work the first time i felt so accomplished!! thank you so much

[IsionIndustries]

I’ve been using Figma since the beginning of this year and I have to say I really enjoy using it so far. I haven’t done any prototyping work yet but I have been using After Effects only for 9 years. I’m so used to animating keyframes on a timeline so this will take some getting used to

[SonySteals]

Great! As much as I do not believe you can somehow teach people how to pick fonts - your figma tutorials are the top notch youtube tutorials.

[Exc.]

Thank you so much. You posted this video at the right time!!!

[SnehaMohandas-edfd]

I loved this, Taught me a lot! Thank you so much!

[jammidugenoak]

you are very good @ explaining and demonstrating - big thank you

[TheCreativeDad]

Amazing video man, very insightfull. Thanks for sharing

[roryflorensa]

it's gonna make my design to be another next level. thank you so much

[gabrielburgos]

Love Figma more and more every day, great great vid

[ramazanguler]

best technic for animation in Figma, thank you very much for good lesson

[Someone]

I loved it...This was everything I needed..

[mounabouhjira]

Nice video i really enjoy. It's gonna help me a lot