I am relatively new to Figma, although I have been designing for a while now.
I came across one realisation: the screen resolutions offered by Figma are not completely right. I mean they use the screen resolution, however all websites are launched in browsers and each browser has its own viewport.
For example, Google Chrome has a 143px viewport. This means that if I want to make a design for a 1920x1080p screen, in reality I should make my frame 1920x969px? And 1440x881p?
Any Figma veterans out there? What is the correct way to do it? I have never seen anyone talking about it in their courses or youtube videos.
The presets are merely guidelines in the end. If you’re designing a website, you should make it work for all resolutions anyways. The height doesn’t matter because it should be as tall as your content requires. Pick a comfortable width for your target platform and get to designing. Don’t get too fixated on specific resolutions, unless you’re designing for only one specific device, like an Apple Watch or something.
But then the design will not be shown EXACTLY as intended? For example, if I have smaller elements like cards on the bottom of the page half-clipped, and I intend to show the user that the page is scrollable. Many times elements such as these will not be shown correctly if you do not account to the viewport size. On top of that, then the whole burden lies on the developer to make the placement of the elements perfect. A bit frustrating when the prototype shows one thing and in reality, something different comes out.
Prototypes will show exactly as you’ve designed them in your frames. If the frame bounds exceed the resolution of the user’s browser, it will be scrollable, just like a real website.
There’s unfortunately no frame that resizes to the user’s resolution, nor can you know what resolution the user is viewing your design in. They could be viewing in a windowed browser in any dimension.
You just have to make your design for the specific frame you’re using. With fixed positioning, you can make elements stick to the edges of the frame regardless of the user’s resolution, but that’s about the extent of it.