No video :(

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

Подписаться 3,3 тыс.

Просмотров 2,9 тыс.

50% 1

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.ne...
________________________________________________________
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!

Опубликовано:

14 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 9

@TheMikenart 19 дней назад

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

@tonjrv 8 дней назад

Thanks a lot mate! 🔥 And I totslly agree, I used to work with smartwatches and it blew my mind how complicated simple stuff like this is to do.

@maricapyba 4 месяца назад

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 4 месяца назад

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

@demonzaikkusu7027 4 месяца назад

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

@tonjrv 4 месяца назад

It's super simple to do with a component set, check out the tutorial from here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-w3Z3rQD2qQk.html

@Contactbps 4 месяца назад

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 4 месяца назад

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 4 месяца назад

@@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 :)