Design progress bar in Figma in less than 5 min

A quick tutorial on how to design an animated progress bar in Figma.
We will create a progress bar component with two variants (Default, Full) and learn how to use Figma's Prototype mode to create an animated transition of progression from zero to full bar.
----
Twitter: / 101babich
Instagram: / 101babich
#progressbar #uidesign #ui #userinterface #userexperience #ux #productdesign #uidesigntutorial #userinterfacedesign

[@jescaochieng5601]

Thanks for these amazing tutorials. I was following your UI tips articles on medium when I decided to check you out on RUclips. I can't wait for a video on how to design date picker.

[@babichnick]

Thanks for the tip, Jesca! I'll create a video on how to create date picker.

[@ch22erry]

@@babichnick Hey! Love your video! I was wondering how do you put another layer (text) on top? I`m creating a habit tracker. And I wanted to put a name of a habit on top of my progress bar and make it a variant. But i can`t seem to figure out how to do this correctly 😅

[@PurooRoy]

Thank you very much. I started doing Figma after a long time. I could have done something like this very easily back then, but now it seems I need to relearn everything. T_T

[@lonleyangel95]

i am pretty new to this , would you please explain to me how this could be linked to actual progress hidden in data base , so that the progress change automatically

[@yuvrajchhatwani]

nothing is working as like in video

[@juliasmirnova8063]

Awesome

[@yuvrajchhatwani]

pls share the file

[@QuizPanda10]

Buttoxrp

[@andressasantos7895]

OBRIGADAAAA