Figma prototype UI obscuring fixed website header

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

That works great as e temporary fix but is a bad workaround.

Figma please fix this bug! :slight_smile: Thanx!!

1 Like

YES! This is super annoying if you want to show the multiple flows to a client or in a user testing session. Why would the top bar obscure the design at all… please fix!!

2 Likes

Still an issue. Can we please fix this soon. Pretty much messes up every prototype that has top header nav which has to be a lot right?

2 Likes

Commenting to bump this. Figma please fix this

Please for the love of god fix this

2 Likes

Commenting to bump this issue. Please prioritise fixing this.

I can’t fathom any benefits to having the prototype UI overlap the viewport content, so this feels like either a bug or a design misstep.

Changing the zoom level is not really a reasonable solution in shareable prototypes.

2 Likes

Please fix this!

1 Like

Also bumping this. Tired of this being an issue that I have to talk clients through every time I send a prototype.

3 Likes

When presenting a webpage prototype, the Figma UI is over the page header. This makes it impossible to interact with the header without turning off the Figma UI. If you enable the side bar the header is completely covered. Moving the pointer trying to click on a menu in the head of prototype the Figma UI appears.

The only workaround is to hide the UI. This makes it hard to share a link with clients and expect them to understand they have to hide the UI or sending a link with it turned off.

Is it possible to have the main bar or the Figma UI above the prototype at all times?


3 Likes

I am also frustrated by this. I want the client to click through several different prototype flows and navigate using the top navbar in my design. To do this I will have to explain to them how to show/hide the UI using keyboard commands in between each flow. This is very clunky and intrusive to the testing experience. The design shouldn’t be covered by the Figma UI.

2 Likes

Right now, in ‘Present mode’ (prototype mode), the top panel UI overlays the presented content so it cuts it off:

It’s not possible to see what’s beneath, only by toggling hiding the UI, which isn’t always ideal as it’s not intuitive (for example, if I need to quickly switch between flows).

A possible solution could be nudging the presented content below the panel, instead of overlapping it.

Please upvote this if you experience this and find it frustrating too :sweat_smile:

8 Likes

+1 for this, it’s not client friendly at all!

5 Likes

Bumping this post up as well, as this is something that I have to create a workaround in every design by making a empty space in the top of the artboard which is stupid.

Instead why not just with un-hidden UI lower the design by the pixels of the UI and when Figma UI is enabled push it back up again. It’s not that hard to fix it.

+1 Prototypes are mostly for others, not me. This is a really bad issue for me. I often am not sure where the shared link will end up so I cannot explain how to work around this to anyone that lands in a prototype.

My hack: Create a 64px black (or brand/instructional) banner at the top of your frames and make every page in the prototype the exact same height since Figma aligns pages to the middle of the browser window instead of to the top.

Disappointed to see that this issue was brought up back in July 2021, and hasn’t been resolved. Maybe in our lifetime.

In the meantime, I moved all of the page content down enough to clear the Figma UI area. Then added a black bar going across and check the “Fix position when scrolling” option.

That seem to work for now.

2 Likes