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.
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. 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.
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’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.
I 've got to know how to fix this. You just need to do 2 things:
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”
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.
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.
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.
at the upper right to search.