"Fill - Scale down/up" Not Showing in Preview Options

As of just last week, I notice there is no longer the following options in the preview for:

  • Fill - Scale down or up to fill
  • Width - Scale down to fit width

I used to be able to fill my designs to the entire width of the screen, but now it doesn’t do this, and there is just a large black border around the design screen in display. I’ve tried varying the widths of my frames, but it still does not fill in preview.

The “Fill Screen” option that exists now doesn’t work as expected. I was expecting a cover-the-page as it used to.

These options I’m looking for are seen in the Figma support docs, but it’s not reflective of the current options. I’ve read this issue in other threads from years back, but I cannot find a solution to this. Not having an accurate edge-to-edge preview makes the presentation mode rather weak and challenging to present. Is this a known issue with a solution? I appreciate any help on this.

2 Likes

In your device settings in Figma, what setting do you have your screen at? Does trying the “Presentation - Fill” device setting help?

image

Hi @ntfromchicago,

@Maria_Gosur is right, this feature doesn’t work any more, it’s clearly broken.

My designs are 1440px wide and my MacBook 16" is 3072px wide (1536px 2x). Prototype is set to “Presentation (Fill)” but none of the 4 options scale the design UP to fill width, they all scale it down or leave it with black bars. And I’ve tried “None” and “Custom” mode as well, same. I even tried to modify the URL code by hand without luck.

This is how the presentation modes looked like until recently, and the Fill - Scale down or up to fill always worked for me:
image

I’ve surely read through every single discussion that Google ever found on this topic (barely exaggerated :wink: ) and all either talk about the old “Fill - Scale down or up” mode or come to no working solution.

Figma THIS IS A SERIOUS BUG AND SHOW STOPPER … showing designs on the TV in the conference room or sending it to clients that might have large displays will result in a thin stripe with black bars.

The only solution I’ve found is to upscale all my art boards by hand, which even with the scale tool is very time consuming because components won’t scale correctly and have to get adjusted one by one. But this is urgent.

If anyone knows a real solution for this issue please come forward, I’ll reward you with the biggest digital hug the internet has ever seen!

Cheers, Chris

1 Like

Ah Chris, thanks for the detail. I see that Figma no longer supports this scaling option and has removed it from the list. I don’t have a real solution, but I have a temporary workaround.

Switch the user agent to iPhone. If using the desktop app, select Toggle Developer Tools in the Help menu and change the user agent like you would if using Chrome. Do this after loading the prototype, update the user agent for that tab, then refresh to see the change.

This is far from an ideal solution (and probably not officially supported in any way), but at least you won’t have to manually rescale every single screen. Hope this helps.

2 Likes

Thank you Nelson,

your workaround indeed worked (around) and will help with live screen presentations! Unfortunately it won’t be able to address my specific issue that I currently face, which is sending my Figma Portfolio to prospective clients and employers, who would be either puzzled with the instructions or simply to uninvested to put up the effort.

Nevertheless, you’ll get a little big hug:

Hug

1 Like

Hi Nelson, can you please elaborate a bit more on these instructions? I don’t see a “Toggle Developer Tools” in the Help menu. Are you referencing the user agent that comes from Chrome Inspector or something within Figma itself?

When using the desktop Figma app, open your prototype in a tab. Then in the Mac menu bar, go to Help > Troubleshooting > Toggle Developer Tools which should pop open a panel identical to the Chrome developer console.

Then click on the three dots in the upper right of this panel and go to More Tools > Network Conditions. Then scroll down, turn off the browser default and switch the User agent to Safari – iPhone iOS (see screen shot) and then reload the tab (Command-R on Mac).

After reloading the tab, your prototype should now fill the full width of the screen. This is a pretty technical workaround, so I would only use as a last resort for presenting.

1 Like

Hey. I had the same problem recently and found this thread while seeking answers. I managed to solve the problem in my case.

On the right sidebar of the editing window, I clicked on ‘Prototype > Device’ and noticed that my width was less than my canvas width. In my case, my canvas had a width of 1440, but the prototype device’s width was set to 1381 for some reason. So I just had to change it to 1440.

Hope this helps other people.
Captura de Tela 2023-07-09 às 00.53.02