Solved

Borders are not included in the size of frames

Forum|Forum|5 years ago
April 10, 2021
22 replies
14472 views

Adding, for example, 1px borders does not increase the size of the frame.
It makes designing websites where “box-sizing: border-box” just not accurate with how browser compute the width and height.
How do you go around this behavior ?
for me, I add extra 1px padding around the frame (I also have to be using auto-layout).

Ask the community

This topic has been closed for replies.

Best answer by Daniel_Cullinan

It works in Figma, you just need to choose 'Strokes: Included in layout" from the Auto layout options:

Daniel_Bolton

I’ve also hit the same problem and not really come up with a solution that I’m happy with yet. Not sure if anyone knows of a “best practice” for this situation, but would love to hear any suggestions people may have.

Ryuichi_Sakata

I’ve same issue . Does anyone have a solution?

Derry_Birkett

New Member

Yes, this is really a major oversight to me it seems. Please fix, Figma: make it an option if you have to.

Albert_Kuo

This is also an issue for us. Would love to see a solution.

levidjones

I’m sure that borders aren’t included intentionally as the mental taxing of building on a 8px grid gets a lot more time-consuming and complicated when you factor border and alter padding when building the design system

Where it should change imo would be the inspect panel. Removing border-box and altering the padding of auto-layout blocks with a border could happen there.

Tucker_Hawkinson

I think it would be amazing to see a solution for this. Right now we have to build a sass function to calculate what padding values will be based on what the border value is. It adds a lot of complexity to our code across multiple applications. This may seem like a small issue but the ramifications that the borders aren’t treated the same way in Figma as they are by the browser renderer are huge for either the development team or the design team. It adds a lot of tech/design debt for the team.