While-hovering + On-click interactions don't work well together

Forum|Forum|5 years ago
March 10, 2021
24 replies
28258 views

This isn’t necessarily a bug, but definitely unexpected behavior.

So I have a simple button component, which changes to a hover state component while hovering - cool. Works perfectly.

The problem arrises when I want to use that button in my prototypes. If I add an on-click interaction to navigate to a different frame, for example, the click interaction doesn’t work. As soon as my mouse hovers over the component, it technically changes to the hover state one, which doesn’t have the click component on it. The on-click interaction would need to be added to the hover state component, which I can’t do because that isn’t being used in the actual design (it’s only accessed via the change-to while-hovering interaction).

Expected behavior: either (A) all interactions that I add to my component should remain, even after it “changes” to a different component, or (B) visually change a component to a different one, but don’t actually change it, so I can still add other interactions to it.

Or maybe there is a third, better option. Basically, my goal is to replicate normal button behavior: have a hovered state, and a click interaction, in the same component.

Hope this makes sense!

Components, variants and instances

Show previous replies

Vipin1

I had the same issue, but it seems to work for me now.
Not sure if it’s an update for Figma.

The interaction panel now shows the variant interaction as a separate section. See the attached screenshot.

Jeremy_Dennis

New Participant

You can do this with interactive components. I use this exact interaction you are describing all the time throughout my projects.

Here is how to do it:

Create the states, turn them into components, then combine those components into variants. After this is done, link the variants up via prototype to create your various interactive states. Then, when you place that button into a frame, you can select the button element and create a new prototype link on click to another frame. If you have already created an “on click” interaction for the button element, not to worry. Your interaction should still work. If for some reason you are still having problems, you can always delete the redundant on click action that was created at the component level (it should be the action with the “!” on it within your prototype setting when selecting the button).

I hope this helps!

Kaylee

YES!!! I’ve had the same problem, and it’s SOOOOOO annoying! I used to use Adobe XD and they recently made their components better, at least when it comes to hover states! In XD you can choose a hover state when creating a new variant and it will automatically prototype it for you. It also allows you to still add an “On Click” interaction from the main state (or any other state) that STILL WORKS even when you’re hovering over it! It is one of the best inventions in the world, and I’ve been waiting for Figma to implement this seemingly simple feature since I started using it! @Figma_Support PLEASE add this! It will save me so much time and energy!

Juan_David_Payan_Fernandez

To anyone having this issue. Use Mouse Down. It works.

Romain_Mascia1

Still having the very same issue here but I believe I’ve been able to isolate the problem…

It seems that adding interactions to nested instances of components of which the master already has some interactions breaks the prototype! This could be a “simple” interaction queue conflict that Figma should be able to address.

Can you all confirm that you’ve been using nested components?

Altair2

I solved the problem by setting “Smart Animate” for While Pressing… if you keep the as “Instant” this problem will continue

Altair2

While Hovering = Change To the hover state of your component using Instant animation

While pressing = Change To the press state of your component using Smart Animate (Ease Out Back)

Remember, you only have to click once to see the effect… no user will keep the mouse button pressed to see any effect 🙂

MATTELET_Bruno_DES_UUD

Heyy,

Just kinda have the same issue here.

I have a component Cards with 3 states, Default - Hover - Selected.
I have an interaction between Default and Hover while hover the card.

But when I added it to my Widget element, it’s breaking the whole prototype.
I want that the hover works but also that on clic i can switch my Widget variant.

It starts to work then it’s breaking all the time by attributing the default copy to the component Card.

I unfortunately can’t provide you a video…

This is the default screen

Then when I :hover

And now when I clic to change the component

I also realised that when I hover one component, I reset the right text with the number to the Default value …

🤷🤷🤷🤷

S

Sean30

I am having the same issue, and that’s with all the recommended workarounds and correct labeling and structures in place. At this point it is not caused by user error; it is caused by Figma bugs. I have components with other nested components within them, and oftentimes the component will simply break and stop working when trying to prototype it. It will work properly for a day or two but I’ll log back into Figma and it randomly just stops working. I have a particular component that has a button nested in a list item whose interaction expands the component into a mini menu. Sometimes it works, other times it just seems to “forget” its interaction, often leaving me with a component stuck “open” and no way to close it. I’ve verified over and over that I am not missing anything in my master component states, all layers are identical in structure and name.

Figma just seems to get confused when a component has more than a single interaction, and it’s slowing down my workflow immensely.

does Figma even read these forums? It feels like so many bugs are present and being reported and nothing ever gets done to fix them.