Can't get multiple actions to work when combined with variant interaction

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 MouseDown Variant interaction to include some additional logic, then drag this action so that it is the first in the list to be executed.

+1,000

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.

→ Original Thread
→ File With 2 Examples

I’ve just spent an hour trying to get the following to happen:

1. Click toggle – toggle changes state to selected and displays a card (via a variable value change) in the same frame.
2. 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”.

This is maddening.

Same here. When will this be fixed?

experiencing the same issue 😦

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.

Hope this helps!

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

I have this same issue - it seems variant interactions are ignored if based on the same action that another interaction is added to. Which is insanity. What design decision is based on ‘ignore all other rules for this rule’? Figma really need to fix this issue as it’s hampering prototyping massively