Skip to main content
Mark_Collins
New Member
February 8, 2023
Question

Built designs always look too large compared to designs

  • February 8, 2023
  • 11 replies
  • 7044 views

Hello everyone.

Designer here.

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?

Thanks!

This topic has been closed for replies.

11 replies

Mazen_Mikati1
October 7, 2024

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.