Circular Progress Bar Animation | Figma for Beginners (Part 2 - Timer in Figma)

See the first tutorial on counting timer: • Learn Figma: How to do...
In this video, you'll learn how to create a circular progress bar animation in Figma. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your prototypes.
Chapters:
00:00 Preview
00:38 Circular Animation Basics
01:30 Creating Animation
04:10 Adding animations with prototype tool
06:22 Creating a Component Set for Prototype
07:05 Final
Don't forget to like the video if you find it helpful and subscribe to our channel for more Figma and Framer tutorials and design inspiration.
_________________________________________________________
Find me on other social medias
Twitter/X:
/ tonjrv
Instagram: / tonjrv
Threads:
www.threads.net/@tonjrv
________________________________________________________
If you have any questions or suggestions, please leave them in the comments section below. Let's dive into the world of interactive design with Framer!

[@TheMikenart]

Good method that worked for me. The fact Figma still haven't made a simple radial progress preset option is just insane to me.

[@maricapyba]

you saved me! i've been trying to prototype this progress component the entire day. i don't understand why figma makes it so difficult... thanks a lot

[@tonjrv]

Awesome to hear that! 🔥
And totally agree the current implementation doesn't make any sense 😁

[@demonzaikkusu7027]

how did you add the start timer to work with the number its not even a variable need help thanks :3

[@tonjrv]

It's super simple to do with a component set, check out the tutorial from here: ua-cam.com/video/w3Z3rQD2qQk/v-deo.html

[@Contactbps]

Could you please tell me how do you extract these frame, for example the progress knob dial frame? This ll really help me out ) Looking forward to your reply. I want to extract them in PNGs sequences.

[@tonjrv]

Hi mate sorry I had missed your comment. But Unfortunately I'm not sure how to export them as a PNG sequences. At the moment Figma only provides possibility to export as one still png.

[@Contactbps]

@@tonjrv Hey mate, that simply cannot be possible, since a lot of people use these types of dial designs, hm i ll see and look for other resources. see if i can find the solution to this :)