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 first part of the walkthrough introduces you to the need for matching layer hierarchies when animating.
Two main reasons for this requirement are:
For more on this, please see our Hierarchies Doc.
Here’s a look at the Sketch file we’ll be using.
This step starts at 3:47
There are three states.
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.
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.
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.
The best practice for animating components of your UI is to
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.
The first step we’ll take is extracting the heart into a separate file.
This step starts at 4:05
underlying maskon the grey heart.
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
At this point, the two shapes should now be identical.
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
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
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
heartGreyshape over top of the
plusIconinto the artboard, positioned so its center is at the top-right of the artboard.
Let’s create the first state of the animation.
This step starts at 9:02
redLayerdown so that its top is slightly below the
Let’s create the second state now.
This step starts at 9:31
redLayerup until the
Now your design file is ready to animate in Flow.
This step starts at 10:11
There we go! We have a basic animation that we can now tweak.
In the next screen cast we’re gonna animate the ✱✱✱✱ out of this little heart.
result(s) found for “”.