Adaptive/Responsive Preview

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.

@Steven Nope, that doesn’t work:

My design is 1440. MY screen is 1680. Macbook pro 2017.

What about the 100% Display then 🤔

@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.

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

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

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:
   

   

Worked just fine! Thank you!

This is very nice feature to have. And not just for a sake of web. iPad supports side by side apps so their dimensions can be dramatically different (not including orientation). I’m doing all my designs using Auto Layout so in theory there is absolutely no problem for Preview to stretch frame to any size browser asks.

@Aalok_Trivedi the work around for this currently is to set greater screen width in design and then in preview you can scale down by “fit to width” option.

Example: Create design in 1920px width, now it works in 1920px plus 1440px or any screen smaller in size

Not really a fan of scaling since you actually want a 100% view of elements.
So a new responsive preview mode based on Auto Layout settings, Modes and Constraints would be a logical addition.

With all the new auto-layout features, you have a lot more control over min-max width and can even set variables for canvas sizing. Unfortunately, in prototypes, you are limited to a set size , which means he canvas doesn’t expand with the prototyping window.

In order to have a prototyping environment that behaves like a real browser or a device, it should have an option to resize the canvas and have auto layout do its thing and affect the canvas’ content.

Framer does this very well, and you can basically preview how your designs would behave under different container sizes.

Thanks for the feedback, @RaphG!

We’ll pass this along to the prototyping team for consideration.

Thank you @Lan_Van,
do you know, if this is possible for overlays, too? On my main artboard the bottom bar (fixed to bottom) is adaptive, but if I am opening an overlay with a bottom bar it doesn’t work.
Anyone an idea?

I know this has been asked in the past, so forgive me—but I couldn’t find any mention of this in the past few years—and it seems to be a super important feature. Is there a way to see responsive behavior in preview/prototype windows? (We can mimic it in our artboards in the editor, but not in sharable previews.)

Is there any way to achieve this now? We just need a way to share previews with folks to see how something behaves responsively, they shouldn’t need to go into the editor and resize an artboard (or scan across artboards) to see that. Shouldn’t there be a way to treat the preview like it’s… the website we’re designing?

Thanks!

Please search for existing topics before posting! Press 🔍 at the upper right to search.

It is a super important feature, even I don’t understand why the Figma team and most designers do not pay much attention to it. I don’t think there is a way to achieve this now in Figma, your best option sadly is to export your designs to another dedicated prototyping tool.

Please add the responsive prototype feature. Having a fixed size prototype makes this feature useless when we are designing for web/desktop and we want to show final result to client/devs.

This also goes with the possibility to add breakpoints.

Hey David! Thank you for your feedback. We can’t at this moment, but we’ll pass it along to our team for consideration.
I’ve also merged your feature request to a similar one: Adaptive/Responsive Preview , so we can track the overall interest under the same topic.

Hello!
I’m just starting my adventure with website design, and when I submitted first project to clients for testing, I encountered the problem of lack of responsiveness in prototype mode.
The existence of such a feature seemed so natural to me that I spent several days looking for a solution and being convinced that I was doing something wrong.
From a beginner’s perspective, the responsive prototype feature (with the ability to set breakpoints) seems to be one of the most important functionalities currently missing in Figma.

Hey Figma Team, do we have some visibility on this feature progression ? Is this in the backlog ? Already started ?

Thank you

I’m also wondering if there is any progress. It’s a highly recommended feature and very important to test responsive prototypes. When I work on different screen sizes I would like to see all in 100% but each element in it’s responsive size/position as I have it in the design editor/view.

Hi, just adding my vote for this request. We would really appriciate this feature. Because what is really the point setting up all the auto layouts to work as a responsive flex containers and than when trying to test with clients or checking how things would look like in real life via prototype preview or Figma mirror everything has fixed widths??

For example if I make a frame 1440px wide and I send it to client for preview he should be able to see it on his 1920px monitor the way that he would see it in browser when implemented (eg. increased white spaced, max-width on certain elements, wrapping elements etc.). Whats the point of scaling everything up to fill his screen if the result view is totally unrealistic? Thank you