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, UA-cam for allowing experienced people to share their knowledge. Priceless. Thank you Chinsk Design for this video! 😎
Hi Ralitsa!😃 Exactly! When I was creating this video I had to do a lot of experiments before reaching the final version😅 I think so far this is the only way that works. The important thing is that this way solves our problem😎 Thank you so much for watching and for the feedback, comments like this makes me motivated to create more videos and share more knowledge🤩 What's the next tutorial you want to see here on the channel? Have a great week!
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.
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.
Hi!😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
Hi!😃 Thank you so much for the feedback!I’m glad to hear this. Comments like this motivate me to keep posting more tutorials.🤩 What do you want to learn next? Have a great weekend!
Hi! 😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
@@ChinskDesign I am not sure what to do. I've tried it out a few times now, which has been great practice honestly, but I am not able to get to spin even after following your prototyping.
Hi! Don't worry, we'll make it work: check if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did.
@@ChinskDesign Omg that did the trick! Yea I did not pay attention enough. I messed up around 3:13 mark where you are only rotating the group and not the "down" layer, which like you said should be static. I got it working now. Thank you so much! If I may provide some feedback for your videos. I would suggest some how displaying your key strokes, that way people can see what keys you pressed when performing certain actions. By no means is this suggestion related to my issue, just think if you will not be speaking in a video displaying key strokes would be rad! Thanks again!
@@ChinskDesign I figured out why it doesnt work for people, while making different copies of the same component the name of the shape changes when it should stay same for all shapes.
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.
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
Hi! 😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
@@ChinskDesign Yes it worked after I did your suggestions ! Thanks. But now I am trying to rebuild a different one using not the ellipse vector but with the “Arc Tool” using the sweep and ratio properties, but so far its not working. Maybe this only works with a solid vector shape and not the “Arc Tool”?
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?
Hi Wendi!😃 This was a way I found to make it work. I don't know if there was any new updates in Figma and now the "back circle" is no longer necessary. Did you make it work?
I've followed every step and couldn't make it work. After doing some research I found out there is nothing wrong with my design, I just need to press "R" to enable presentation mode and it will show the animation.
Hi! 😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
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?
Go to frame section and select any of the frame from the list then then tap on assets on the left hand side and move the component in the frame which you have created then open the prototyping it will work
@@Anbajjjj 2 things keep in mind 1-while rotating the ellipse you need to select the group but not the frame 2- after prototyping when you go on prototype screen tap on R then it will work
@@princetripathi7949 Thank you. Now it is moving but it is stopping a bit and not moving smoothly around. And the little ellipse is getting out of the circle when moving. Why do you think that is?
Hi!😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
@@ChinskDesign your welcome bro.. to be honest, i just find channel that make tutorial so complete for make interactive compponent in figma only your channel..:oops:
Glad to help!😃 Thank you so much for the feedback! Thanks for watching, share our channel with your friends! I will keep posting videos every week. Which tutorial do you want to see here on the channel? Have a great week!
Hi! 😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
Hi!😀 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked 😃
Hi!😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
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, UA-cam for allowing experienced people to share their knowledge. Priceless.
Thank you Chinsk Design for this video! 😎
you have to select grouped circles after making another frame. And rotate the ring.
Hi Ralitsa!😃 Exactly! When I was creating this video I had to do a lot of experiments before reaching the final version😅
I think so far this is the only way that works. The important thing is that this way solves our problem😎
Thank you so much for watching and for the feedback, comments like this makes me motivated to create more videos and share more knowledge🤩
What's the next tutorial you want to see here on the channel? Have a great week!
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.
Hi!😃 I'm glad to hear that!🎉🤩 Thank you so much for watching! Which next tutorial do you want to see here on the channel? Have a great week!
Your comment made my life much easier. Thank you!
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.
Hi!😃 Thank you very much for the feedback! Comments like this motivate me to keep posting more tutorials!🤩 Have a great weekend!
Thank you
Love how detailed the tutorial is
Hi!😃 Thank you so much for the feedback! Have a great week!
Hey! Please tell me the loading bar color format you use thanks.
Hi!😃 Do you want the hexadecimal color code?
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
Hi!😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
i've the same problem, even i did everything you do, step by step, but it's not working when i playing it on the prototype frame
Hi!😃 Check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Let me know if it worked.
I faced the same issue but sorted just need to press R (Restart button) while on the prototyping screen.
I just had to log in to thank you, OMG thanks soooooo much for you tutorial
Hi!😃 Thank you so much for the feedback!I’m glad to hear this. Comments like this motivate me to keep posting more tutorials.🤩 What do you want to learn next? Have a great weekend!
can i export as GIF
Mine doesn't rotate smoothly like yours. Followed every step but it's no behaving the same.
Hi! 😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
I tried it again and it worked perfectly! Thank you Chinsk!
Nice!😃 Glad to help!🤩 Thank you so much for watching! Have a great week!
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?
Hi! 😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Let me know if it worked.
@@ChinskDesign Yes, I did. Is there any way I can share my figma file with you to double check my work?
@@ChinskDesign I am not sure what to do. I've tried it out a few times now, which has been great practice honestly, but I am not able to get to spin even after following your prototyping.
Hi! Don't worry, we'll make it work: check if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did.
@@ChinskDesign Omg that did the trick! Yea I did not pay attention enough. I messed up around 3:13 mark where you are only rotating the group and not the "down" layer, which like you said should be static. I got it working now. Thank you so much!
If I may provide some feedback for your videos. I would suggest some how displaying your key strokes, that way people can see what keys you pressed when performing certain actions. By no means is this suggestion related to my issue, just think if you will not be speaking in a video displaying key strokes would be rad! Thanks again!
this is the only way that worked for me, the "linear" way freezes when testing the proto, still don't know why. Thanks!!!
Hi!😃 Exactly, I also tried other ways but I think this is still the only one that works. Thanks for watching! Have a great week!
@@ChinskDesign I figured out why it doesnt work for people, while making different copies of the same component the name of the shape changes when it should stay same for all shapes.
Exactly! Great observation! Thank you for the advice and sharing knowledge! Have a great weekend!😃
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.
Hi!😃 I’m glad to help! Thank you so much for watching! Have a great week!
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
Hi! 😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
@@ChinskDesign Yes it worked after I did your suggestions ! Thanks. But now I am trying to rebuild a different one using not the ellipse vector but with the “Arc Tool” using the sweep and ratio properties, but so far its not working. Maybe this only works with a solid vector shape and not the “Arc Tool”?
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?
How do we hand over this animation to developer
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?
I't don't need to.
Hi Wendi!😃 This was a way I found to make it work. I don't know if there was any new updates in Figma and now the "back circle" is no longer necessary. Did you make it work?
hola necesito ayuda, hice el paso a paso, pero cuando pongo el prototipo no sale la animación, me ayudan por favor?
¡Hola!😃 Intenta presionar "R" en el modo de presentación para reiniciar la presentación. Déjame saber si funcionó.
I've followed every step and couldn't make it work. After doing some research I found out there is nothing wrong with my design, I just need to press "R" to enable presentation mode and it will show the animation.
Hi!😃 Thanks for sharing this information!Great that you made it work! Which next tutorial do you want to see here on the channel?
Olá Jannie, muito obrigado, eu estava a horas aqui procurando onde errei hahaha
Mehhh!!! Thank you @Jennie
How do I export this animation from the figma file ?
Did you manage to export?
Why when I press review? The circle doesn't turn for me.
I'm facing the same problem. The circle isn't rotating.
Hi! 😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
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?
Hi!😃 Check if it has “Frames” in the left panel or just “Groups”. The groups must be inside the frames. Let me know if it worked.
Go to frame section and select any of the frame from the list then then tap on assets on the left hand side and move the component in the frame which you have created then open the prototyping it will work
I have done everything you did in the video but it is not working for me. I don't know what to do.
On the prototyping screen just tap the R button it will work.
@@princetripathi7949 I tried to refresh the page but it did not work.
@@Anbajjjj 2 things keep in mind 1-while rotating the ellipse you need to select the group but not the frame 2- after prototyping when you go on prototype screen tap on R then it will work
@@princetripathi7949 Thank you. Now it is moving but it is stopping a bit and not moving smoothly around. And the little ellipse is getting out of the circle when moving. Why do you think that is?
This was so helpful. Thank you so much :)
Hi! I’m glad to help!🤩 Thank you so much for the feedback! Have a great week!
I don't have the dot in 0:43. How do I get this dot?
Hi!😃 You need to move the first dot, then the second dot will appear. Did it help you?
Thanks for making this video, it was super helpful!
Glad to help! 🤩 Thanks for watching, share our channel with your friends and help us grow and share more knowledge! 😃 Have a great week!
Thanks for the tips! But why does mine animate not smoothly, instead it has a pause at the end of every round?
Hi!😃 Thank you so much for the feedback!🤩 Check the time set in the “after delay”, the time must be “1ms” of each frame. Let me know if it worked.
I am having the same problem after following each step exactly as it is.
Hi!😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
Change the animation ramp to Linear. I think this is the answer you're looking for
Thx for the tutor bro... Keep spirit to make cool tutorial like this...🔥🔥🔥
I’m glad to hear that! Thank you so much! 🔥🔥🔥
@@ChinskDesign your welcome
bro.. to be honest, i just find channel that make tutorial so complete for make interactive compponent in figma only your channel..:oops:
Thank you very much! 🙏 I will keep posting tutorials videos every week, share with your friends 😃
thanks for the tutorial!
Glad to help!😃 Thank you so much for the feedback! Thanks for watching, share our channel with your friends! I will keep posting videos every week. Which tutorial do you want to see here on the channel? Have a great week!
Can someone help, mine is doesn't work
I've click the R button, rotate, still doesn't work
Hi! 😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
Thank you!!
Hi!😃 I’m glad to help! Thank you so much for watching! Have a great week!
Thank you.
Hi!😃 I’m glad to help! Thank you so much for watching! Have a great week!
Nothing is working for me
Please help
Hi!😃 Which part do you need help?
Lovely!
Hi!😃 Thank you so much for the feedback! Which tutorial do you want to see here on the channel?
It's working well man!
Hi!😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Let me know if it worked.
@@ChinskDesignI became fan of your videos man!
@@ChinskDesign bro can u please make a video on automatic transmission of images or frames
Glad to help!🤩 Thank you so much for the feedback! Thanks for sharing this information
I’m glad to hear that!😃 Feedback like this makes me motivated to keep making more videos🤩 Thank you so much🙏 Have a great week!
Cool :)
Hi! Thank you for the feedback! 😃 Have a great week!
Thx for this
Thank you very much for the feedback!😃 Have a great week!
Liked. Background sound is obnoxious tho
Thanks for watching! Have a great weekend!
don't work for me
Hi!😀 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.
Thanks
Hi!😃 I’m glad to help!🤩 Thank you so much for watching!
Its not working properly
Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked 😃
Would be better with voice over
100th comment!
🎉😃 Thank you so much for watching! Have a great week!
did not worked, the circle is just static
Hi!😃 Did you create two layers (“up” and “down”)? As I did in minute 01:20 of the video. Also, check around 3:13 mark, if you've only rotated the top layer “up”, because the bottom layer “down” should be static. Also check if you have already rotated the top layer “up” in the first frame, the first frame already needs to have the first rotation of the layer “up” just like I did. Let me know if it worked.