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?

hey there - im not sure you would need a variable for this. You could just smart animate b/t the open/close states. Are you trying to have it where only one dropdown can be open at the same time?

Yeah, there are variables that trigger one dropdown menu in a main navigation component being opened at a time. For example, in the navigation component there are different drop downs for a favorites icon button, an account icon button, and a dynamic search field.

I would like to handle this with variables in the few navigation variants (which handle different types of logged in users) instead of having every single combination of opened and closed menus as variants of a component. It would balloon exponentially.

This is something that is easily done in Axure. I was hoping to be able to replicate something like that in Figma.

Hello Melissa, this is really useful, but I have a question, if you need to use this element like a component to reuse in multiple screens is not possible, because appear the legend “Removed Variant bindings from nested instances”. And automatically you cannot use for example the text variant “GaugeTemp”, do you have any clue if this is possible? I created a side navigation with expand and collapse components and variables and works perfectly until I try to convert it into a component.

This was really helpful Melissa, thank you! Looks like there has been an update since this post and we no longer have to define those extra variables, changing the text in the current_state variable triggers the “on click” transition.

Thanks very much @Melissa_A_Casole , this was super helpful.

Unfortunately, this doesn’t work for me. Have overlooked your video multiple times and can’t get the same functionality to work. 😦 Super bummed out how they don’t have this working yet.

OOOOOOKIE dokes.

After 5 hours of going through insane hurdles and pulling out my hair - I HAVE FOUND OUT THE PROBLEM.

you HAVE to have the Smart Animate enabled on the COMPONENT LEVEL.

Don’t assign any of the Smart Animations to elements within the component - ONLY component level Smart Animations will apply when changing component level state.

Please, Figma team, save others from this insane stress I just went through and just enable variable changes to be a trigger for interactions!!

All in all - the real benefit here would have component Variants + Properties just assigned to variables. Would make the entire process far easier

The loom is super helpful, but it would be 10000x easier if Figma just let us add smart animate to a conditional on click interactions. Please, Figma!

Thanks for explaining! It just make me realize Advanced Prototyping’s UX isn’t very good. Pretty ironic, coming from a company that places design at the core of its values.

Where/how are you applying smart animate?

Work for me

benji.hobson is suggesting below workaround and it worked for me:

Adding any interaction and animation for the component variants.

e.g. In my case, I used Key/Gamepad (leaving the “key” field blank) with Smart animate.

Workaround:

Add any interaction and animation for the component variants.

e.g. In my case, I used Key/Gamepad (leaving the “key” field blank) with Smart animate.