In this short tutorial, I'll show you how to create an adjustable progress bar that can be manipulated in its instances without needing to create predetermined states or break the component to adjust it.
Here are the steps:
1. Create the progress bar fill (color section), set its width to 300px or whatever you prefer, and add a large enough border radius (100px should work).
2. Create a small text section.
3. Select both the progress bar fill and the text, then create an auto layout with 0 spacing between them.
4. Ensure the text is set to "hug" and the progress bar is set to "fill."
5. Create the back section (light grey), set it to the exact maximum width of the progress bar fill, and again, add a large enough border radius.
6. Select the new background and the frame containing both the progress bar and the text section. Add a new auto layout to combine all three, with the progress bar in front, aligned to the center using absolute position.
7. Change the number of characters to see if it pushes the progress bar according to its length. If it does, select the text and hide it.
8. Create a master component, and you're done!
Credits:
Music: Corporate Rhythm by RomanSenykMusic
#figma #figmatutorial #tutorial #figbite #gradient #progressbar #adjustable #instances #instance #text #value
Негізгі бет FIGBITE | Progress bar instances controlled by text
Пікірлер