Figma Support Forum

Animated button that changes to another variant & opens a new frame on click

Hi everyone!

I want one of my smart animated components, a button, to do two things when it is clicked.

  1. Change to a variant - so it goes from the unselected to the selected state.
  2. Trigger the opening of the next overlay

This is so that the user sees the button that they click change briefly before the next overlay opens.

I can do both of these in isolation and I can make it work in a dumber way with an interim screen, but I can’t get it to work in one step. Any advice very welcome!

Thanks

Duncan

I’ve been experimenting with this the past few days, and creating an encapsulated variant with a delayed navigation trigger doesn’t seem possible. I can do it without using variants, but that, like you said, feels like the “dumber” way.

I’d love to see if anyone else here has pulled off this use case within a variant, and make it reusable. (The technique I tried was overriding the instance of a variant state for a navigation, and using some smart animation hackiness to force a delay.)

1 Like

Hi @Duncan_Bell, I made an example of a prototype which you can see on the links below.

Design file:

Prototype:

Is this what you expected?

2 Likes

tank666 - I think you’ve nailed this, thank you so much. I will try and replicate this with my design system this afternoon. :smiley: :clap:

This post was flagged by the community and is temporarily hidden.

@tank666 I just wanted to say thanks again. I got this working with my own components today. Really nice solution that will save me a load of time.

:muscle::clap:

2 Likes