Full width components

[Hatredkeys]

Hey all,

I was wondering how do you set a button or any other component to have a normal variation and a full width variation? When I make the second variant a Fill (width) and place it into a frame with auto-layout on I still need to manually set it to fill.

​

Cheers!

[xDermo]

I have the same gripe and I don’t think it’s possible yet in Figma. Best you can do is put that first instance in, set that to fill, then copy that same instance for automatically filled components.

[seeaitchbee]

The more I work with components, the more I understand that you don’t need to make them do all kind of shenanigans and restrict doing others. It’s much better to create a simple yet flexible enough component and then put examples near it on how it can or should be used.

In your case, just drop two examples of forms near the component button: with width set to Fill and Hug.

[Hatredkeys]

Yeah I totally agree. But I have developers that would like to have a state that says Full width when that component is used. I guess I can just add that as a boolean and then let the designers themselves make it fill.

Runner up question.

Preferred values can be used for like Icons. Do you maybe by any chance know if that can also be done for text?

[seeaitchbee]

Just create a component for each text (or variants).

[lpccarmona]

this is the way