Variables + Smart Animate?

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!