Learn how to take an existing Sketch design, then restructure and rename its layers and artboards to be animatable.
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…?
The first thing you need to do is isolate the layers that you’re going to animate.
concepts.sketchcopy the two light artboards
15label in both artboards
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.
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.
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
Rename all the layers like this:
Now, instead of preserving our original design…
outerCheckBoxchange its opacity to
0and scale its size to closely match that of
innerCheckBoxchange its fill opacity to
0and its border color to match the one in the original
Your artboards are now ready to animate.
Sometimes its easier to rebuild small components than to morph an original design into an animatable state.
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.
endinto the artboard.
backgroundset 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
Here is a quick vid of all the steps above.