Full width button variant

Hi, Dennis. If you put the button inside a frame with auto-layout, you can set it’s width/height to fill where it will fill all the space.

For more information regarding auto-layout, check this tutorial by Figma (albeit, its outdated 😅) https://www.youtube.com/watch?v=TyaGpGDFczw&ab_channel=Figma

Hey @Raphael_M thanks for the reply!

Is it possible tho to make a button (component) and give it a variable full width so it will automaticaly make it fill container?

Yes. Add an auto-layout in your component with variants and set all the variants to fill container.

If you paste the instance in a frame with auto layout, it should automatically fill the space.

Hey,

The thing is that it doesn’t seem to work consistently for me. I need to manually do a fill for the one with the full width before it uses it correct.

Hi. Have you checked if the frame where you will put the button is on auto layout? Because in my end, it works properly.

Yeah the thing is if I drop the component from the left drawer into that frame and change the variation to full width it turns to fixed.

Hi. Will you be able to show me a video example if you don’t mind? Thanks.

Has anyone found a solution for this? I’m having the same issue.

My Default button variant is set to hug and I want a second Mobile button variant that should be set to fill width. Dragging in the Mobile button variant into an auto-layout with fixed width it works and the button fills the entire width of the auto-layout. But if I first drag in the Default button variant and switch to my Mobile button variant it changes to fixed width and has the same width as my main component.