How can avoid hit interaction under a layer in prototype mode

Share an idea
1

Hi everyone,

When I created dropdown in prototype, I sometimes hit an interaction under the dropdown instead of interacting with the dropdown. Does Figma know this behavior to make prototype mode better ?

1 Like
2

To prevent interactions with elements beneath a dropdown in Figma’s prototype mode, here are a few techniques you can try:

  1. Use a Transparent Overlay:
  • Create a transparent shape (a rectangle, for instance) that covers the area under your dropdown.
  • Place it beneath the dropdown but above other elements to block any interactions with items below.
  • Set the overlay’s opacity to 0% so it’s invisible but still clickable, preventing clicks from passing through to elements beneath.
  1. Use “Close on Click Outside” for Dropdowns:
  • If your dropdown can close when clicking outside, add an interaction to close the dropdown when clicking on the transparent overlay or outside area. This allows interactions with the dropdown only while it’s open.
  1. Disable Interactions Temporarily:
  • For specific prototypes, consider creating a separate frame without interactions under the dropdown if the dropdown is complex and requires exclusive focus.

Figma currently doesn’t have an automatic “click-blocking” feature for prototype mode, so using these workarounds can help manage focus and interaction better.