Preview Prototype Hide Black Bar

It works, but the shortcut was made with an English/US keyboard in mind meaning that on my Danish keyboard the short cut is actually “CMD” + “.”. This might vary for other non-english keyboard layouts.

But still not a 100% working solution because for some use cases I/we still need to have the Flows sidebar visible to navigate, but using the above shortcut also hides that…

Hiding the UI doesn’t work because I need the sidebar to move between flows. This is a huge pain and can’t believe it was designed to overlay the design in the first place :triumph:

1 Like

Hiding the UI also doesn’t work when there is an interactive element in that area. As soon as the cursor approaches the area where the top bar is hidden, the top bar appears again, covering a portion of the design, including the interactive element the user was trying to move the cursor to! This is a straight up broken UX.

1 Like

Honestly, I can’t think of a single reason why the top bar needs to overlay the deisgn at all. It’s really painful.

4 Likes

Setting the prototype device size to custom 1920/1080 (as is my design) solves me a lot of troubles. The Figma UI still there but prototype fully visible. Then the CDM+ \ trick to hide the Figma UI and copying the link shown as ‘Copy sharing link’ at the bottom finally returns a link to a clean prototype with only a black border around.

This is so frustrating, why isn’t there a fix yet?

To get rid of the black bars on the side in preview:

If you’re using the desktop version just zoom in to fit with your browser settings. That’ll make it easier to compare to the website you are working on.

The “solution” did not hide the top black bar for me. The black bar is still obscuring the top maybe 200px of the design.

The solution that worked for me on mac was:
command . (period)

That hid the UI, but I had to hit it again in order to navigate through the flows, which is still frustrating. Please set the top bar to not overlap the design. :pray: