Quick and Simple Character Animation with Principle app

My first character animation for our company, Workpop.

After posting my first character animation to Dribbble, a few people wanted to know how I used Principle to create the animation. If you’re not familiar with Principle, it’s an easy way to create animated and interactive user interface designs; it also turns out to be an easy way to animate almost anything (not just interfaces).


Animating Your First Character

We’re going to make this friendly blob

First, we need to create a vector character in Sketch. You can use my example (along with the principle example), if you download the assets attached here: https://dribbble.com/shots/2780135-Quick-and-Simple-Character-Animation-with-Principle-app

Once you have your character laid out (I’m using sketch), make sure to group objects together so you can easily move them around in Principle (you can also group them in Principle if you choose). In this example, I’ve grouped the left/right arm, left/right leg, body, ground shadow, and flag. We’ll be moving them in Principle to create our animation.

Sketch layer groupings

Once your character is done and grouped in Sketch, open Principle and choose “Import”. This will import the artboard of your character from Sketch. Once imported, you’ll have a new artboard inside of Principle.

Our imported character from Sketch

Select the artboard and duplicate it 4 times. Connect each art board to the next and the last artboard to the first using “Auto”. This is what creates the animation. Each layer on each artboard will animate to the same layer name on the next artboard.

Connect each artboard to the next

Once all artboards are connected, select the arms, legs, body, and other grouped elements you’d like to move on artboard 2 and 4. In the example below, you can see how the 1st and 3rd artboards are the same and the 1st and 4th have slightly different positioning. This create a seamless loop. You could do only 2 artboards if you wanted an even simpler animation, but we’re going for gold here. :)

Our final animation

That’s it! Now, lets record the animation.

Recording our animation

Principle has a build in record tool. However over the animation preview, loops the animation. Unfortunately, Principle doesn’t have a simple way to start and stop the animation at exact times, so it’s difficult to record a perfect looping animation. The way, I’ve done it for now is to record to a gif one full animation cycle. Then, I import the gif into photoshop (or some other gif editing software) and remove frames so that the last frame is equal to the first. Re-save your gif and you’ll have a perfect loop!

Where to go from here?

This is an example of a quick and simple animation. I’m sure adding more frames, as well as carefully aligning and moving character parts could really bring this more to life. Principle offers a variety of options for animating and this only covered the most basic. If you create your own characters, please let me know in the comments — I’d love to see them!

We’re Hiring

If you happen to love Design + UX, we’re hiring a UX/UI Design lead at Workpop. Feel free to reach out and/or check out the position here: https://angel.co/workpop/jobs/47760-ui-ux-designer?utm_source=profile_module_job_listing


Like this article? Don’t forget to leave a heart and follow on twitter http://twitter.com/sethsandler

Show your support

Clapping shows how much you appreciated Seth Sandler’s story.