Timeless
Published in

Timeless

Creating complex interactions with interactive components — Switch button

Let’s learn how to create a fluid switch interaction in Figma.

Cover image

Switch interaction:

Fluid switch button interaction can be easily made by the “Interactive components method”. New to interactive components? know more here.

demo

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.

Switch components

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store