Not seeing a way to have variable bool states allow for smart animations in the same way changing variant states allows for it (i.e. if you made a switch that flipped using 2 variants, it’s easy to have them smart animate to each other… but not possible with variables, as variable state changes don’t seem to have controls for animation)
Page 2 / 2
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. I wanna leave this here in case others struggle with the same thing.
It’s a bit finicky but works in principle.
I have yet to see a good demo file so I made one myself. The demo changes a square into a circle. It includes two examples. Basic instructions:
- Create a string variable with its value set to the default variant name of the target component.
- Assign that variable to the component inside your prototype frame (nothing changes)
- Set up a click prototype interaction that changes that variable value to the new variant name on a controlling component (like a button).
- Make sure that the target component (that will be changed) has animations changes set up with “on click” or “keypad” (can be empty) that smart animates them into the other variant.
Figma – 8 Jul 24
Smart Animate Example with Variables setting the Component Variant.fig (61.9 KB)
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.