Variables + Smart Animate?

Indeed… this makes the new variable boolean states unusable in prototyping. Since prototypes are ment to represent the production product closely as possible.

I have been looking for the same thing since the variable update and very surprised that it wasn’t done from the start as it seemed to me the natural way of using them. I also can’t find any info on if it is coming up at any point.

+1

I need the variable changes to be able to use the same smart animate that the other pieces can use

+1 indeed very disappointing and a bit surprising

Vote for it here
Animation while prototyping with “Set Variable” - Interactive Components / Feedback - Figma Community Forum

It’s convoluted… But I found a work-around. Variables are set up to trigger any “change to” animations that are set up at the component level.

ie. if you create a toggle component with two variants that smart animate to one other on click, then changing the variant state of that component with variables would also trigger that animation.

The trouble is that sometimes you want variables to be the only thing to trigger that state change, and not any other prototyping interaction options like “on hover” or “on click”. If that’s the case, you can kind of hack it by using the “key/gamepad” interaction, but not assigning any key. You can then set up your animation settings, and when the variable triggers the state change from one variant to another, it will pull those “key/gamepad” animation settings without anything else being able to trigger it.

@J.D_Posey im not sure if you’ve already found the solution to this. But during the Figma Expo they do show how to retain the smart animate function while using variables. The trick is to create a variable that holds all the component states.

1. create a component with multiple states
2. smart animate between the states
3. create a text variables that ‘holds’ each state (i usually just name the variable the name of the component state)
4. create another text variable that will toggle b/t all the other states (name it like ‘currentState’)
5. Here’s the. magic: for each state variable - for the value, type in the name of that component state. Figma will automatically pick up that state.
6. Assign the currentState variable to the element on the frame that will toggle b/t states.
7. All done!

I’m unable to recreate this using your method. Does this still work for you?

How about with a component with one variant and you’re just toggling the layer visibility on and off (ie for a dropdown menu)?

Here’s a loom i created showing how to do it

That was really super helpful, thank you so much! Can you please take a quick screenshot or show what the prototyping settings looks like for your component/variants?