Skip to main content
Question

Variables + Smart Animate?

  • June 22, 2023
  • 27 replies
  • 10197 views

Show first post
This topic has been closed for replies.

27 replies

Metehan_Altuntekin

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.


dimitrie
  • July 8, 2024

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)