Spent eternity looking for animations for doughnut ring charts and couldn't find any good ones. Then came across yours and was blown away! Thanks for this!
I do not understand why are you using such a complex method to round the corners. Why don't you round those up in the same manner as if you would for rectungle? Just put 50 and it will round it.
Can you do a demonstration that does the circle 100%? I tried for hours and I have about 5% left in the circle and I can't figure out how to make it go away completely
Did manage to make a progress ring eventually but there were signs of other colours coming through even after adding the 0.5 stroke inside the ring base as suggested. The animation part worked well, but I do have a question. When you start off and duplicate the first ring, you select the amount of Sweep you want in the one on top, but have a full circle still showing in your layer menu, whereas when I do that this takes away the top ring and ends up leaving a smaller section which you label 'Final amount'. When it came to completing the colour change to match the two different states for the progress wheel, I had an orange section that was originally going to be the first state and this couldn't be changed even when the colour showing in the Design menu was indicating the correct colour was in that section.
Tried to follow this video a number of times but can't get anywhere near what you do here. I get to the section where there is the Start and End points but after that it's not possible to make the subtract selection and get past that section. The two points don't change colour when the Boolean tool is used, and in your video working between the different layers seems really straightforward which isn't the case for me. If you have any other advice that would be appreciated. Thanks.
Hi! How do you split the screen so tight so you can see the prototype but it doesn´t disturb your working area? Do you have Windows or Mac? Thanks man! You are helping a lot of people!
Hey, thanks for the feedback! I use Figma in the browser, so I just open the prototype into another window and use the operating systems (macOS in my case) window docking/splitting functionality to have the windows side by side. I also enter borderless full screen mode. On mac the shortcut is command + shift + F and on windows it should be F11 key.
Hey, you can scale the component with the scale tool, shortcut is letter "K" on the keyboard. Also if you have locked the "final-section" layer, as in the tutorial, unlock it before trying to scale the component. I Hope this helps!
![Rolling Counter [with VARIANTS] | Figma Advanced Prototyping](http://i.ytimg.com/vi/Qg2N6Zsz_RQ/mqdefault.jpg)
![Rolling Counter [with VARIANTS] | Figma Advanced Prototyping](/img/tr.png)
Spent eternity looking for animations for doughnut ring charts and couldn't find any good ones. Then came across yours and was blown away! Thanks for this!
Awesome, thank you!
I do not understand why are you using such a complex method to round the corners. Why don't you round those up in the same manner as if you would for rectungle? Just put 50 and it will round it.
Thanks for creating this video and sharing the file. It really helped me a lot! It was a bit complex but totally made sense!
Yeah, it's a bit sketchy and complex but it works surprisingly well :P and glad you found this helpful!
this is good thank you challenged me to do more
Bro hope you make another video of this but big ring for better presentation view. nevertheless, awesome job ru and thanks a lot!
Can you do a demonstration that does the circle 100%? I tried for hours and I have about 5% left in the circle and I can't figure out how to make it go away completely
Yes, I wish he told us how to do a complete one.
Impressive! thanks for sharing
Did manage to make a progress ring eventually but there were signs of other colours coming through even after adding the 0.5 stroke inside the ring base as suggested.
The animation part worked well, but I do have a question.
When you start off and duplicate the first ring, you select the amount of Sweep you want in the one on top, but have a full circle still showing in your layer menu, whereas when I do that this takes away the top ring and ends up leaving a smaller section which you label 'Final amount'. When it came to completing the colour change to match the two different states for the progress wheel, I had an orange section that was originally going to be the first state and this couldn't be changed even when the colour showing in the Design menu was indicating the correct colour was in that section.
Tried to follow this video a number of times but can't get anywhere near what you do here. I get to the section where there is the Start and End points but after that it's not possible to make the subtract selection and get past that section. The two points don't change colour when the Boolean tool is used, and in your video working between the different layers seems really straightforward which isn't the case for me.
If you have any other advice that would be appreciated.
Thanks.
Exactly what I was looking for!! Thank you so much! Your figma file doesn't allow editing. Is it possible you could post a raw file?
Currently Figma doesn' t allow to create links that give edit access. So you have to duplicate it into your own drafts to be able to edit.
@@fullstackdesigner I see. Got it. Thanks!
Too many steps. It is really confusing. It should be another method
Hey man! Was wondering how can I add the download link to my Figma project. Cheers
Damn, it only fades in and out , but there is no such smooth animation). Can smb help?
Hi! How do you split the screen so tight so you can see the prototype but it doesn´t disturb your working area? Do you have Windows or Mac? Thanks man! You are helping a lot of people!
Hey, thanks for the feedback! I use Figma in the browser, so I just open the prototype into another window and use the operating systems (macOS in my case) window docking/splitting functionality to have the windows side by side. I also enter borderless full screen mode. On mac the shortcut is command + shift + F and on windows it should be F11 key.
Thanks, very good tutorial
Insta Sub for this dude. Please give us drag and drop. Thanks!
Hi! This is great help. But I want to resize the component. Could you tell how I can do that?
Hey, you can scale the component with the scale tool, shortcut is letter "K" on the keyboard. Also if you have locked the "final-section" layer, as in the tutorial, unlock it before trying to scale the component.
I Hope this helps!
I must be really stupid, I found it really hard to follow🥹