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

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!

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. 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.

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?

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

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 🙂

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 …

🤷🤷🤷🤷

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.

Same problem again

[quote=“Sean30, post:20, topic:1570”]
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.

Solved and described the solution here. 🫣
The best workaround is to wrap the interactive component at the point of use in an extra frame and instead of attaching the on click interaction directly to the component, attaching it to the extra frame.

Steps to apply the fix:

1. Create a master component with at least 3 states:
   a. Regular
   b. Hovered
   c. Selected
2. Link the “Regular” state with “Hovered” using the “while hovering” interaction
3. Add the instance of the component to your layout
4. Wrap the instance in a frame
5. Add “on click” interaction to the wrapping frame, not to the instance, that links the component with the target frame
6. In the target frame use the “Selected” state for the instance

The selected state will remain selected on the target frame after navigating the prototype
🙂

How is this still not fixed? 😦
The work arounds are very scuffed