This issue has been bothering me since I started using Figma a few years ago:

The rendered px units in Figma are about 8% smaller than they are in Chromium-based browsers.

In other words, when developers copy px values from Figma and implement them on the web, the rendered results are around 10% larger than the design.

This is a really serious issue, especially when selecting very small font sizes - for example, there is a considerable difference when a font is rendered at 10px, 11px and 12px, and designers are very careful when selecting small font sizes.

And just in general, you design for a specific experience, especially when creating fluid web page designs - a 10% difference is a huge perceived difference on a large page, and it just gives the design a different feel and experience versus what you actually designed.

Here is a test to illustrate the difference:

These screenshots were taken on Windows 11, which takes precise screenshots of the rendered device pixels. (The images were imported and placed in Photopea, which, again, imports the exact pixels without applying any kind of scaling.)

At the top, you have Figma web, with a zoom setting of 100% in Figma and the browser - this is the default zoom setting in all Chromium-based browsers. (I also tested Figma Desktop, and the rendered physical pixels are precisely the same - likely because Figma Desktop uses a Chromium-based web view.)

Below that, you have the browser-rendered implementation of the px values used in the design, as shown in the HTML below it. This screenshot was taken in Brave, but all Chromium-based browsers render it the same way: Chrome, Edge, Vivaldi, Opera, Chromium, etc. (I have not checked for this issue in Safari or Firefox, or any other OS besides Windows 11.)

85% of web browsers are Chromium or Chromium-based - so you can’t really ignore this issue.

To be clear, this is not a simple matter of setting a zoom value in my browser, or in Figma.

The issue appears to have something to do with display size or scaling in Windows - I have two coworkers, and a second system at home, all with different display hardware, and any system with a greater than 1080p monitor has this issue.

• On a 1080p system, a 300x300 rectangle renders as 300x300 physical pixels, since display scale (in Windows) is set to 100%  - in other words, there is no problem on a classic 72 dpi monitor.
• On a 1440p system, a 300x300 rectangle renders as shown in the screenshots above - display scale (in Windows) is set to 125% and window.devicePixelRatio returns 1.25.

So the issue I’m reporting here is the fundamental relationship between the px unit in Figma, and the rendered output from Figma’s rendering engine - which does not appear to match that of mainstream browsers.

I’d assume the app uses window.devicePixelRatio to set the base scale of your rendering engine, so perhaps it isn’t using this value in a manner consistent with Chromium? That is:

• 300 x 1.25 = 375, which sounds “technically correct”, and appears to match your engine.
• 413 / 300 = 1.38, so it appears Chromium adds 10% to this value.

I don’t have a qualified guess as to the reason, but the 10% difference versus the configured display scale (in Windows) appears to match the observed difference.

I understand that Figma doesn’t use browser-native rendering, and I don’t expect pixel-perfect 100% identical rendering of e.g. fonts, since those are rendered by a proprietary type rendering engine, which differs on Windows, Mac, Linux, etc.

But I do expect (require, really) accurate representations of overall page and element sizes.

I don’t think that’s unreasonable?