Figma prototype UI obscuring fixed website header

With one of the latest Figma releases the top navigation overlaps the presentation screen. As the navigation is fixed top to the viewport, users can’t access navigation hotspots.

What I am looking for is to be able to share with team or clients a UX wireframe in presentation mode so they can access all hotspots on the screen - at anytime.

Any ideas?

4 Likes

You can hide the UI in the prototype options (dropdown on the top right). If you share the link after that, the UI will be hidden for viewers as well.

3 Likes

Thanks @Gleb - makes sense. Though once I share the prototype with the UI hidden viewers can’t bring the UI back therefore they can’t comment on it.

So I am left with 2 options if I am correct:
a. I share the prototype with the UI top navbar overlapping the main navigation and viewers can comment but not browse; or
b. I can share the prototype with viewers with the UI hidden but they can’t comment

Do you believe a resolution to this could be brought forward as a valuable UX improvement to the tool?

Thanks

3 Likes

The toolbar can be shown with Cmd/Ctrl + \ — this tooltip is shown at the bottom of the screen when opening a prototype with hidden UI. That can definitely be improved though. I think the simplest improvement would be to make the toolbar not overflow the content (this doesn’t make much sense anyway).

5 Likes

Couldn’t find my answer on the forum so though to post a question myself. The top of the design in prototype is cut off. The Figma info bar is laying on top of the page. Since no one is asking this question I think I am doing something wrong here?

1 Like

Hey @Justin_van_Oel ,
yeah I find that counterintuitive as well. How this works is you have to hide the Figma UI prior sharing. You can use Cmd/Ctrl + \ or go under Options > Show Figma UI (uncheck/hide)
After you got it hidden - use the share link.
Try that should work.

Bumping this up - ideally I’d still like viewers to see the sidebar with the flow starting point links, and the top bar overlaying the content doesn’t seem logical.

Cmd+\ also doesn’t work in all cases as some third party software uses this shortcut as well.

1 Like
  1. Figma’s UI header shows up and covers my prototype’s header. I know that there is Hide UI function, but people who watch me prototype don’t. They struggle to click on my header and cannot.

  2. I suggest shifting Figma’s panel above the prototype. Without overlay. I believe it will solve the problem. Thank you.

10 Likes

Hi @Maria_Berezneva :slight_smile:
I was dealing with the same issue for a while, but I eventually realized that you can hide/show it by pressing Command+. just like the panels in the work space.
Hope this help :v:

1 Like

This looks like a bug. In a preview mode, I’m trying to preview my work - so why would they cover it up with their UI - it makes no sense. Currently it is not even semi-transparent, it’s solid black.

Grrrr.

3 Likes

This may have to do with the display settings. If you change it from 100% to fit or fill it should help in stopping the UI from covering up the frame.

Changing the display settings doesn’t change the issue really. It would just shrink the view of the frame, but now it’s out of scale and too small and is more confusing in some ways. I think this goes to show some glaring issues with some basic functionality around prototyping for Figma. I love Figma but the fact there isn’t some parity with features InVision had had for years like pages being scrollable, choosing an area that can be sticky to control what scrolls, and things like that is kind of surprising.

Hi @Phil_Schroeder - I am just chiming in here. When you say “pages being scrollable, choosing an area that can be sticky to control what scrolls” - I believe those functionalities are covered. You can definitely set objects as “Fix Positioned” in the application which would then reflect as “sticky” in the prototype. I believe the current best resolution to this problem here is to use Cmd/Ctrl + \ to hide the Figma UI in prototyping mode. If you share that link the users will exactly see the same - the prototype without the Figma top navigation. However, as mentioned earlier, in my opinion this does not completely solve the issue as you will have to explain your users how to toggle the navigation back in if you want them to access the toolbar to accessing features like commenting. So, this is a usability issue. I should not need to be put in a position to explain my users on how all this works - it’s over-complicated - so there is an underlying issue with the current solution.

This is obviously a bug and it’s crazy it hasn’t been addressed sooner. It never used to behave this way, you shouldn’t have to close part of the UI to see the top of your design when viewing at 100%. Please @Figma can we get some support here.

6 Likes

This is a bug that needs to be fixed.

3 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

This was actually already reported as a bug, and a Community Manager (incorrectly) responded that resizing the display should fix it (it does not), and the bug report was closed without being fixed.

I had to explain to my client how to close the UI so they could play through the prototype. Luckily they were tech savvy.

Yes, you can hide the Figma UI and then copy the link to share, but then the client can’t see the side menu.

5 Likes

I have the same issue. The prototype UI shouldn’t obscure parts of the design, especially when the design has clickable hotspots on it.

5 Likes

This is indeed quite unfortunate. It would make more sense that the figma ui doesn’t overflow on the screens especially since 90% of designs have a top bar navigation that then becomes inaccessible.
And i know you can hide the ui
BUT :point_up:
The sidebar is a very nice feature to show multiple flows to clients as well so it’s useful to keep it visible when sharing a prototype.
Following people around in prototype mode is also very useful during demo time, so being able to view the sidebar & the top bar & the full design would be ideal

Hopefully Figma can fix that soon :pray:

4 Likes