10 EASY Figma Animations for Beginners In 1 HOUR 🔥| Figma Smart Animate Tutorial

Your Figma Designs are as good as dead without animations!

Here are 10 easy-to-implement Figma animations that are perfect for beginners. These animations not only add a touch of magic to your designs but also draw inspiration from your favorite websites!

We'll be creating easy and elegant button, text & sweet mesh gradient animations, all within Figma, no After Effects needed! Whether you're a seasoned designer looking for fresh ideas or just starting your design journey, these animations will spark your creativity and elevate your day-to-day projects.

Fire up your Figma Screens and try to follow along!

Make sure to leave a LIKE, and SUBSCRIBE for the latest insights on UX design, UI revamps, and more!

Share your thoughts in the comments below! 📩

-----------------------------------------------

😃 ABOUT ME

This is Saptarshi (a.k.a. Sapta), an engineer turned self-taught Product Designer based out of Bangalore, India. I have worked with some of the very well known startups of India and learned anything and everything that is needed to create amazing experiences for the users. I'm also an active speaker, teacher and community builder, and have delivered over 60 talks, workshops and webinars on design. In this channel, I post videos with tips, strategies, tutorials and general gyaan to scale your career in Design. If you are into it, you may want to subscribe and hit the bell icon to that you don't miss out :)

-----------------------------------------------

💻 📷 🎤 MY GEAR

-----------------------------------------------

📖 CHAPTERS
00:00 Intro
00:52 FIgma Animation #1
03:52 FIgma Animation #2
06:58 FIgma Animation #3
10:47 FIgma Animation #4
19:42 FIgma Animation #5
26:25 FIgma Animation #6
32:26 FIgma Animation #7
38:39 FIgma Animation #8
45:16 FIgma Animation #9
52:41 FIgma Animation #10
57:18 Outro

-----------------------------------------------

📲 SOCIALS

-----------------------------------------------

🎶 MUSIC

The jingles and the background score is composed by Sargam Prakash, an awesome designer and musician. Do check out his channel.

-----------------------------------------------

🌟 TAGS

ui,ux,product design,ui design,ux design,uiux design,figma basics,figma tutorial for beginners,figma,figma tutorial,figma animations tutorial,figma 2023,figma tutorial web design,figma button animation,figma text animation,smart animate figma,figma smart animate,how to use smart animate in figma,user experience,saptarshi prakash,sapta,swiggy design,10 EASY Figma Animations for BEGINNERS!,Figma Smart Animate Tutorial Under 60 Minutes,figma full course

-----------------------------------------------

🌟 HASHTAGS

#uiux #design #uxdesign

[aosis]

I liked this video a lot as it teaches some really good concepts. Only issue I found was the demo should be shown first and then its solution. It would help not only to excite the designer to make something new but also help some amateur one to try out making himself first and if stuck, see the solution.

[raheelpasha]

One of the best transition videos I have seen of Figma.. he's such a pro that I can't find him making any errors like many amateurs.. !!

[noormerchant]

Interaction is delightful candies for users when used with relevance & it helps users in their experience. All the animations you showed are really great & have pushed me to try something more of my own.

[lechuguitaaaa]

You're the best, really. Most of the tutorials I watch are boring and I usually have to go back multiple times to understand what's being said, but you made it so well I even had fun! You're really easy to understand <3 Hugs from Argentina

[Arjund]

Thanks for sharing this tutorial, it's very well explained. I recommend doing an hour tutorial on variables that would be helpful. Also, we can use X & Y coordinates when moving any objects for smoother animations.

[DavidYuan]

Thank you! I've finally found a way to make animations after figma changed the "after delay trigger" that only apply to top-level frames.

[mohitvamsi]

I thoroughly enjoyed this tutorial! Thank you for sharing such easy to follow methods ✨

[jhonsnow]

Bro im learning web dev but i can't understand backend part
So im thinking
UX UI + frontend part for good salary
Is this good ? Help me

[poulamimajumder]

In the progress bar animation, how can I loop the animation in the preview window? After reaching 3, it doesn't automatically return to 1

[buttercup]

Amazing content and the presentation:)I was trying to follow along but for the first animation I used Auto layout and it seems the animation did not work well.And then tried exactly like yours :Group then frame and then it worked.Is there any reason behind it?.

[ayazqureshi]

I'm Figma Lover. and I like the way you are explaining each part of animation... New Subscriber here thanks alot... I'm waiting to see more eXtreme Complex Animation Using Fimga for Website and Mobile App Too... Once again Thank you so much... Lots of Respect from Pakistan ...

[prafulsutar.uxd.]

Exceptionally, your tutorials are informative and concise.

The trippy one was the best animation of the lot.

Thanks Sapta! See you in the next one soon.

[hiuchichan]

0 degrees, 120 degrees and 240 degrees will make it easier to set up a rotation animation. Especially easier for someone with OCD.

[mahammushtaq]

I create a button using layout. I dont know why 1st animation is not working here because everytime I add th circle .It will added into to layout dont go back.

[Thingwithlegs]

Dear Sapta this is great but extremely difficult to engage, you overly repeat things again and again in your speech. Overall incredible work but leaving that tiny feedback. Cheers

[sanjaykumarca]

you killed it bro, learnt many things in 58 min I feel

[samandysimeon]

Please, how were you able to bring the circle behind the text? I tried it and it’s going behind the text and frame.

[EmilyByrne]

Great, great video! It would have been helpful if you had played the animation at the beginning of each segment so viewers know whether it's useful to them before going through all the steps.

[jayribagchi]

Thanksss a ton for these awesome tutorials! Please keep them coming!!

[MobileMonk]

Really Loved your Explanation on the animations...But how do you handover animations to developers?