Creating complex interactions with interactive components — Switch button
Let’s learn how to create a fluid switch interaction in Figma.
Fluid switch button interaction can be easily made by the “Interactive components method”. New to interactive components? know more here.
Creating switch animation is simple. You can connect on and off state and set the animation prop as smart animation. But in order to bring the minor knob animation, we need more states.
Step 1: Create switch variants for different states. Off, knob-extend, on, and hover state for all of the above.
Step 2: Connect all OFF switches with the interaction properties shown in the image below.
Step 3: Connect all ON switches with the interaction properties shown in the image below.
Make sure you connect the correct components with the right animations. All animations will be smart animation.
That’s it. Hope you can able to build the switch button prototype with the above method. To learn more about components, design systems, and Figma as a tool, check this list of blogs.