Figma Support Forum

Why do click interactions knock out all other interactions in a frame / prototype?

Our team is new to Figma (watching videos, reading instructions, playing extensively) and we are stumped as to why it appears Figma only supports 1 click interaction within a frame?

I’ve created a video (2 mins) that outlines what we are trying to do:

Outline of steps and issues:

  • Typically, we create a unique frame (screen) for each click interaction i.e. on click navigate to X frame
  • Though we do have a dropdown settings menu with radio buttons that we would like users in the prototype to be able explore hover states, make multiple click selections before closing the dropdown. It’s not feasible to create unique frames for all of these variants
  • In the Figma prototype, once the user clicks a selection, all other click triggers on page become ‘stuck’ and we have to Press R to return to the prototype default state
  • This is also occurring on our ‘Search’ page of the user clicks the ‘Search’ button

We have signed up for the interaction beta (hopefully we get access soon) as it makes sense to us that we should be able to define interactions for component variants rather than having to create interaction states as top level frames.

We are considering a team move to Figma from Sketch and Axure, but we are a bit put off by the interaction limitations at this point (though again, this may be down to us not knowing the Figma trick to this yet!).

Really appreciate your time and help, thanks all.

Are you using Interactive Components Beta for hover states or button-sized Overlays?

Hey Gleb, We have requested access to the interactive components beta, so I don’t think we have this yet? (I assume this beta is what allows us to define interactions for component variants). Until then, we’ve used created button sized overlays for hover and click states (as shown the the vid when I talk to what we are trying to do in settings dropdown with radio button options).

Got it! The problem is, if you haven’t noticed, that the overlay with the button stays open without the ability to close it, and this prevents interactions with other elements. One way to fix this would be to use Swap Overlay instead of Open Overlay when opening the overlay of this button. The other way is to use Mouse Leave event to close the overlay and mouse enter to open it, instead of while hovering to just open it.

1 Like