Skip to main content
eokic-hexis
May 5, 2021

Figma prototype UI obscuring fixed website header

  • May 5, 2021
  • 162 replies
  • 17246 views
  1. Describe the problem your experiencing and how your idea helps solve this
    Screenshot and sample file below. I’m using an iMac sized frame with extended height. This issue is exacerbated by the fact that this is the now the default view when using multiple flow starting points and is the only way to actually change the flow starting point. So you have a constant trade-off of whether you want to see the Figma controls or your prototype’s. Annoying as hell.

EDIT: When sidebar is hidden, the fixed header is visible but inaccessible. As soon as the cursor hovers near it, the Figma UI appears over the (clickable) website header. Wow…

  1. Add as much context as possible (screenshots, Figma files, mockups, etc.)
    https://www.figma.com/file/WlYbWyHwtBGEFZihdMt2az/Bug-Obscured-fixed-header?node-id=0%3A1

162 replies

Sam3
May 5, 2021

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?

Gleb
Power Member
May 5, 2021

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.

Sam3
May 11, 2021

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

Gleb
Power Member
May 11, 2021

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).

robin_figma
New Participant
May 27, 2021

When previewing a prototype (in the native app) you can hide the Figma UI but it still shows a black bar at the top with the tabs on the left and the company name in the top right corner. There should be a way to hide the black bar at the top. I don’t want to have to go the web interface in order to do this. And going full screen does not get rid of this either. The prototype should be able to go full screen without seeing any of the Figma interface.

Thomas_Techert
July 8, 2021

I totally agree.
Nowadays all of my students are presenting in Figma instead of using Keynote or ppt.
Always having the black menu bar on top with document names like “presentation” or “final test test”…
It’s really unprofessional in my opinion and there must be a solution for this.

PS: Using the browser to use this “killer feature” is not a solution.

Gregory_Warner
August 9, 2021

I have a very similar issue that evidenced itself as quite a problem in client presentations last week. I normally keep the UI off at all times in a presentation, but with the introduction of flows I found it very useful to have the client view the flows list after finishing one flow to proceed to the next.

However the only way to access the flow list is turning on the full UI. I need my client to review the designs at 100% size, but this caused the header to be overlapped by the top bar and centered footer buttons are impossible to click with the screen index controls that appear on hover. Ideally, 100% files would start under the top bar and stop just above the index controls so we could keep the UI up and just hide the flows sidebar.

Justin_van_Oel
August 12, 2021

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?

Sam3
August 12, 2021

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.

Antony_Smith
New Participant
August 19, 2021

The UI at the top obscuring the visual is incredibly annoying and unnecessary. It just needs fixing there with an option to show/hide.