search

formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
97 stars 3 forks source link

Unable to adjust width of progress bar in figma #190

Closed b-graves closed 8 months ago

b-graves commented 8 months ago

I am trying to create designs using the progress bar component but I am unable to change the width of the filled part of progress bar without detatching the instance, which makes it more difficult to illustrate different states

Screenshot 2023-10-27 at 15 43 17

Is there a way to either enable the width changing for the purple part or provide a property where we can select the filled percentage?

blvdmitry commented 8 months ago

Good point! There is no native way in Figma to control the width through properties, only through a limited set of variants. So a bit more flexible approach we've been using for other components is to control the width through auto-layout padding.

I've just made this adjustment to the component and it will ship in the next release but meanwhile you can do the same in the downloaded version of the library:

image

Here I switch the "selection" to fill the "root" frame and instead I'm controlling its width with right padding of the root auto layout styles. This auto layout padding can be changed when you're using an instance of the component.