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?
here are some ideas:
Maybe your Interface Scale isn’t 100% in Figma.
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 !