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

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