It is possible, but a lengthy explanation for Reddit. This YouTube video shows how to animate a round progress bar: https://youtu.be/_eBzKeOsaDs?si=4sFvuYzBk-KYZsAG Instead of setting your progress bar animation trigger to “after delay”, set it to transition to on “Key/Gamepad” and choose a random key combination (ex. control shift Y). This just enables the transition to occur once it is initiated by a variable change. Name each of the progress bar variants with a number - I used intervals of 25 (ex, 0,25,50,75,100). Create a number variable to set the progress bar variant. I named mine “ProgressBar” - see image Place the progress bar on the artboard and bind the variant to the variable. Now the ProgressBar variant will set the variable of the component. Create a checkbox component. Use Boolean naming (true/false) for the variables for checked and unchecked. Create a Boolean variable for the checkbox. I named mine “CheckBox”. Place the checkbox component instance on the artboard, and bind the Boolean variable to the variant. Setup an interaction with a conditional on the checkbox that sets the variable for the checkbox to checked or unchecked when it is clicked. Also include set variable to add to the progress bar percentage - note it will need to coorespind to the variant names you setup for the component. In my example I used 25. Ask any questions you may have. Gif link: Figma Progress Bar Example Answer from spirit_desire on reddit.com
Figma
figma.com › community › file › 1272185145737268273 › progress-bar-ui-kit
Progress Bar UI Kit | Figma
🚀 Progress Bar Components Set Introducing a versatile and customizable Progress Bar Components Set, now available on the Figma Community! Perfect for designers and developers, this set includes a variety of progress bar style (linear, circular, and stepped) to suit any project. Each componen...
Videos
02:48
Animated progress bar in Figma - YouTube
03:36
Design progress bar in Figma in less than 5 min - YouTube
09:52
How to Create Figma progress bar animation like a pro - Figma ...
01:01
Create an interactive progress bar component: Figma tutorial #ui ...
How To Design Progress Bar (Figma Variant Tutorial)
05:41
Make Animated progress step bar using Figma | Figma Tricks - YouTube
Material Tailwind
material-tailwind.com › v3 › figma › progress-bar
Best Figma Progress Bar componenet Examples - Material Tailwind
By showing the proportion of completion through a dynamic and visually appealing bar, users gain a clear understanding of how far they are in a specific action.
Reddit
reddit.com › r/figmadesign › is it possible to make a progress bar work?
r/FigmaDesign on Reddit: Is it possible to make a progress bar work?
November 30, 2024 -
Hi, I'm building an app in Figma and I need it to have a round chart to show the progress of the user when he completes a task and checks it on the checkboxes.
Ex: The user has 5 activities to do, and opens the app to check (checkbox) the 2º activity of the list. When the user clicks to check, the progress bar that had no colour now evolutes to show some colour, just like this
Is it possible to make this relation/animation in Figma or just when it goes to the dev?
Thank you for your time
Top answer 1 of 2
2
It is possible, but a lengthy explanation for Reddit. This YouTube video shows how to animate a round progress bar: https://youtu.be/_eBzKeOsaDs?si=4sFvuYzBk-KYZsAG Instead of setting your progress bar animation trigger to “after delay”, set it to transition to on “Key/Gamepad” and choose a random key combination (ex. control shift Y). This just enables the transition to occur once it is initiated by a variable change. Name each of the progress bar variants with a number - I used intervals of 25 (ex, 0,25,50,75,100). Create a number variable to set the progress bar variant. I named mine “ProgressBar” - see image Place the progress bar on the artboard and bind the variant to the variable. Now the ProgressBar variant will set the variable of the component. Create a checkbox component. Use Boolean naming (true/false) for the variables for checked and unchecked. Create a Boolean variable for the checkbox. I named mine “CheckBox”. Place the checkbox component instance on the artboard, and bind the Boolean variable to the variant. Setup an interaction with a conditional on the checkbox that sets the variable for the checkbox to checked or unchecked when it is clicked. Also include set variable to add to the progress bar percentage - note it will need to coorespind to the variant names you setup for the component. In my example I used 25. Ask any questions you may have. Gif link: Figma Progress Bar Example
2 of 2
1
Why do you want to make it work?