Prototype is unclickable once overlay is on

Instead of overlays and screen duplication, use interactive components.

1. If the overlay is positioned on top of clickable elements then it will prevent the elements from being clicked. So please check that the clickable elements are above the other elements.

2. You can also choose the option “Close when clicking outside” in the prototype settings so that overlay is closed when clicked outside and now the other elements will be clickable.

How do I position clickable elements so they are above the overlay?

Figma writes:

an overlay is an interface element which appears avobe the main application interface.

so u can’t position over an overlay.

in our usecase we have some header which should be clickable, the overlay was manually positioned, the spaces for the header where there. but unfortunately the header isn’t working.

any help would be appriciated

Hi, I am having the same issue. Were you able to figure it out?

Hi there @Grace_Pinkstone are you able to share a little more about what you’re trying to achieve. Overlays do in fact become the top-most element in a prototype which blocks all other elements from interactivity until the overlay is closed. You could potentially add the element directly to the overlay and have the interaction there but that may or may not be quite what you’re looking for.

Why is the overlay behaviour working like this? I can’t even think of a benefit of blocking the interaction underneath (main layer). What’s the workaround here?

The same here when overlay on (accordion element) all interaction from the page inactive!

yes! also having problems here trying to do overlay but not interactive components. but that’s the constraint on a free account. you will need to buy it so you can use interactive components unfortunately for now. i only have free account for now while learning. 

This is wrong. Interactive components are available on any plan, including the free one.

Please refer to the help article mentioned at the beginning of this thread.

Thank you! i just found it while i was trying to research. You have to make it a component then create a variation for it. then prototype it, instead of overlay use “change to”. THANK YOU for the correction!