Step 1: variants
Create a component (for example a toggle) and add variants for each state: off, on, and maybe hover and pressed. Keep layer names identical across variants so Smart Animate can match them.
Step 2: interactions
In Prototype mode, select the off variant and add an interaction: On click, Change to, the on variant. Add While hovering or While pressing for feedback states. Because this lives in the component, every instance is interactive.
Step 3: animation
Choose Smart Animate and an easing such as Ease out or a spring preset. Keep durations short: 150 to 300 ms for most micro-interactions.
Step 4: logic
Variables and conditionals let you build interactions that remember state, such as a like count or a toggle that controls another element.
Step 5: hand off
Figma prototypes are not production code. Share the values (duration, easing, spring) with developers, export with a plugin, or rebuild the component in a tool whose output ships. ExodeUI can import Figma designs and turn them into interactive components with states and springs; we make ExodeUI.