Using variables + Animation inside of components are not possible

[Claudio_Torres]

Hello everyone,

After investing numerous hours, I successfully designed an intricate expand-and-collapse navigation system using variables and components from a library. I incorporated rules to establish transitions between these components, as demonstrated in @miggi presentation at the Figma event.

Here are the steps I followed to create this dynamic navigation:

1. Begin by crafting a component with multiple states.

2. Utilize smart animation to transition smoothly between these states.

3)Create a text variable to represent each state within the component.

4. Establish an additional text variable designed to toggle between all available states; consider naming it ‘currentState.’

5. To work some magic, simply set each state variable’s value to match the name of the corresponding component state. Figma will automatically recognize these associations.
   Assign the ‘currentState’ variable to the element on the frame responsible for toggling between different states.

With these steps, you’re all set! However, there’s a small spoiler alert: I encountered an issue when attempting to convert this beautiful navigation into a component. A vexing message popped up: “Removed variant bindings from nested instance.” This problem nullifies the use of variables in the prototype, leaving us with the frustrating Pasta View.
So, that’s the challenge I’m currently facing. If anyone has any insights or solutions to resolve this issue, your input would be greatly appreciated. Let’s crack this conundrum together!

[Nate_G]

Nice setup!

Yes, sadly some variables are not (currently) available for nested instances — found that on a Note on the Figma Learn site.

So in that case you can’t assign a string variable, but I have found you can access boolean variables: See example file

[Claudio_Torres]

That’s right Nate, for that reason, any of the examples in the Figma presentation include, Animation + Variables inside of the components. If this doesn’t change we only have plain prototypes without transitions.

[Claudio_Torres]

About the file shared, yes you can add Boolean variables but you cannot add transitions in the prototype like when they are used string variables and then creating a component. The problem is to use String instead of a transition action directly in the Variables.