Loading Animation | Figma Interactive Components

In this tutorial, I will show you how to create Loading Animation with Figma Interactive Components. Also, you will learn how to use Frames, Groups, Multiple Components, Variants, Prototype and Smart Animate.

In this video I show you:

00:00 Loading UI Design
02:35 Create Groups
03:00 Frame Selection
04:16 Create Multiple Components
04:33 Combine as Variants
04:45 Prototype

======

Watch my others Figma Interactive Components tutorials:

======

Don't forget to like, subscribe and turn on notifications to watch new design videos and tutorials

[ralitsadimova]

Seemed to be easy at glance. I tried it and I tried and tried but didn't work for me.
Then I started reading the comments, and thankfully the solution was there.
I had the same issue as some of the people here.
I just ignored the importance of naming the layers and manipulating them separately.

Thank you, YouTube for allowing experienced people to share their knowledge. Priceless.
Thank you Chinsk Design for this video! 😎

[JessicaItepu]

Thank you Soo much! 🎉At first it didn't work. So I restarted. I realised I was turning both the up and down... So I rotated just the first group and it worked. Also had to press R for the animation to begging.

[dracokid]

Thanks for the Wonderful video. I have been trying this for the past 2 days browsing through different videos but this video helped in understanding the way I should be doing it.

[favourogbuehi]

Thank you
Love how detailed the tutorial is

[duyvuonghoang]

I just had to log in to thank you, OMG thanks much for you tutorial

[adrianaa]

Thanks for the video, but I have been trying 3 times and it's not moving when I try it, not sure what to do

[princetripathi]

Thanks for the video!
It wasn't working for me initially though I replicated the same then I have tap on the R (Restart button) on prototyping screen It worked.

[balogunoluwapamilerin]

I tried it again and it worked perfectly! Thank you Chinsk!

[yawerkamal]

Hey! Please tell me the loading bar color format you use thanks.

[zenittoh]

thank you for tutorial! but i have one problem.. after reading many solutions, i finally managed to get the animation to work. The problem is: when I insert the animation in the main frame where I have created a simple interface, what will be displayed to me will no longer be the interface together with the animation, but only the animation.. solutions?

[facundocastelo]

this is the only way that worked for me, the "linear" way freezes when testing the proto, still don't know why. Thanks!!!

[GregCullen-nhkv]

Hi, I have copied the same interaction speed and type you are using but my animation is choppy between each variant. I cant figure out why its not smooth like yours, I tried it on Safari and Chrome, same issue and had a colleague test on her end, same result — does not animate smoothly between the variants

[wendifisher]

Thank you for this! As a new designer, I'm curious how it works though. Can someone explain to me why the back circle needs to stay stationary?

[lalitbarai]

Mine doesn't rotate smoothly like yours. Followed every step but it's no behaving the same.

[Cristian-chyn]

I can not seem to get this to work after doing it step by step. Am I missing something? Did a new Figma update change this?

[martinleon]

hola necesito ayuda, hice el paso a paso, pero cuando pongo el prototipo no sale la animación, me ayudan por favor?

[kristinesondergaard]

Hi, I think I followed all the steps correctly but I'm getting a message that says "prototype needs to have at least one frame" when I go to play it. Any idea why that's happening?

[PruthviHammigi]

This was so helpful. Thank you so much :)

[jenniferflores]

Thanks for making this video, it was super helpful!

[ykw]

How do we hand over this animation to developer