Adaptive/Responsive Preview

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.