Adaptive/Responsive Preview

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

Hey guys,

im new to Figma and I am currently playing around with the auto layout features.
In the Project window where I do all the design and prototyping everything changes how I wanted to (The header expands itself when the window gets bigger for example).
I am designing on a 1440px screen width and I wanted to preview the screen on a MacBook Pro 14" Device (1512px width). Is it possible to change any settings that my screen scales to the width of the selected device?
I searched in the community and on google to get an answer to that but couldnt find anything 😦

Many thank 🙏🏼

+1

Needs !

Please check this https://www.figma.com/community/plugin/1363571066131304729/breakpoints.

This is now possible: Figma product news & release notes

I have recently tried to use the Preview window for quick prototyping tasks.

Since I usually work with very tall frames, especially for mobile websites, the preview window’s height becomes too tall and therefore doesn’t give me the proper experience of a mobile phone or a normal-sized browser window.

Right now, I can only resize the preview window by manually dragging its upper edge. For tall pages, it’s a hassle to resize the window height that way.

The Preview window has a couple of options to work with such as Fit Width, Responsive, Resize window to 100%, and Reset Aspect Ratio. None of those options really help me I’m afraid. I also know that I can use one of the Prototype Devices but that becomes a problem if I mix mobile, tablet and desktop frames on the same Figma Page.

I want to be able to quickly adjust the height of a preview window. For example by resizing the window either by width only or fit to the height of the screen or by being able to set a height manually via a form field.