Skip to main content
Question

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

Joe_McFadden

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 😀

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

varient_overlay_screenshot

This topic has been closed for replies.

3 replies

Joe_McFadden

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

1 Attachments
Joe_McFadden

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.

Tammy_Tsadok
Gregory_Skvortsov
2 people like this
  • Tammy_Tsadok
    Tammy_Tsadok
  • Gregory_Skvortsov
    Gregory_Skvortsov
A
  • Anonymous
  • 0 replies
  • July 10, 2022

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings