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.

​@Chris_Keith1 it is actually possible. It just seems to be very difficult to find the info/guide on this. 

You can achive triggering an animation for one instance, based on a change in another. 

First, you have to make a binding using a string variable:

1. Create a String Variable
2. Go to Component A (the controler), and Component B (the controled) and rename the variants to match to match each other. So if Button Component Variant 1 needs to show Image Component variant 1, then these should have the same name.
3. Then when you create your Instance of Component A you go to the property field and link it to your String Variable varable. You do the same for your Instance of component B you want to change with the Instance of Component A.

This will make sure the two components are bound and influences each other. But it does not animate yet. 

Second, you add interactions to Component B:

1. When items are bound, the bound respects the animations of the controlled Instance (Instance of Component B). 
2. So, you simply “just” add interactions with animations between your Component B variants. 
   1. You can use after delay interaction (1ms) if you dont want Component B to be a reverse controller.
   2. Or, you can add a on click interaction, so clikiing Component B also will control Component A. In that way you can use both components to control eachother, if that is desirable. 

Now triggering animations between two seperate components should work!

Good Luck!