Figma Support Forum

Adaptive/Responsive Preview

Currently, the preview is locked to whatever dimension the design is (if your design is 1440, the prototype/preview will always bee 1440). This is fine if you’re designing for mobile, where the dimensions are largely fixed; however, it’s a nightmare for Web. Especially if you need to send the design for user testing or stakeholder feedback. If their screen dimensions are not exactly the same as the design, they won’t see an accurate representation.

The preview should be ADAPTIVE to the design’s constraints and layout behavior, or else what’s the point? Framer does this beautifully and has different preview options to allow for this.

Quick Note: This is NOT the same as ‘Responsive’ preview, where the design changes as you change the screen size.

2 Likes

If I understood well, normally the option scale down to fit width should do the trick, especially knowing that the configuration you make is reflected on the link you’ll generate later to share the prototype for user testing purposes, and so on.

2 Likes

@Steven Nope, that doesn’t work:

My design is 1440. MY screen is 1680. Macbook pro 2017.
Shared with CloudApp

What about the 100% Display then :thinking:

2 Likes

@Steven Nope. I’m telling ya, it’s just not something Figma does. Figma’s entire preview and sharing system needs to be redone. It’s the most limiting of all the design tools.

Shared with CloudApp

3 Likes

For reference, here is how Framer does it. As you can see, as you adjust the screen, the design respects the constraints and layouts.

6 Likes

Presentation view currently has options 100%, Fit and Fill. How about adding a new option “Responsive” where the root frame would be forced to take the size of the app or browser window?

I would appreciate such feature a lot.

What do you think?

Greetings

Jan

3 Likes

For the moment, I don’t need reel responsive options.
but I REALLY need "Scale up or down to fill WIDTH"

I’ve just have the similar problem, I am not sure it’s the same like you said.
I am making a mobile app, and I just finished a prototype of the core feature. I want to do the usability testing with some users. My end users are chefs, many of them don’t even have a computer at home. Also this product is a mobile app, so the best is testing directly with mobile devices.

I designed with iphone X screen size, while I sent the prototype link to the users, their phone opened with the browser so the frame was cropped. They can not see the tab bar. They need to move up the whole frame to see the tab bar (then, they can not see the top part of the frame). This is the same like you said, the frame size can not be adaptive to the users’ device. I’ve also used the Auto layout, but the problem is not Auto layout, it’s the size of the frame.

I am wondering how people do the usability test via the users’ mobile phone without fullscreen. How do everyone do the prototype test ?

I have exactly the same situation as you. Every single word is true. I need to test my user on Maze. As it is an app, the best way to do it is via a mobile device. And the only way to share them is via their browsers.

Similarly, this is what happens to me:

My bottom navigation bar got cropped. There’s no way for my user to navigate across the most important screens.

Any idea to troubleshoot this as I am so desperate.
n

Hey Tammy,

I 've got to know how to fix this. You just need to do 2 things:

  1. First, get your bottom navigation bar to be at the end of your long artboard. Then set it to “fixed position when scrolling” and its constraint to “bottom”

  2. Second, set your prototype options to “Fit - scale down to fit”:

  3. You will get this effect no matter how small your users’ mobile screensize is: