Thanks for sharing this. But how do you make this design developer-friendly? An HTML CSS dev is not going to split rings and move the circle between the two half-ring layers.
I've been trying to recreate something very similar, except have it animate where you can set the progress to 0% and goes to 100%. Any idea on what I can do? Any responses are appreciated :) Thanks in advance
Thanks for the comment. Ideally you would want to link the 'sweep' value (which is a % out of 100) to a Figma Variable which you can control, but I don't think Figma has that functionality. To make a make-shift version you could try make a rotating ring with a layer on top that crops the visuals if below 100% and then prototype different variants together.
I didn't create myself, but if I wanted to I would just build it on illustrator. There are a lot of figma community files that contain all of these mockups already. I would just take it from there.
You sabi this thing, no worry! Perfect explanation. 💯
Appreciate that
Wow 2 uploads in one day, what a treat!
Only for my loyal subscribers
Thanks for sharing this. But how do you make this design developer-friendly? An HTML CSS dev is not going to split rings and move the circle between the two half-ring layers.
thanks bruh
I've been trying to recreate something very similar, except have it animate where you can set the progress to 0% and goes to 100%.
Any idea on what I can do?
Any responses are appreciated :)
Thanks in advance
Thanks for the comment. Ideally you would want to link the 'sweep' value (which is a % out of 100) to a Figma Variable which you can control, but I don't think Figma has that functionality. To make a make-shift version you could try make a rotating ring with a layer on top that crops the visuals if below 100% and then prototype different variants together.
Can you show me how you created the watch?
I didn't create myself, but if I wanted to I would just build it on illustrator. There are a lot of figma community files that contain all of these mockups already. I would just take it from there.