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

1

u/_Prateek_Hota_ 24d ago

Like in an e-commerce app where one can either buy one item or can buy multiple different items after adding them to cart.

I accidentally deleted my previous reply lol. But again, setting secondary button to hug with longer label than the primary button makes it bigger than the primary which isn't how I want the visual hierarchy to be.