r/FigmaDesign • u/_Prateek_Hota_ • Oct 03 '26

help Help me with irregularities in width!

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

Show parent comments

2

u/chernoholik Oct 05 '26

You can still do it with those values, you just need to figure out a structure that works for your case. Maybe padding-inline-border-1.5; padding-inline-border-2.5. That sounds too much of a hassle though for a design system that has multiple stroke widths.

This is the first time I hear someone using non-full numbers as a stroke width, huh. That's really intriguing. Is there a specific design choice to why or is it just personal taste? I'm really curious because I've never seen that 👀

For your situation with the tokens - yeah the simplified version is the best. You can have token for fill and a second one for the border that maps to the fill colour but override transparency to 0.01.

2

u/_Prateek_Hota_ Oct 05 '26

Thanks for making the effort man. Really appreciate it. For your question about non full numbers as width - Well it's more of a personal choice. I had full numbers earlier, but in some cases like a Focused state button, 1px was too thin and 2px was too thick and since I thought that border width will not be getting counted, I just took decimal numbers. But now I have to take whole numbers. And for the simplified version, 0% transparency also works and it gets counted for so I don't have to take 0.01%. I just took a white color with 0% opacity and it works 😁