20 minutes

Animation, Button, Playful, Sketch

Learn Core UI Concepts with a Happy Button

In this tutorial you'll learn how to take a design comp, structure it into an animatable format, and then build a playful UI Animation.

Intro

This tutorial walks throug from a very early point in the design phase… Imagine you’ve envisioned this animation…

…and you’ve created the various steps as assets in Sketch, but haven’t prepared anything for Flow.

Starter Sketch File

And, if you want to jump straight to the end…

Final Files

Prepare Your Sketch File

We’re starting this tutorial right after having sketched out the concept for an animation, and well before we should import anything into Flow. Here’s what the Sketch file looks like:

This is a good layout of the various steps in the animation. From top to bottom we have:

1. Main state
2. Pressed state
3. Shrunk with a smile asset
4. Mid-point color
5. Final color
6. Check mark
7. Final state

Will we need all of these states to import into Flow? No… Here’s how to think about pulling this together.

What You Really Need

The concept of this animation is a button. A button will be a single object, with one background… So, at a minimum we’ll need only 1 background shape – because we know that we can scale and change its color in Flow. Also, a button only needs a single title label – we can change its content in Flow as well. Finally, we will also need a copy of each of the unique assets (i.e. the face and the checkmark)

Create a New Page

Make a new and add a new artboard sized to the button design – 300 x 70.

When you're bringing a Sketch file into Flow you'll notice the import window separates your selection by pages. So, it's generally good practice to organize the things you want to animate into their own pages.

Copy the Assets

Now, copy the following assets into the artboard you just created.

1. The pink background shape.
2. The label that says saved « YES, the longer label with the d
3. The face
4. The checkmark

That’s it… We’re now ready to tweak these elements into animatability.

Rename Everything

Always. Always. Always rename your layers appropriately. It helps when you’re animating, and even moreso when things go to code. And please, by all means just follow these two examples:

BAD

Sketch does a good job of copying and renaming layers while you’re working fast. For the most part, the names of layers don’t matter when you’re working purely visually. However, when you start animating and all your layers are named some version of Oval then it gets hard to know what you’re trying to edit.

Don’t leave your layers like this:

GOOD

Rename your layers to something understandable, unique and descriptive. Don’t use spaces, and only use alpha numeric characters (none of these: !@#$%^&*()) BECAUSE if you do want to export to code these kinds of chars just don’t mix well with compilers.

Rename your layers to this:

Keep it Simple

The face animation looks like it’s all dark and fills in with another color… At first, this may appear to be a tricky animation – you might think you need masks and odd shapes, or some kind of fancy scaling – but it really isn’t if you can think about how to break down your animation into simple components.

Two Faces

The easiest way to “fill in the face” is two use copies – one dark, overlaid with one light. Let’s set that up…

1. Group the leftEye, rightEye and smile layers.
2. Rename the group darkFace
3. Duplicate the group and rename it to lightFace
4. Change the fill color of the eyes to white

Your design file should look like this:

Done. We’re ready to Flow.

Animatable Paths

We’re going to modify the shape in Flow so that it only shows half of the shape’s border, making it a smile.

Also, we can animate the path of the circle in Flow. This is why we use a path instead of a solid shape.

Another way to keep things simple is to know how you can manipulate shapes / layers in Flow. 

This is also why the checkMark is a path and not a solid shape either.

Now, our design is all set to be animated. Let’s get to it.

Flow

Head on over to Flow where we’ll finish setting things up, and get started with our animation.

Setup

First, let’s get things ready.

1. Import the artboard
2. Zoom to 300%
3. Expand the timeline duration to 4.0s

You can change the timeline duration by tapping the small clock icon above the right-hand side of the timeline.

backgroundShape

We’ll start with the background because it’s most visual part of the animation.

1. Hide all layers except the backgroundShape
2. Move the playhead to 0.25s
3. Lock the w/h and change the height to 60
4. Change the fillColor to #CF0263 (or r: 207, g: 2, b: 99 if you’re not on OSX 10.14)

   

5. Move the playhead to 1.0s
6. Unlock the w/h and change its width to 70

   

7. Move the playhead to 2.0s
8. Change the fillColor to #0CCDA2 (or r: 12, g: 205, b: 162 if you’re not on OSX 10.14)
9. Select the previous color keyvalue, press OPTION (⌥), then it to 1.0s

   

10. Move the playhead to 3.1s
11. Change the width to 300
12. Select the previous color keyvalue, press OPTION (⌥), then drag previous keyvalue to 2.6s

    

That’s it, the main background animation is in place. Check it out:

darkFace

Let’s animate the dark face now.

1. Reveal the darkFace layer
2. Turn on relative mode (⌘⌥R)
3. Select the smile layer
4. Rotate the shape to 90°
5. Set the stroke end to 0.5

   

Using stroke start and end are great for animations and iOS. But, if you’re exporting to HTML you’ll have to use dashPattern and the pattern offset to get the same results.

Animating the Face (pt1)

Next, we’re going to add a subtle scale animation to the face. This requires a couple steps.

1. move the playhead to 0.75s
2. turn off relative mode
3. select the darkFace group
4. scale it to 20 x 20
5. change the smile’s stroke width to 4
6. change the group opacity to 0

   

7. select all the keyvalues for all layers of the darkFace group at 0s
8. delete them

   

9. select all the keyvalues for all layers of the darkFace at the end of the timeline
10. move them to 1.0s

    

11. Move the playhead to 2.0s
12. Change the fillColor for leftEye and rightEye to #28987F
13. Change the strokeColor for smile to #28987F

    

14. Move the first keyvalues for the new animations to 1.0
15. Delete the last keyvalues

    

16. Change the opacity to 0
17. Change the new animation’s curve to step left

    

The step left animation curve makes it so the change in value happens right at the last moment of the animation.

Now, let’s animate the filled in portion of the face.

lightFace

Our next goal is to animate the filled in version of the face. Let’s start with that smile ;)

reveal the lightFace layer turn on relative mode (⌘⌥R) select the smile layer rotate the shape to 90° set the stroke end to 0.5

These were the same steps that we did to the dark version.

Animating the Face (pt2)

Now let’s animate the face. We’re going to scale and fade in the right eye, animate the smile, then scale and fade in the left eye.

1. Turn off relative mode
2. Move the playhead to 1.0s
3. Select rightEye and change its size to 5 x 5
4. Change its opacity to 0
5. Delete all the new keyvalues at t=0
6. Move the all the keyvalues for rightEye from the end of the timeline to 1.25s

   

7. With the playhead at 1.25s, change the smile stroke start to 0.5
8. Delete the first keyvalue from the stroke start track
9. Move the last keyvalue to 1.75s

   

10. Move the playhead to 1.75s
11. Select all the keyvalues for the rightEye animation
12. Copy them to the clipboard (⌘C)
13. Select the leftEye
14. PASTE the keyvalues onto the left eye!

    

15. Delete the first values that appear after pasting.

    

16. Move the playhead to 2.25s
17. Select the lightFace group
18. Change its opacity to 0
19. Move the first keyvalue to 2.0s
20. Delete the last keyvalue

    

checkMark

Let’s animate the checkmark now.

1. Turn ON relative mode
2. Reveal the checkMark layer
3. Change its stroke end to 0
4. Turn OFF relative mode
5. Move the playhead to 2.60

6. Change its stroke end to 1.0

7. Move the first keyvalue to 2.35s
8. Move the last keyvalue to 3.35s
9. Pressing option (⌥) drag the middle keyvalue to 3.1s

   

titleLabel

Last but not least, let’s do the title.

1. Reveal the titleLabel
2. Move the playhead to 3.1s
3. Change its opacity to 0
4. Move the first keyvalue to 0.5s
5. Move the playhead to 0.75s
6. Change its opacity to 0

   

7. Keeping the playhead at 0.75s
8. Delete the d from the layer’s text field
9. Delete the first keyvalue from the newly minted String track

   

FIN.

That’s it! We’ve created a nice button animation, and learned a few things along the way like:

• How to properly structure a Sketch file for animation
• Using the path stroke end to animate along a path
• Tricks for copying / pasting keyvalues
• How to use step functions