Prepare Your Design File for Animation

In this episode, we're going to take our existing design file, format it properly, and import it into Flow. The goal is to get the design file into a state that can be animated.

The Importance of Hierarchy

The first part of the walkthrough introduces you to the need for matching layer hierarchies when animating.

Two main reasons for this requirement are:

1. In software, especially with animation code, variables (layers) need to be defined at compile time.
2. A simple design could be animated in many different ways. Matching hierarchies remove ambiguity and helps Flow animate things the way you intended.

For more on this, please see our Hierarchies Doc.

Flowcase.sketch

Here’s a look at the Sketch file we’ll be using.

This step starts at 3:47

There are three states.

1. Open, grey heart shape – this is the unliked state.
2. Red heart, with a plus – intermediate state.
3. Full red heard – this is the liked state.

Not Too Clean

You’ll notice if you look at the layer structure of the design file, that this file is pretty raw and hasn’t been cleaned up. Our intention is that this file might look like something you’ve created for design purpose, but is not yet structured for animation.

We're only going to animate the heart... not the enire design file.

Flow Encodes Your Design

When you’re about to go animate your stuff, it’s important to remember that Flow’s major benefit is that it converts your work to software. In other words, it encodes your work.

Every Layer Converts

This is important to understand, because Flow will convert every layer in your entire Sketch file to something that can be animated and represented in code. Flow can’t tell which layers you may or may not want to animate, so it preserves them all.

It’s great practice to isolate a component in a new Sketch file before animating in Flow. This way you convert only what you intend to animate.

Sketch files with a lot of layers, artboards and pages may take a while to import.

Isolate and Extract

The best practice for animating components of your UI is to isolate and extract them. Moving just the animatable layers to a new file will make the output software much cleaner. As an added benefit, the time to import will be lightning quick.

Extract the Heart

The first step we’ll take is extracting the heart into a separate file.

This step starts at 4:05

1. Select the grey heart, the middle red heart and the plus.
2. Copy them.
3. Create a new file.
4. Paste them into the new file.
5. Ignore the underlying mask on the grey heart.

Align the Shapes

Since the end effect is that the heart “fills in” with red, we want to make sure that the two grey and red shapes overlap precisely. If they aren’t aligned precisely, there could be a slight / odd visual flicker effect on the animation.

This step starts at 4:46

1. Duplicate the grey shape.
2. Move the new copy over top of the red heart.
3. Convert the new shape to outlines.
4. Delete the resulting inner path.
5. Delete the original red shape.

At this point, the two shapes should now be identical.

Mask the Red Heart

The effect for the aniamtion is to have it fill in, coming up from the bottom. To do this, we’ll use a red layer that is masked by the heaart shape.

This step starts at 5:23

1. Create a Rectangle, make it 50x50.
2. Rotate it by 45 degrees.
3. Give it a 1pt round corner.
4. Remove the border (trash it, don’t just uncheck it).
5. Move it down so that it’s top corner is just below the heart.
6. Center the layer to the heart.
7. Change the Rectangle fill color to red.
8. Move the layer back over top of the heart.
9. Adjust its size to tightly encompass the heart shape.
10. Select the two shapes and convert them to a masked group.

Rename and Tidy

We’re almost there. This step focuses on cleaning up the design file so that we have fewer total shapes, and makes sure that they’re renamed nicely for when they go to code.

This step starts at 6:57

1. Select the two small red rectangles.
2. Convert them to a Combined Shape.
3. Rename the shape to plusIcon
4. Rename the grey shape layer to heartGrey
5. Rename the red heart layer to heartRed
6. Rename the masked layer to redLayer
7. Rename the mask path to heartShape

Start and End States

We’re at a point where we can now craft our start and end states. Let’s get to it.

This step starts at 7:57

1. Move the heartGrey shape over top of the heartRed
2. Create an artboard of 40x40
3. Move the hearts into the middle of the artboard
4. Move the plusIcon into the artboard, positioned so its center is at the top-right of the artboard.

First State

Let’s create the first state of the animation.

This step starts at 9:02

1. Move the redLayer down so that its top is slightly below the heartShape
2. Remove the fill color on the heartShape
3. Change the opacity of the plusIcon to 0%
4. Rename this artboard to unliked

Second State

Let’s create the second state now.

This step starts at 9:31

1. Duplicate the artboard.
2. Change the opacity of the heartGrey to 0%
3. Move the redLayer up until the heartShape appears red.
4. Change the opacity of the plusIcon to 100%
5. Rename this artboard to liked

Ready to Animate

Now your design file is ready to animate in Flow.

This step starts at 10:11

1. Open Flow
2. Create a new Project, save it as heart.flow
3. Link your Sketch File.
4. Double-click the unliked artboard.
5. Double-click the liked artboard.
6. Press Add

There we go! We have a basic animation that we can now tweak.

Up Next

In the next screen cast we’re gonna animate the ✱✱✱✱ out of this little heart.

Animate Your Design File