10 minutes

Basics, Sketch, Multiple Timelines

Prepare a Sketch File | Check Box (1/3)

Learn how to take an existing Sketch design, then restructure and rename its layers and artboards to be animatable.

First…

Grab the files

“Your” Existing Design

So, you’ve been working on a very nice design like the one below.

There are a few styles for a button with a checkbox, and you’ve finally decided to go with the light version.

You’ve also got a concept for what the animation is going to look like…

So, where do you start…?

Isolate

The first thing you need to do is isolate the layers that you’re going to animate.

1. Create a new Sketch file
2. In concepts.sketch copy the two light artboards
3. Paste the artboards into the new sketch file
4. Delete all the layers except for a single set (we don’t need duplicates)
5. Rename the artboards to start and end
6. Ungroup the groups in both artboards
7. Delete the 15 label in both artboards

Tweak

There’s a particular effect we want to achieve: the checkmark should animate in. To do this, we need the shape of the checkmark to be a vector.

On the end artboard…

1. Using the Vector tool, trace the checkmark
2. Thicken the vector to 2pt
3. Change the border color to white
4. Delete the original shape

Here’s what it looks like after step 2, above…

After step 4, your design should look almost identical to the original layout.

This step will allow us to get fancy when we animate.

Rename

The next step is to rename your layers, and rebuild one of the artboards (if necessary).

In software, you need to have all your views created at the same time – even if they're not currently visible. So, we need to do the same thing in Flow.

For the design file you’re working from, you definitely need to restructure the start artboard. In fact, we can essentially scrap the start artboard altogether because it is missing many layers compared to the end artboard.

Rename all the layers like this:

• Path 2 > checkmark
• Button 1 copy > titleLabel
• Rectangle 2 copy > innerCheckBox
• Rectangle 2 copy > outerCheckBox
• Rectangle copy > background

Rebuild

Now, instead of preserving our original design…

1. Duplicate the end artboard
2. Rename end copy to start
3. For outerCheckBox change its opacity to 0 and scale its size to closely match that of innerCheckBox
4. For innerCheckBox change its fill opacity to 0 and its border color to match the one in the original start artboard
5. Delete the original start artboard

Your artboards are now ready to animate.

Sometimes its easier to rebuild small components than to morph an original design into an animatable state.

New Artboards

The last step before animating is to create entirely new artboards for the check box and background. The reason for this is because in code the check box will be its own view, as will be the background. Therefore, it’s cleaner and easier to have them be independent of one another.

Check Box

1. Create an artboard 26x26 pts.
2. Copy the checkbox layers from end into the artboard.
3. Rename the artboard to checkBoxEnd
4. Create a second artboard of the same size.
5. Copy the checkbox layers from start.
6. Select the new artboard and paste the layers.
7. Center the layers to the artboard.
8. Rename the artboard to checkBox

Background

1. Select start and end.
2. Duplicate them.
3. Rename them to background and backgroundEnd, respectively.
4. In both new artboards, delete everything except the background layer.
5. In background set the frame of the layer to x = 6, y = 6, width = 18, height = 30

Now you’re ready to animate!

Save your design file as: checkBoxAnimatable.sketch

Walkthrough

Here is a quick vid of all the steps above.

❤︎