Skip to main content

Adaptive/Responsive Preview

  • January 26, 2021
  • 30 replies
  • 10564 views

Show first post

30 replies

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 🙏🏼


Jonathan_METZ
  • New Participant
  • April 18, 2024

+1

Needs !



Peter_Uithoven

Jonas1
  • New Participant
  • July 30, 2024

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.