How to trigger an overlay from a varient in a component?

Interactive Components Questions
#1

Hi there - still a beginner at Figma so apologies if I’m missing an obvious answer here but couldn’t find it from reading docs and searching the forums.

I have a component with 3 varient states

  1. default - just a picture of a household object (a microwave in this case)
  2. hover (on hover) - picture is highlighted with a stroke
  3. selected (on click) - picture gets a different colour highlight, and a separate object appears with some info and a button to ‘add to challenge’.

I want to trigger a separate overlay from that button object (that is only visible on the selected state). The separate overlay I want to open is an counter, to show as a micro-interaction that you have added the component to a list. I have the component on a separate local components page, and then I’m trying to include it in a frame with other static UX elements on a different page.

The last overlay interaction doesn’t work. Have also tried moving the whole component and the overlay into the same page, but then the varients don’t work :grinning:

Screenshot attached of the component and the interaction on the separate page which hopefully helps make things clearer!

varient_overlay_screenshot
varient_overlay_screenshot1200×806 32 KB

#2

Have also done a short video of the prototype to give more context - it is a mobile AR app I’m prototyping, and trying to show a user flow where a user can ‘scan’ an object at home, click on it to get more info on its carbon and energy impact, then click on the ‘add to challenge’ button to add it a list of tracked household objects. As you can see on the video, the varient state changes work, but the overlay doesn’t open when you click on the ‘add to challenge’ button.

Not sure if this too complex an interaction to try and prototype in Figma, and if I’d be better of using a different prototyping tool that is focused on AR, like Adobe Aero? Other suggestions welcome!

Cheers
Joe

#3

If it helps others, the way I got this to work (maybe not the best solution I’m sure) was to detach the object with the ‘add to challenge’ button from the selected variant, and turn that into a frame so it could be used as an overlay.

I could then trigger two show overlay transitions in sequence - the first to show the text box with the add to challenge button, and then when clicking on that button to increment the counter.