How do I resize the design to fit into the prototype?


Hello! I am wondering how can I make the design fit onto the devices in prototype mode? As you can see in my screenshot, the design is oversized for the device in prototype mode. Could I change this to make the design fit better?

Hi @Leif_Shantz,

Figma do not offer option to magically resize design according to viewport. You have to manage this on your own. Several thing can help you tho : take a look at :

  • Auto-layout that will help you adjust content based on parent’s height/width
  • max-width, min-width, max-height, min-height can also help you in auto-layout grid to reorganize your view according to children width/height
  • Local variables with modes can help you define sizes for specific viewport

  • Plugins I don’t know any nor have I used some but they might be one working, idk

let me know if it helped

If use autolayout you can set components to fill available width and give them max-width.
You can also give them minimum-width and layout to flow like text. With those your prototype can adapt to any width without anything getting excessively wide.

Hi!
I tried auto-layout and it seemed to not work for my purposes. I will try the next suggestion: (local variables). However, I find it too overwhelming and unsure how to do the local variable. Thank you for your help.