I have a button component with the typical default, hover and active states for mouse over animation, nothing special. I want to click this button and:
Navigate to a new frame
Open an overlay on this frame.
If I map multiple On Click actions to a static element then this works. As soon as I try to map these actions onto a button component, only the first action of navigating to a new frame works. So I can’t get it to work on a hover animated button and I have no idea why this would be the case. I don’t have any conflicting actions with the danger icon on anything. Please help! Thanks.
Edit: To clarify, I even tested this with a component that had the 3 button states but didn’t have any prototyping links between the states in the component and it worked just fine. As soon as I added a link to a hover state variant the multiple On Click actions broke.
+100. I have been having this issue for years, and had hoped the newest Figma prototyping update would fix it. I have a published library with variant interactions for components such as buttons, which include standard interactions such as hover and press. However, when I use those buttons within prototypes in individual files, the variant interactions such as on hover and on press conflict with the prototype interactions I need, such as navigate to.
It appears that the built in variant interactions conflict with the local prototype interactions.
The only workaround I have found is to remove the variant interactions to get my local prototype interactions to work. However, this strips away interactivity from my prototype.
Same issue.
I am trying to use a switch to display/hide additional components on a form.
The switch component has the embedded action of going from normal->hover, and then on hover the click does normal-hover->active.
Adding the additional interaction to edit the variable does not work. Apparently it stops at only one interaction.
In the current open beta, we are now able to add multiple actions to a trigger. I tested it with ‘Navigate to’ and ‘Open overlay’ on the same trigger and it worked! However, what I am confused about, is that i can’t enable to states on the same hover trigger. Have i misunderstood what the intention is, or has someone else made it work?
It sounds like this may be related to our recent State management update. If this article doesn’t help, are you able to share a link to your file, so we can take a closer look?
Had the same issue. For my particular case, I was able to work around it by putting my interactive component in a frame, and then apply the additional hover action (open overlay) to the frame.
I have the same issue. It would be great to be able to add a click action to a component instance, even if the original component had click interactions.
For context, I’m trying to create filtering where I can click on the list items, and the list item would both get checked (or unchecked) AND increment the counter variable by one AND change the Apply button status (controlled by another variable). Now I can have either or, as far as I understand.
I initially had the list item component (the checkbox + title) as part of the design file, and I got the interactions to work as intended. But when I extracted the component to our component library, I couldn’t get it working anymore.
Well same here.
From my point of view, all variant interactions are pretty much useless, if one cannot use them to prepare basic components and reuse them in more complex components.
Simply said: we need to be able to build basic buttons and derive more complex buttons from those simple buttons.
There is actually not even a workaround for this, e.g., by overlaying the button with a transparent rectangle and adding a click interaction to that rectangle, as interactions like hover will not reach the button, nor will click interactions set a variable.
Update:
You can actually have a hover interaction, but setting up a click- or mouse-down-up interaction leads to an additional instance interaction to be swallowed.
The way Figma likes to solve this is that on the target frame, you add an interaction “after delay” and then put your “open overlay” on that interaction. Then from your initial click, all you do is add a single interaction to the new frame.
The only downside to this is that no matter how someone navigates to that page, they will get your overlay.
I have solved it in the past by making TWO versions of the target page. One to keep in my regular flow and a second that I use only when coming from a particulat component interaction. A real pain if things get complex, but easy enough to maintain if you have a small project. Still tho.
I have had a few arguments with Figma support over this. They don’t like to see the user need here. I think it would be a pretty simple solve and they could even keep it the way it works with the interaction on the target frame, BUT it needs some sort of conditional logic. That is where Figma fails is that they do not think their tool needs this sort of thing.
I’m running into the same issue. I have a hover state that needs to trigger a ‘change to’ and an ‘open overlay’. The hover is a variant interaction. It triggers both actions however it gets stuck and then won’t go back to the original state when the cursor is not over the hover zone element. I’ve also tried it with mouse enter/mouse leave with the same issue.
I use “Mouse up” instead of the “On click”. When I don’t have choice I use “After Delay”. It’s very annoying but It seems that Figma changed the way the “On click” works in order to not have too much issue with the beta feature “conditionals” and “multiple interractions”.
This does seem like an incredible oversight and massively reduces the usefulness of component buttons inside prototypes.
It is possible to have a pressed state for the button that then returns to it’s initial variant on MouseUp but I don’t currently see a way for this to work with multi-state buttons that, after being pressed, remain as an altered variant from the original - for example a button that has 3 variants and when pressed remains in an active state rather than returning back to its default one. In these instances the prototype event of the instance is lost.
I’ve included an example of getting a simple button working with a pressed state that returns to its original state afterwards in case this is useful to anyone that ends up here.
Firstly, create a component with 2 variants Up and Down. Whilst still inside the component add the prototype logic to switch between the two variants using MouseDown and MouseUp.
After adding an instance of the component to a frame open the prototype panel and update the existing MouseDownVariant interaction to include some additional logic, then drag this action so that it is the first in the list to be executed.
Except, for me, I even turned off ALL nested interactions on every possible layer I could, yet somehow, Figma couldn’t respect that.
I wanted a checkbox to trigger a transition to the next page. But the checkbox was nested in my line item and had a variant interaction to it. I turned off every possible interaction to my nested component, and tried to trigger the frame outside of the nested component but somehow, the prototype was still just checking the button on and off, not at all following the only trigger that was in place. I don’t understand this because I turned off every variant interaction available on every single layer that could possibly cause this.
I had to fully detach the instance in this screen. That seemed to shut it off and make the trigger work as I intended it to, EXCEPT when I switched over to the new design, where the checkbox was hard checked on my prototype, the checkmark was unchecked? How did that carry over, I have no idea.
This should not be complicated. We’re currently in the process of turning off every nested interaction and component because it simply causes prototype chaos.
(This is not a complex design so I’m desperately trying not to use conditional variables here, but honestly at this point I’m not even sure if that would have been a solution. I just want a straightforward flow that my non-techy team can understand).
I hope we can see an update from a Figma rep soon.
There was a question a while back on triggering actions from a button with variants — in that case, the button had a start, load, and end, and they wanted to add the interaction on the end state.
I put together a file with 2 different approaches, which may be of help with this one too.
I’ve just spent an hour trying to get the following to happen:
Click toggle – toggle changes state to selected and displays a card (via a variable value change) in the same frame.
Click selected toggle – toggle changes state to unselected and the card disappears thanks to changing that same variable to zero.
I know you need to put navigate or change to instructions after any variable changes, because the “script” ends when you change state or navigate away from the screen.
But what’s happening to me is that only the “change to selected” case works, even though both states have code to change the variable. I am debugging by having another variable get changed at the same time, and it only changes for the one logic case. If it’s doing nothing, I should be seeing the debugging variable change, and I’m not. It’s obvious Figma is not running all of the “script”.
I think I found a good workaround to this interaction.
Lets say button has 3 states: Normal, Hover and Active.
Normal —>While hovering—> Hover
Hover —>While pressing —> Active
This “While pressing” microinteraction will steal the click event when you try to navigate from one frame to another so it won’t navigate.
Solution: don’t use “On Click” when you try to navigate to another frame, use “Mouse up”.
Logically it makes sense, that’s exactly how the browser works with a normal HTML button. The click event is not registered until you release the mouse.
Same here. I Am using the component menu option that has a variant for Hover, with simple in mouse enter to open an overlay, but they do not work together…
What’s the point in this component behaviour if it’s limited while using in the complex prototype??
