Screen Resolutions

Ah, you’re talking about the scaling feature of the prototype viewer in particular. I guess what you’re asking for is instead of just “100%”, “Fit”, “Fill”, and “Width”, there should be some sort of Responsive view where the frame is scaled to fit, but the elements within the frame adapt using constraints, auto-layout, etc. to the available space.

I LIKE that idea!

Yeah I think that would be great, although I seem to remember reading somewhere that this would be extremely complex with the way the prototype viewer has been built.

Regardless of that potential feature, I’d be interested to get others’ opinions on how I could approach the original problem I had at the start of this post:

My client didn’t like the text sizing across their whole site, so I redesigned it with updated text sizing. The problem was that due to these scaling issues we’ve highlighted, I’m not sure of the best way to present a prototype to this client that will be the most accurate representation of how the actual, coded site would look.

It seems that it’s totally dependant on what frame size we design with, and what screen size they view the prototype with. If I design on a 1440px wide frame, but they view it on a 1920px wide monitor, there are only two options:

1. Scale up the design to fit the 1920px wide monitor
2. View it at 100% size, which means the prototype will only take up half the screen

Both of these won’t be great experiences, nor will they give a realistic idea of what the final design will look like.

Hi guys, I’m a frontend developer, please make your designs using a width of 1440px, and a starting height of 820px, that’s the screen real estate of a Macbook Pro 13,3’’ considering the browser top bar of 80px.

I recommend that size because it usually scales up really well, the same sizes look good in a Full HD monitor. However, when I get a design created in frames of 1920x1080, they are already too big for laptop screens, in which case I usually have to resize the elements 80% so that they look good on laptops.

Hi guys,

Sorry to ask it again, but what is the bottom line?
which frame screen (screen size) is better to design in Figma?
that can fit for websites or dashboards,

Thank you (:

Short Answer: 1280 is the perfect size to design for web.

Long Answer:
Coming from a visual programming/no-code perspective, the rule of thumb we use is to work in multiples that start with 320.

320 is the width of the smallest mobile screen on the market, although it might be completely gone in the future, there are still people viewing websites on these puny resolutions.

You set your breakpoints in multiples of 320. So the first one will be 640 and that covers tiny tablet devices. Next one from that is 960 which is larger tablets and tiny laptops. Then comes the first major one, 1280. This covers standard size laptops. From there, you move up to 1,600 and 1920. Double 1920 to get 3860 or true 4K displays. You can keep going up from there but that is not very practical.

Everything is always nice and neat and works like magic on 20 point grids. There is really no sense in working in 1440 but you can if you want to, because again, 1440 is exactly half way between 1600 and 1280 (160px each way X 2 = drum roll please… 320)

So you can cut scene however you want and use all sorts of different grids, gutters, etc. But again, that is just more work at the end, especially when responsiveness must be a given from the get go.

P.S. Yes, text sizing will not change when you go from 1920 to 1280 or 320. But if you are designing with 4K displays in mind, you might want to set conditionals that increase font size when the audience/viewer screen is larger than 1920. 14/16/18 and 24 can look very small on large displays, etc.

Hi, check my response below and hopefully that gives you some insight.

senseful response, which is understandable. thanks

A lots of thanks for awesome guidelines.

I think 1440 is the best resolution. It’s ideal between 1600 and 1280 and font size should be 16px.

Hello Brother, It is a constructive and logical answer. Thank you for that.

Can specify more about the heights with and without consideration of
( Taskbar, Bookmarkbar, Tabbar ) or at least the average px for these bars.

Reason: As a developer, whenever I have to design a hero section, if I choose the height of the section according to the design, sometimes it is more than laptop screen height and sometimes it is less.

Currently, I am using height = 100vh (vertical height) to solve this problem. But is there any logical solution for this for Design side?