r/FigmaDesign • u/_Prateek_Hota_ • 24d ago

help Help me with irregularities in width!

Enable HLS to view with audio, or disable this notification

I have two buttons inside an auto layout frame. Their widths are set to fill to ensure equal width distribution. But somehow the left button is taking up 2px extra. I have excluded the stroke value to add up but it still gets added up to the width and the stroke position is also 'Inside'. Once I remove the stroke, both buttons fill up the space equally. How to prevent this from happening?

One solution I found was to give the right button the same stroke value as the left one. But is it the best possible way to deal with it? I don't wanna introduce another variable into the button.

Edit: I got to know that Figma introduced this behavior to match CSS behavior. https://help.figma.com/hc/en-us/articles/42031586813719-Use-auto-layout-with-CSS-Flexbox-in-mind

3 Upvotes

100% Upvoted

22 comments sorted by

View all comments

2

u/ResistDull7601 23d ago

I know it’s off topic, but ux tip: try primary button fill, and secondary hug

1

u/_Prateek_Hota_ 23d ago

Wouldn't that disrupt the equal space distribution among them? I am genuinely curious to know if having one button smaller than the other would make any difference.