What frame size for desktop should I begin with for consistent prototypes?

[Daniel_Dey]

I want to make design for web application and I am facing difficulty choosing the frame size to begin with, for desktop.

The problem is Figma’s prototypes are NOT responsive, it is simply not available as a feature. By that, what I mean is this -

Even if you make completely responsive design for the device type, by using constraints, grids and columns, auto-layout etc, you have a responsive frame in the design file, you can drag its corner and see you design react responsively, but when you run the prototype, it just displays the frame as is.

So if you leave your frame the size of android frame and then run the prototype with iPhone device, the frame will remain the size of android and thick black borders will appear on the side and bottom. Figma prototype do NOT resize the frame to match device size.

So, to get consistent prototype experience for user testing and stakeholder reviews, the frame size should be same as prototype device size. Which is another problem, as the prototype devices available are Macbook pro 14" and 16", which are of sizes I am not comfortable beginning with 1512x982 (although I might have to).

Plus there is another issue, in static websites height doesn’t really matter as the user will scroll it, but in web applications it does, for example if I want to keep a floating action button at the bottom right corner with certain distance from the bottom, or if for a dashboard I want to know where is “above the fold” line. Also with different browsers different viewports are available made shorter by the tab bar, search bar, bookmarks bar etc.

So considering all these issues, what frame size is best to begin with, so that I can have consistent prototypes to be used for user testing and stakeholder reviews?

Edit: typos.

[Brian_Saunders]

I settled on 1440⨉900. Sort of arbitrary (based on an older MBP screen resolution) but you could pick a different size based on what display size your testers are likely to have (so you can set scaling to 100% and feel confident that no tester will end up with horizontal scroll). When I make a web prototype I always set the height of the parent frame to that 900px and then set the appropriate content areas to scroll. The 900px height of the parent frame is how I set the “fold”. I do this to simulate a consistent viewport for prototype viewers regardless of what device they’re viewing the prototype on. For a floating action button I just position it bottom right and set its position to fixed (with bottom/right constraints set on it). This is different from how I would set up my frames if I needed to export flat images.

[Daniel_Dey]

Thank you so much! That was very helpful