Skip to main content
Solved

Transitions for when setting a new variable?


Ive been playing around with using variables + components. You can change Figma component variants using a string variable (which is great!) but everything is instant. There doesn’t seem to be a way to define any sort of transition between variants. This is also true for number, color and boolean variables. When a variable is set it’s always an instant change.

Is there a way to achieve this?

Best answer by mfelix

Hey @Chris_Keith1,

While it won’t be possible to set up a transition in your design file when switching between variables, you’ll have the possibility to build a prototype to do this, with smart animate or any other animation.

Animating the design file itself would use more memory and would tend to lower the overall design experience in most cases.

View original

11 replies

mfelix
Figmate
  • Figmate
  • 20 replies
  • Answer
  • July 4, 2023

Hey @Chris_Keith1,

While it won’t be possible to set up a transition in your design file when switching between variables, you’ll have the possibility to build a prototype to do this, with smart animate or any other animation.

Animating the design file itself would use more memory and would tend to lower the overall design experience in most cases.


Paul_Galatis

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?


justin.fraga

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


Andrew_Fiorillo

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.


Marcus_Vedde
  • New Participant
  • 8 replies
  • October 13, 2023

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.


Marcus_Vedde
  • New Participant
  • 8 replies
  • November 28, 2023

Animation_example

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.


Alex_Peterson_UI

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.


  • 6 replies
  • March 19, 2024

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


Metehan_Altuntekin

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.


maskar
  • New Member
  • 1 reply
  • February 26, 2025

@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!

 


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings