Framer – Medium | Wojciech Dobry

Part 1: How to design and animate an action button.

This post is part of an ongoing content partnership between Toptal and Framer, written from the perspective of a new user. In the last article, I walked you through the basics of using Framer in Design mode, as well as how to use simple logic to bring designs to life in Code. If you don’t have Framer, make sure to download a free 2 week trial.

Over the next few posts, I’ll show you just how simple it is to design and prototype seven everyday microinteractions in Framer. This post details the first in the series: the action button.

Why should you prototype small interactions?

Smooth movement, state changes, and subtle transitions help users understand how to use your interface by giving simple feedback on certain actions. Often, these transitions will echo real-world analogs (such as the sliding of a switch control) or utilize common device interaction patterns (such as tap-to-expand). This tutorial focuses on interactions that will guide user understanding and add a surprise and delight factor. By the end of this series, you should be able to create all of the following microinteractions in Framer.

Have you seen interactions like these before? Sure, you have! You interact with them every day on your smartphone. Now it’s time to create your own. Below, I’ve listed a few examples of microinteractions in action.

Johny VinoMarcin Michalak (Contractbook)

The Action Button

In this tutorial, I’ll give you an overview of the interaction, show you how to set it up in Design, and then walk you through adding animation in Code. We’ll be using several different techniques, so you’ll be able to choose the one that best fits your product. There is no “right” way to create anything in Framer. As I mentioned in a previous article, Framer gives you a lot of freedom to create the way you want to.

Instamojo On-Demand app by Manas Vaze

What is an Action Button?

The action button often represents the main action of the current screen. Sometimes it contains several actions inside. We will be creating an interaction for the second case. Download the working prototype here: http://ift.tt/2tjrOVU

Step 1: Create three circle-shaped buttons

To start, create one main circle-shaped button with an icon inside and two smaller buttons placed under the main button. Don’t forget to mark all of these layers as interactive in the Design mode (using the target indicator).

Step 2: Design two states for all layers

Create two different states for each layer. Use the code below to make the smaller buttons move above the main one and to rotate the icon at 45°:

button_1.states.a =
	y: 427
	x: 246
	width: 64
	height: 64

button_2.states.a =
	y: 330
	x: 246
	width: 64
	height: 64

icon.states.a =
	rotation: 45

Step 3: Add an event

To animate this prototype, we have to add an event. After tapping the action button, change the states of all the layers:

button.onTap ->
	button_1.stateCycle()
	button_2.stateCycle()
	icon.stateCycle()

Step 4: Spring animation

At this point, the animation looks very mechanical. To give it a native feel, let’s add a spring animation for all of the layers:

button_1.animationOptions =
	curve: Spring(tension: 170, friction: 12)

button_2.animationOptions =
	delay: 0.05
	curve: Spring(tension: 170, friction: 12)

icon.animationOptions =
	curve: Spring(tension: 250, friction: 5)

Your action button is ready to go!

Final Note

When creating microinteractions, you’re focusing on the smallest details. You can create animations triggered by any type of action and make them absolutely perfect. Keep in mind that there are hundreds of ways to create the same interaction, and you should use the method that fits your skills and the needs of your product. Alternatively, Framer offers a ready-made and customizable version of this interaction in their Patterns library.

In the next Framer tutorial, I’ll show you how to create an interactive switch toggle. Stay tuned!

This post was originally published on 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!

Creating microinteractions in Framer was originally published in Framer on Medium, where people are continuing the conversation by highlighting and responding to this story.