Variants and overlays

Ask the community
1

I am having an issue with Variants, interactive components and overlays. Here’s the issue:

I have created a component and have three variants (this is a button for a multi step form:
1=Standard state
2=Hover state
3=Clicked state

This works fine with interactive components set to ‘change to’ the different states depending on mouse enter, click, mouse leave etc. This saves so much time and works great!

However, when I add this to a page on my file it works fine, until I use the compnent to open an overlay when clicked. The overlay opens but the variant does not change to the clicked state when they overlay opens as it does when no overlay is activated, it stays in the hover state. I think it is because when the component is clicked to open the overlay it is over riding the variant ‘change to’ when clicked.

Is there a way to fix this issue im having? Or am i being a dumbass?

Thanks muchly

2 Likes
2

Your intuition is correct that the interaction to opening the overlay is overriding the original interaction in your component. The only way to get both interactions to occur is changing the interaction for one of them. Usually, people will use “on press” to get a button to change to a pressed state and use “on tap” to trigger another transition.

3

@Ana_Boyer Thanks for the response. I just cant seem to get it to work. Here is a link to the problem. Any chance you could take a look? :wink:

Any help would be appreciated.

4

Just took a look at the file! There’s two things happening here that are preventing you from achieving the interaction you want:

  1. Figma can’t process multiple changes from the same interaction. Leading up to making the overlay button appear, everything looks fine, but then clicking on the card again both triggers the overlay to close (due to selecting “close when clicking outside” AND the card to unselect.

  2. You can’t interact with layers behind an overlay until it’s closed. I tried unselecting the “close when clicking outside” checkbox to see what happens if there’s only one interaction associated with clicking the card again. However, I realized the Figma hotspot was only appearing above the button, meaning I couldn’t interact with the interactive card component until the button disappeared.

Unfortunately, it looks like you’ll have to have clicking on the card transition to another frame with the button rather than bringing the button in as an overlay.

1 Like
5

Thank you Ana, so i will need to put the buttons in a frame to make this work? If theyre in a frame it should solve my issue?

Thank you so much for taking a look :grinning:

6

You will need to have one frame with the card and then when you click the card, have it transition to another frame identical to it with the exception that the button is there as well. No problem! I’m happy to help :blush:

7

Go figure, thats gona take a while, oh well. It wil work though so at least i can get it doing what i want it to do, thanks again :grinning:

1 Like
8

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