How to add a tap interaction as well as a navigation interaction to a component in Figma?

Ask the community
1

I am trying to create a button in Figma that takes the user from the cart screen to the order success screen in three steps:

#1 The user clicks on the button.
#2 The first interaction fires (a ripple animation), thus letting the user know that the button is clicked.
#3 The navigation interaction fires and user is taken to the order confirmation screen.

The way I tried to achieve this at first was by creating a button component and simulate the ripple animation through a custom transition between two variants:

figma-checkout

Finally, I incorporated this button component into my checkout frame and added a navigation interaction to it (so in effect, the button now had two interactions), however, this resulted in an error:

This interaction will not be triggered as interactions on instances are triggered before inherited internal interactions.

I tried google but couldn’t find anything helpful.

Later on, I tried a different approach on another button, using three variations for the animation this time instead of two. This worked somewhat without resulting in any errors, however, here’s what happened:

1# The user clicks the button
2# The custom animation fires, the user is not taken to the next screen.
3# the user clicks again and now is taken to the next screen.

Another type of situation I encountered was when I changed the trigger of the navigation interaction from tap to time delay. In this case, the user is taken to the next screen, but when you try to navigate back to the previous page, you are immediately taken back to page you taken to after tapping on the button.

It therefore seems like that Figma doesn’t allow adding multiple animations to components this way, is there a better way to accomplish a user flow like I described? Or perhaps an alternative that comes close?

Thanks in advance!

1 Like
2

I strangely just found a work around after being frustrated with a tab bar I designed.

  • If you first set up your button variants with “click” interactions to “change to” your hit state,
  • Adding a second “click” interaction will be grayed out. BUT…
  • If you create a “click” interaction to navigate to you desired screen, on a random object, then copy that interaction, you can then paste it to your button. And for some reason it allows two click interactions to work…
3

I see that I can copy+paste the animation from a random object, so there are 2 click actions (a “change to” and a “navigate to” but I still can’t get the the navigation interaction to fire at the same time as the component variant interaction. Still takes 2 clicks :frowning:

4

Is your “change to” hitstate variant inside your component and your “navigate to” pasted to an instance of that component button on your “page.”

(To be clear, i don’t have both tap actions assigned inside the component.)