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.