Designing Micro-interactions: An Interactive Switch

An ongoing series on creating animations in Framer.

This post is part of an ongoing content partnership between Toptal and Framer, written from the perspective of a new user. If you don’t have Framer, make sure to download a free 2 week trial. Check out the rest of the posts in this series:

Framer Beginner Tutorial: From Design to Code, Components and Beyond

Designing Micro-interactions: How to design an action button

Interactive switches

A switch is a visual toggle between two mutually exclusive states — on and off. Interactive switches provide a clear visual feedback for user interaction with control. Subtle animation makes the experience feel crafted and is especially important in mobile apps. Here are a few examples of how designers have incorporated an interactive switch into their work:

Suspicious Activities Widget by Sergey Nikishkin for Acronis

A Focus Switch by Kevin Mao

Nightmode Switch by Jurre Houtkamp

Alert Bell by Ehren Miller

You can adjust a switch’s appearance to match the style of your design. The steps below will enable you to create your own basic switch interaction, which you can then customize to your needs. Download the working prototype here: https://framer.cloud/ieypV

Step 1: Design a switch playground

You will need only two things: the switch itself, which contains at least two layers (background and dot), and some layers to animate after using the switch.

Step 2: Create states

In my first article, I taught you how to design states directly in Framer. Let’s put that lesson into action now. Design your states how you like, or use my settings:

dot.states.a =
	x: 50
	backgroundColor: "rgba(5,106,161,1)"
switch_bg.states.a =
	backgroundColor: "rgba(0,136,205,1)"
	
icon.states.a =
	opacity: 0
circle.states.a =
	x: 37
	y: 183
	width: 301
	height: 301
circle_1.states.a =
	x: 20
	y: 166
	width: 337
	height: 337

Step 3: Add an event

To make the prototype work, add an event to the switch. After tapping the switch, change the state of all the layers:

switch_1.onTap (event, layer) ->
	dot.stateCycle()
	switch_bg.stateCycle()
	circle.stateCycle()
	circle_1.stateCycle()
	icon.stateCycle()

Step 4: Adjust the timing

To make everything more natural, adjust the time and delay of all states:

dot.animationOptions =
	time: 0.2
switch_bg.animationOptions =
	time: 0.2
circle_1.animationOptions =
	time: 0.5
	curve: Spring
circle.animationOptions =
	time: 0.5
	delay: 0.05
	curve: Spring
icon.animationOptions =
	time: 0.5
	curve: Spring

Now your prototype is done! Feel free to adjust and customize to suit your needs. In the next post, I’ll cover how to design and animate a list of swipable items.

This tutorial was originally published at www.toptal.com. Toptal is an exclusive network of the top freelance software developers, designers, and finance experts in the world. Many large companies rely on Toptal freelancers for their most important projects. Check out the top 3% of Framer-proficient designers on Toptal and hire one today!