Skip to main content
Solved

Frames are not showing full width on prototype


Emmy

img 1: shows the frame at full width

img2: shows the prototype but not the full width of frame


Best answer by Nate_G

@Emmy On the prototype options panel, try setting it to “Fit width” to see if that helps. But that will not make your design fill your browser screen until you start scaling down your browser width to be the same or less than your design’s frame width in Figma.

View original

18 replies

Nate_G
  • Power Member
  • 178 replies
  • Answer
  • October 5, 2023

@Emmy On the prototype options panel, try setting it to “Fit width” to see if that helps. But that will not make your design fill your browser screen until you start scaling down your browser width to be the same or less than your design’s frame width in Figma.


  • 4 replies
  • October 6, 2023

Hello, I have the same problem; however, it’s the opposite. I created a visual, and when I export it to HTML for my developer colleague, it doesn’t fit 100%. He has a scroll bar that appears. We made sure that his browser is smaller than my design’s frame.

Also @Nate_G I can’t find “options > fit width” as you screen

Thank you in advance for your help.
Snipaste_2023-10-06_09-38-31


Nate_G
  • Power Member
  • 178 replies
  • October 6, 2023

The prototype Options panel is available when you are in “Present” mode.


  • 4 replies
  • October 12, 2023

Thank you for the indication. However I don’t have the same option than you. What can I do ?


Nate_G
  • Power Member
  • 178 replies
  • October 13, 2023

Click on the Options dropdown to get access to your prototype view settings, and set it to “fit width” to see if that helps.


  • 4 replies
  • October 16, 2023

Sorry I sent the wrong screenshot. As you can see, I don’t have the “fit width” option
Snipaste_2023-10-16_09-08-41


Nate_G
  • Power Member
  • 178 replies
  • October 16, 2023

@ev_tvt Ah ok, correct you can’t get access to that option if you are displaying your prototype on a device, but if you set your device to “None” then the “Fit width” option will appear during prototype mode. But not sure this will fix your original issue.


  • 4 replies
  • November 7, 2023

Hello, it worked, thank you !


Bright_Baiden

I am having the same problem, I have tried fit width and everything I have come across but anytime I go to preview mode or present, it does not fill the entire screen. I have tried everything


y_toku
Figmate
  • Community Support
  • 2317 replies
  • February 9, 2024

Hi there,

Thanks for the post. Could you double check the scale section in this article? If it doesn’t solve the issue, would you be able to share the screenshots you’re seeing?

Thanks,
Toku


Bright_Baiden

I have tried it all but still nothing. okay will send some screenshsots. what exactly do you want to see so I screenshot it and send it. screenshot when i go into preview mode?


y_toku
Figmate
  • Community Support
  • 2317 replies
  • February 13, 2024

Thank you. Screenshots for the preview and present would be helpful.


Bright_Baiden



y_toku
Figmate
  • Community Support
  • 2317 replies
  • February 14, 2024

@Bright_Baiden Thanks for your screenshots! As I checked them, it looks no problem. Could you reach out directly to the support team with a copy of your file: https://help.figma.com/hc/en-us/requests/new. They will give you further support. My apology that I can’t help much here.

Please make sure you use the email associated with your Figma account, include links to the file in question, and share access with support-share@figma.com. Don’t worry, inviting us to view your file won’t impact your billing.

Thanks,
Toku


KennLucas
  • 220 replies
  • May 2, 2024

Love that you posted this fix! It was a headache trying to get fit width back. Thank you.

However…this just proves how problematic Figma’s lack of understanding UX is! Why can I not demo to a client with the device frame where my prototype fills the device frame?

To me this is a huge fail. Thanks Figma.


this option was available on device recently not available again in seems


Anita Carroll

Does anyone know where these options are in the new Figma layout?


tomhoodjs
  • New Participant
  • 5 replies
  • February 6, 2025

Ah, the classic "my frames aren't filling the screen" problem in your prototype!  That's a common one.  It usually boils down to a few things.  First, double-check your constraints or auto-layout settings.  If you're using something like Figma or Sketch, make sure your frames are set to "stretch" or "fill" the available width.  Sometimes they're anchored to specific sides or have fixed widths, which can cause them to look wonky on different screen sizes.  Another thing to look at is the parent container.  If the parent frame isn't filling the screen, then its children won't be able to either.  So, make sure the whole hierarchy of frames is set up correctly.  Sometimes there's a rogue element somewhere that's messing things up, too.  It's worth zooming out and checking for any hidden layers or misplaced objects that might be influencing the layout.  And finally, if you're working with code, check your CSS.  Make sure you're using the correct width properties (like width: 100% or flex: 1) and that there are no conflicting styles. It's a bit of a detective game sometimes, but usually one of these things is the culprit.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings