Skip to main content
Solved

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

Selene1

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

Best answer by tank666

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

Figma Help Center
View original
This topic has been closed for comments

3 replies

tank666
  • tank666
  • 4863 replies
  • Answer
  • July 28, 2022

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

Figma Help Center
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Selene1
U
2 people like this
  • Selene1
    Selene1
  • U
    user_189741
Selene1
  • Selene1
  • Author
  • 1 reply
  • August 11, 2022

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

U

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

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings