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

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!

18 Likes

I’ve ran into the same problem and agree that this workflow needs some more attention.

I found a somewhat hacky workaround which might be helpful for you in the meantime.

I added a third button state, active, and styled this the same as hover. The default is wired to hover state as in your example. I then added a click interaction from the hover to active state, and a change after delay from active back to default.

If you now add an on-click interaction on top of the variant defaults in your prototypes, the navigation will work as expected on hover.

This workaround falls apart if you need a genuine active state styled separately to hover, as once you add the navigation this will take priority and not display the active state.

Hope this helps!

4 Likes

Isn’t normal button behaviour exactly that? You hover on a button, it changes to its hover state, then you click from that state to then navigate to another frame. Which you can achieve with Interactive components.

Maybe i’m not understanding that you can’t access the hover state in your design?

I think I understand your point but tested this really quick and it works. even if I have the button component on a separate page with the on-hover behavior, I can still add the on-click to take me to another page. So it should work.

If not, one thing you can do is to swap the state of the button to hover, and from there to create the link to where you need it, but it should work by default, because the button is under a variance component type, so I don’t think that the on-hover state should have the link, because the button appears as one in the asset tab, even there are multiple variances.

Generally it works fine, but sometimes i have the same problem and i have no idea where does this bug come from.

Think I’m having the same trouble. My interface poses a question with 4 possible answers and the user has to select on one as their answer, which then advances to the next question (a “tap and go” interaction model; ignore the merit of this approach for now).

The answer buttons have a hover state and a click (or mouse down) state to render as selected before moving on. These work fine as hover and click variants, but when I add the click (or mouse up) action to navigate it doesn’t work. Only 2 of the interactions will ever work. If I remove the hover, the button becomes active and advances to the next screen just fine. If we have just the hover and selected state it works fine but doesn’t advance to next question.

Have only just started with interactive components but can’t seem to work this one out.

Appreciate any advice! Interactive components are incredible.

@Sam_Weller, I think that this bunch will suit you: While Hovering + While Pressing + On Click.

1 Like
  1. When a wire together a button that ‘Changes To’ a the button with a hover state, the click interaction has to be on the hover state button, not the original button. This is confusing to me and cumbersome as all of the original logic of click interactions I now have to transfer to the hover state

I’ve been going pretty deep on interactive components and the way that it’s handling different states by “change to” is very archaic.

In XD, you can assign a number of triggable states on a single element. Which means, you can change the look of the button on “hover” without changing the actual element. This lets you use that element as a trigger to do other things.

The issue with “Change to” logic becomes really apparent when you assign an interaction on your master component, then duplicate it on your actual design.

2 Likes

I’m experiencing the same bug as a result of a button component changing to Hover then Pressed. My ‘on click’ navigation interaction is not navigating. Is there a fix for this yet? Should I just remove the ‘pressed’ state?

@Alf_Salib and everyone, @Remus_Baltariu is correct… you need to create variants of your default/hover state buttons first, connecting the hover interaction INSIDE the component set, then place an instance (of that default button state) in your design and add On Click interaction to that button instance. Here’s a breakdown:

  1. Create multiple button components (default, hover, etc.)
  2. Combine components as variants
  3. Prototype - drag arrow from default variant to hover variant - select While hovering - Change to - and select whatever you’ve named the hover state*
    *Name is dependent on your layer/variant naming
    Watch Figma Tutorial: Variants on YouTube for in depth explanation.

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.

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!

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!

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

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?