Why is Figma's Default Desktop Frame 1440px? Which One Should We Choose for Development?

Ask the community
,
1

Hey community!

We’ve been facing some challenges when designing in Figma and developing for different screen resolutions, and we’d love to get your thoughts on it!

As you know, Figma’s default frame for desktop is set to 1440px width, but we’ve been running into issues when testing the implementation across different devices. I design using 1920px frames for Full HD (1920x1080), but when our developers tested the layouts on MacBook displays, the results were inconsistent. For example, we designed a grid with 17 blocks on 1920px, but when the dev team tested it, they saw 14 blocks on screens. Overall, my designs are fine and based on 12 columns but when they implement it, on some displays it’s broken and on mine and some (Desktop FHD monitors), it’s fine. 20% of desktop users are using FHD and I can’t accept that my designs are the problem and I should design on 1440px.

Our questions are:

  • Why does Figma default to 1440px for desktop designs?
  • Should we be designing for 1440px width and upscaling for 1920px? Or would it be better to design for 1920px and downscale for 1440px screens?
  • Should I add padding for 1920px? (If design on 1440px) or should I make the designs wider? (For example the box is 4cm on 1440px and stretch it and make it larger in width for FHD.)

Thanks in advance for your help!

2

Can you elaborate? You are using frames with autolayout, creating pages using component blocks?

Can you share some screenshots?

3

image
image1120×946 120 KB

This is my design but the developed version is this:
image
image1920×1080 95.8 KB

And this is good, you should see it on Safari. It’s worst and they say it’s because I use 1920 * 1080 as my frame. They expect me to design on 1440 and then they add 480px padding for 1920.

4

We used simple blocks with CSS grid I guess. I designed 100 * 100 blocks with a 10px gap and they did the same thing on VS Code and previewed on Safari, they had 14 blocks and I had 17 blocks so Safari was showing about 300px less while the resolution was higher. Probably this is because of the higher PPI. The weird thing is that the site is fine on my monitor and other desktop monitors but not fine on laptops.

5

Can you share a link to the design file so I can take a look? It’s difficult to diagnose from just writing.