Inspect CSS on Figma not aligned with CSS when engineer code out

Ask the community
1

I have a button component that the total height is 40px (included 1px border inside all around)
But when engineer building this, they will need to minus 1px for the padding shown on Figma. (Refer to Image 1)

I know if I use border “Outside” to style the component will then get the correct padding by excluding the border. But when I stack two components, the padding will then not follow what we inspect on Figma. (Refer to Image 2)

Does anyone encounter the same dilemma? If yes, can you share with me how you solve this?

Screenshot 2022-07-28 at 4.42.00 PM
Screenshot 2022-07-28 at 4.42.00 PM1021×449 191 KB

2

If I understand correctly, you need to select “Included in layout” for the Strokes property in the Auto Layout advanced settings.

2 Likes
3

Hi, yes this is what I am asking about. And thanks for sharing me the tip. I have solved my problem :smiley:

4

You are my personal hero! Totally forgot about that, thank you so much! <3