Figma Support Forum

Screen Resolutions

When designing for desktop, what resolution do you guys use?

For example, I’m doing a redesign of all the font sizes on a website. I’ve designed it in 1920 x 1080, but the customer is viewing my prototype on a 1440 x 900 screen. I understand that they have the same ratio, so the prototype will shrink/grow to fit their window, but I assume the text sizes will also scale, meaning that what was 24px in my 1920 x 1080 mockup, is now 12px on their 1440 x 900 screen.

Is this correct? And if so, is there any solution to this, aside from redesigning the whole site in 1440 x 900?

To further complicate things, what if I have multiple customers with multiple screen resolutions reviewing the same design? I can’t desig a separate file for each individual screen resolution?!

I do all desktops in 1440x900 or 1366x768 and make maybe a styleframe for bigger sizes.

Make one page with all typography maybe, so you can show the correct size to the client?

2 Likes

Thanks for the response, I’ve somehwat discovered a solution to this as I went down the rabbit hole of grids and responsive design.

I always take responsiveness into consideration, but I rarely took the time to properly set my constraints and grids, as I rarely had to demonstrate with my prototypes how the responsiveness would work.
This solves half the problem - if a customer asks to see the design in a different desktop size, I can simple resize the frame, and it will change in a responsive way, and there won’t be any fiddling around to do.

HOWEVER, this means I have to change the size of each frame, and if you’re working with a prototype with lots of frames, this would take forever.

It’d be great if, when users are viewing the prototype in the browser, the design would behave in align with the responsive design you’ve built. In Figma, I can play around with the frame size, and it will act in a responsive way. However, if I view the prototype and play around with the size of the browser window, it doesn’t act in the same way.

Not sure if I’ve missed something here, but this is still a problem.

Hi

I am new to Figma.

I wonder why desktop screen frame size is by default of 1440 * 1024, whereas my desktop and usually what I have observed is that the standard resolution if 1366 *768.
And I have observed that many designers do not take the bottom taskbar, and top navigation bar. (and even the bookmark bar)

Will it be okay if I design it for 1366 * 660 (considering leaving spacing for top navigation & bottom taskbar)

Is this making sense?

1 Like

The most important part is to make a design which is usable across different screensizes. For that you should be making your design as modular compontens that can be mixed together into fitting any screensize.

As long as you get your designs communicated to those who will develop it, you are good to go.

I do make sure my screens are designed responsively, so it’s not a huge issue to change the frame width whilst not disrupting the design.

In my previous example though, I was specifically trying to get sign-off on a bunch of changes in text size, and no matter how responsive your design is, the prototype may be viewed on multiple screen sizes, which will affect how something like text size is displayed.

The only viewing options when viewing prototypes are to either scale the design up or down to fit the users screen, or to view the design at 100%.

If you scale the design up or down, it will also scale the text size up or down accordingly, so what was once 14px is no longer being viewed accurately as 14px.

If you view the design at 100%, there’s a good chance one of the people viewing it will have a screen smaller or larger than your frame, in which case they may have to scroll horizontally to view the entire page.