Prevent interaction hotspots from triggering below fixed elements

I came across the same issue. Looks like it is a bug.
Workaround: Select your scrolling area frame and enable Clip content. Worked for me.
But obviously, the mere fact that your content layer is already under your keyboard layer should auto-clip in my opinion…

I also came across the same issue while creating a navigation bar on top of a scrollable list of items!

Clipping content doesn’t seem to work for me? I managed to work around it by expanding all the navigation items to fill up the entire nav bar, so that there is no way to click on any “gaps” and accidentally reach the background items.

Definitely looks like a bug worth addressing soon!

I am working on a web site prototype which we are allowing users to evaluate. Figma does not mimic normal browser behavior which will cause confusion during testing. Links on the page content area are still clickable even if the sub-menu overlays them. In the prototype link below, mouse-over the “Find Data” item… the links in the left menu are still clickable even though the menu is covering them.

Is this a bug? Shouldn’t links that are below a layer NOT be clickable?

When a button or link has other layers on top of it, essentially hiding it from view, any on-click interactions assigned to it still work. It seems like Figma will bubble down the layers and trigger the interaction, even though the button is not visible.

Is there any way to prevent interactions from triggering, if the button/link is covered by another layer? Basically, the same way it works in real-world web design, where a link wont work if it has another element on top of it.

How do you have it such that interactive components are not clickable when there is something else on top/in front of them? ie in a mobile slide out menu i can still interact with components from the blurred out home page

Seeing this issue too. Workaround not fixing it for me.

Okay, I think I figured this out, after hours of trying.

First of all, you have to make sure you have Overflow Scrolling and Clip Content turned OFF on your master frame.

Then, all of your scrollable content should be in a nested frame with Overflow Scrolling and Clip Content turned on.

Last, it seemed kind of hit or miss for me as I was making these changes, but I think closing out my project and reopening once all was said and done seemed to help. I think Figma needed a hard refresh to recognize these changes.

At least, it’s working for me now! fingers crossed

Hope that helps.

Seeing this issue across all my prototypes too… Unfortunately the clipping trick above didn’t work. An update on this would be awesome.

Yes I’m having this issue as well. It’s a pretty basic function, having a fixed nav over a list of items that are clickable. I’ve created boxes in the nav to ensure there’s no clickable space, but still. This is quite annoying.

Still seeing this bug. Anything that is clickable that gets scrolled underneath the fixed content (the top nav) is STILL clickable through the top nav. Extremely annoying.

Yes this is soooo annoying! Unacceptable for a state of the art tool like Figma!

It’s October and I’m having this issue as well. Clipping trick does not work for me either. This kind of needs to be fixed, badly. Has anyone found any other solutions?

This bug is still persisting. None of the methods listed above worked for me at all, unfortunately.

Same problem

I Have this same problem, very annoying

did you manage to solve it?

same problem, I have a fixed nav bar and users can always click through whatever is underneath, so annoying!!

Yes same problem with a FIXED or absolute positioned element seeming like its on a lower z-index than the scrolling (SCROLLS) item behind (below) it.

Related topic: Prototype link interaction NOT mimic normal browser behavior.

To get a button to not register under my header or bottom-nav element, I had to avoid using any fixed elements overlaying my scrollable content.

I put all my scrollable content within a clipped frame and turned on vertical scrolling. I then put that frame in between my header and bottom-nav.

Do we have any fix for this? This issue is so annoying, I miss Adobe XD for simple things.

How is this still a thing…

This is a smart workaround, but this definitely shouldn’t have to be done just to have a fixed menu… And it doesn’t work if you want to have transparency in your menu.

I keep experiencing the same problem.

Still looking for a fix to this too. Not sure how this hasn’t been patched yet.