Hey Mark,

here are some ideas:

Maybe your Interface Scale isn’t 100% in Figma.

Check View > Interface Scale.

It also scales the design canvas, so even when you zoom at 100% in Figma the pixel values shown in the design panel are not displayed at correct scale.

If thats not the case maybe try to compare your designed screen with the developed result directly in the browser. Export your screen as a 1x png, open that png in the browser and compare it directly with the real thing to see if theres any major difference.

Maybe its an issue because of different pixel densities of the monitors (like retina display of the iMacs)…? I observed that my coworkers had to adjust their zoom level to see objects at correct scale (e.g. 200% zoom for @2x device-pixel-ratio).

Maybe it has something to do with the development? The default value for rem is 16px, maybe the 8px override doesn’t work properly so everything scales basically two times instead?

Thanks for the tips!

Interface scale is 100%

I’ve compared a 1x png and the built page and they look largely the same. That was an interesting test - never considered that.

So, this would then suggest it’s my designs that are too ‘chunky’?

Perhaps I am just so used to seeing things on the larger display and the real estate that it provides that I’m underestimating the shift to a small laptop screen and the impact on the look and feel of the site.

Comparing the dimensions of both outputs and the Figma file is essential to have a good starting point. Using the screenshot tool or any other tool that displays pixel measurements is recommended.

In this case it seems the measurements match so I also would guess the problem is the perception of your eyes. So you’re probably right.

I also experienced something similar. For months I designed some screens (1920px width) on an 27" display (2560x1440px with 1dpr) and switched to a 24" (1920x1080px with 1dpr). Its not a huge difference but the screens felt really different on the smaller display and therefore my designs appeared really large in direct comparison. Also, the pixels physical size differ a bit between the displays which slightly amplify the effect.

When higher device pixel ratios come into play I guess the effect must be even greater.

I have the same problem. Thank you for you suggestion

I am also facing the same problem for designing i use macbook air m1 but my developer use dell laptop after development the website looks like zoomed i dont know how to fix this problem can anyone help me

Hey there, I’m also facing the same problem. One of our developers here suggested that they need to work on their CSS and fix the issue. We use tailwind CSS to develop our screens and according to them, they need to modify it. Our dev team is currently experimenting on it. I will post if they are able to crack the issue. If any of you finds a solution before that, please share !

@Mark_Collins Have you found a solution?

@Shrabani_Panigrahi did your dev team figure out what was the problem? We are having the same issue.

Same issue on my project. Everything is too large.

I am experiencing the same issue - when my designs are implemented at 1-to-1 size, the web application appears “blown up” compared to the design and the developers run out of screen space (even though in the design there is still plenty of space). Both my Figma design interface and browser are at 100% zoom.

Majority of designers if not all are facing this problem. I believe in one thing, developers in general tend to take the design as is (using the numbers on the Figma) and they do not look if the implemented design has the same look and dimensions of the Figma design. In my opinion designers and developers should cooperate after the implementation in order to update the size based on the look not based on the numbers.

And what would be the best thing, is for the designer to build the website himself (implement it) using some no code tools such as Webflow, this way designers can guarantee sizes are going to be similar to the design.