Transitions for when setting a new variable?

Hi @mfelix , thanks for getting involved in trying to find a solution for this.

From what I can tell, I don’t think your solution solves the issue @Chris_Keith1 was referring to. The problem is that when using variables to change component variants, there is no way to manage the transitions as one normally can when prototyping.

Does anyone know if a solution to this is on the cards, soon?

It’s pretty insane (to me) that this feature was launched without transitions.

I have the same question. I don’t think the answer to use smart animate is correct, unless there is a way to apply it to state changes resulting from setting a variable (eg color, component variants). Unless I’m missing it, I don’t see a way to do that.

This trick is probably not intended by Figma, but you can use a variable to change to a second variant. This variant is just temporary. Set it to change to a third variant with the “After delay”-event, with the transition set to 10ms. With the third variant you are free to use whatever transitions you like.

@Marcus_Vedde thats a very interesting idea, did that work for you? I am seeing that the “after delay” animation doesn’t work the variant appears because of variable change.

This is the basic setup. I should mention that you have to set up a click-event with “instant” transition between “first” and “second-incoming”, and also between “second” and “first-incoming”. This is probably because Figma needs a default transition when switching variants from a variable.

The solution is actually super simple. If possible connect the variants using an interaction you’re not going to use i.e drag or keypress with smart animate. As long as the variants are linked using smart animate they will animate on the variable update.

This is such a useful trick. It works most of the times for me, havent figured out exactly why it doesnt work sometimes

I have been trying this solution for over an hour and couldn’t get it worked. Finally I realized that this only with setting the variable but not with setting a variable mode.