I’m designing sites on Figma and then my development team are building them. This is less of a Figma question and more of a design question.
A common bit of feedback we get once the designs are built and on the development site is that everything looks too big - as if everything is zoomed in (we’ve checked, everyone is at 100% scale on their browsers).
I’m struggling to find resources or discussion online addressing this but coming up short.
The developers generally use laptops and I presume the clients are usually also using laptops to view the sites. I design on the larger 27 inch imac.
My base body copy is 16pt for example - following all guidelines that suggest this to be a solid choice. I try to largely stick to a 8px design system for type. The developers set 1 rem to be 8px - body copy is set to 2 rem. However once built it just looks ‘big’.
I’m really struggling to see where things are going wrong here. Is it my designs? Is it the implementation of them? It’s likely both is my assumption!
When you zoom out to around 80% scale in browser things start looking a little more ‘normal’ is the feedback that was received.
Does anyone have any advice or come across similar issues when their designs have been translated to build by developers?
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?
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 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 !
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.