Borders are not included in the size of frames

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.

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

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

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

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.

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.

Having this problem too - please solve asap

Is this solved yet?

Have you added this to the “Share an idea” section?

No, I don’t think It is added…

It is truly bizarre that a browser-based design tool with a mission as Figma defines it does not give users the choice to calculate the size of elements based on content-box or border-box, at least in the inspect panel. This creates so many discrepancies between design and dev implementation, and gets flagged by QA.

Stranger still is that in some cases Figma seems to include the border when calculating distance, while other cases, no. It is arbitrary. For example, when viewing redlines in inspect, if you select a button and hover over the padding area of the button it will show 12px padding between the text object and the border. But if you hold CMD on Mac it will show 13px, thus calculating the border. This shows the application is capable of calculating border as part of a total value including padding. So why can they not do that with the height and width calculations?

Different developers work in different ways and depending on if they use hover, CMD + hover, or simply view the code snippet in the Inspect panel they may get different values for spacing. It’s indefensible.

Looks like this has finally been addressed in the new update with the ‘Strokes: Included in layout’ option 🙂

Is has to be set to inside for it wo work.
Not sure If I’m getting this option.

Where in Figma is this “Strokes: Included in layout” Option?

ps: Just found it (It’s in the auto layout options… I was looking in the Strokes options)

It would be great if Figma could incorporate this feature in the future. However, as of now, I guess the recommended approach for aligning the design between the designer and developer would be to utilize box-shadow instead of a border. This choice stems from the fact that using borders in Figma does not precisely match how CSS is rendered in web browsers. Of course, there are advantages and disadvantages to consider when opting for box-shadow over borders. Additionally, I’ve noticed that some developers use the box-sizing property as a workaround to ensure that their designs in Figma align properly.

Box-sizing

I appreciate the heads up, @Daniel_Cullinan. 🙏 I also noticed the “border-box” in the inspector window, so my mistake for not paying attention for that detail. It’s great to be on the same page with both the designer and developer. 🙌

Is there a way to turn it on by default?

Any update for this?