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!
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.
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:
- Create multiple button components (default, hover, etc.)
- Combine components as variants
- 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!