Does Figma Dev Mode really work? Testing it in practice

I tested Figma's Dev Mode vs Browsers by copying and pasting the Dev Mode code, and the result was surprising

Recently we had a problem where we needed to abstract the paddings and borders of containers so they wouldn't be added to the widths and heights of elements, since in Figma this doesn't affect the object's width when enabled, as shown in the image below:

Testing FIGMA (Design)

I created 2 containers with the same settings of 200px width, however, the one on the left had a border, and the one on the right had 20px padding and no border.

Testing in HTML (Code)

Here comes the test: will it be the same if we insert the same settings in the code? So I took the same settings that Dev Mode gives us and inserted them into the HTML, as shown in the image below:

HTML result in Chrome

Right away we notice it doesn't look the same, something is missing and it doesn't follow the predefined widths.

Inspecting the code we notice that the CSS is correct at 200px width, but the final result is 242px, which, adding 2 borders of 1px plus 2 paddings of 20px, gives a total of 42px extra.

Overlapping the Figma and HTML screens makes it even worse.

So does Figma Dev Mode not work? Is it worth paying for something that doesn't deliver the expected final result? The doubt remains.

Solving the problem with box-sizing

There is a CSS property that solves this problem, which is box-sizing: border-box.

To sum up, what is box-sizing: border-box?

Box-sizing with the border-box value makes the browser not calculate an element's dimension by adding borders and margins to height and width, simple as that, and it solves Figma's problem.

As shown in the image below, it has the option to add or not add borders and paddings.

HTML result with Content-box: border box

Although the text is still a problem between Figma and code that doesn't end up 100% the same, this is still a great solution to Figma's big problem of "spitting out" CSS formatting, however, it wasn't 100% and will depend on the DEV having the technical knowledge to adjust these points by hand. So don't get mad at the Dev, people.

Different Browsers, different engines

100% pixel perfect delivery doesn't exist because each Browser has a different browsing mechanism (browser engine), and this affects the visual result in terms of pixels, so pixel perfect across browsers doesn't exist.

Pay attention to Handoff and Design QA

Don't get attached to magical pixel-perfect overlaps between Design vs Code, because as proven above, Figma doesn't produce 100% of the code and browsers don't render the same visual 100% identically among themselves, so they won't be 100% the same.

Thank you, and for more content go to: Iniciativa UI, Bruno Biagioni

---

Further reading

• W3C Schools — Box Model
• Napoleon — What is a Browser Engine?

---

References

• Wikipedia (2025). Comparison of browser engines
• coolchaem (2021). Browser Rendering
• Free Code Camp (2020). Survey Form Project — ::after, ::before & box-sizing: (align problem!)

---

READ ALSO