Published on | Prototyping: From UX to Front End — Medium Volodymyr Safonov

Here I wanna talk a little about how to make it easier to animate your interfaces in Principle.

I’ve seen many times how people try to animate simple things the hard way and actually they often fail or spend tons of precious time. I’ve also been thinking a lot about it and even made a successful (at least I think it was so) masterclass on animating in Principle based on my conclusions. I won’t mention obvious things like ‘you need to plan your animation first’, etc.

I believe these are the best ways to save your head from pain while animating and now I want to share them with you and hope to get your feedback.

How Principle works

First of all I want to explain how the simplest way to animate in Principle works (you can skip this part):

You have two artboards.
They differ a little one from another.
Principle makes the magic and transitions one screen to another with default speed and animation curves which are able to change now.

Of course there are some circumstances you need to satisfy. For example: names of similar layers should be similar if you want them to transit one to another.

Again, if you need to turn a circle to a rectangle:

You need to make two artboards: on one you draw a circle (rectangle with rounded corners), on another you make simple rectangle with similar names.
You need to connect this artboards with, for example, auto triggered transition from one to another and vice versa.
Voila — your circle transforms into rectangle and back. Now you have settings to tune the speed and animation curves in animation pane.

Layout to make circle transform into rectangle and back.

All of this changes you can do with any figure characteristics too. E.g. it can be a circle or a rectangle with zero opacity, random size, position, etc. which will be animated.

Layout to make different options be changeable.

And one more important thing: to animate something smoothly you need to prepare the move on a previous screen. A layer should exist on a previous artboard even if it’s not visible there, so your animation won’t blink. We will check it with example later.

Principle 1: Never use ‘Import from Sketch’

So, keeping all of this over in mind — what should we do to animate Apple Music docked player opening on track tap?

At least we need to download some nice free iOS ui-kit for Sketch. I prefer this one.

Screen with docked Apple Music player from ui-kit.

What should we do with it now? Seems like we have to take the screen with the docked player from ui-kit and animate it. Now we come to the most interesting part. What’s the most popular action everybody does in this case?

Based on my experience, most of the users press “Import from Sketch” button. And after that everybody tries to handle all the layers they get in Principle.

Layers mess after direct import from Sketch.

I propose not to use Import from Sketch. At least either before you know for sure why you need to use it in your case or you know importing part of Principle documentation by heart. The easiest way for me is to plan my animation and then export just a few layer groups I really need as *.png.

For example to animate scrolling landing I don’t need every part of it. I can make one *.png in quality I need and animate it in Principle easily.

To animate Apple Music docked player opening we don’t need all the parts of that screen. We actually only need the following *.png’s:

Navbar layer (to hide the player behind).
Tracklist screen layer without navbar.
Docked player.

Just three *.png’s imported.

Maybe, docked player is too easy and far from perfect example, but my goal is to demonstrate the approach. Also, I want everybody to have an opportunity to try it so in example I use free and accessible ui-kit on well known mobile operating system — iOS, especially for Mac users.

Now to animate it we need:

to make artboard with tracklist screen layer, navbar and docked player;
to duplicate this artboard;
to hide the player behind the navbar simply move it down on the first artboard (to prepare the movement like we talk earlier, otherwise our player will just appear instantly).

The circumstances we need to satisfy are:

similar names of similar layers on different artboards;
the correct order of the layers — player should be in the center and the order should not be changed from artboard to artboard;
all the layers should exist on both artboards that way we will be able to animate them. (Remember, the base Principle animation is based on difference between the layers properties).

Layout to make player appear and disappear.

Now, if we run our animation the docked player will change its position from the way it was on the first artboard to the way it is on the second. All is left to do is to calibrate the timing, add a slight opacity to the hidden player if needed, etc.

There is a method to merge the complex groups from Sketch on importing simply with ‘*’ symbol, but in most cases it only makes sense when you have a complex animation you need to update frequently.

Principle 2: It’s not a real app, fake it

My second observation is that people often try to make a full weight prototype out from their Principle project. And that’s when they only need a simple video showing an app behavior to teammates/stakeholders/users.

I’ll explain using a metaphor: it’s like when you need to film a movie you are trying to turn a scenario into the living truth.

So, just keep this in mind and try to make your animation simple. Let it only pretend to be real.

Not every time you need the clickable trigger zones in their right places — there are plenty of cases when you can make the whole screen clickable and hide the cursor on exported video. Not every time you need all the features available on one first screen. And here we come to the next Principle principle.

Principle 3: One action = one screen

It’s simple.

Don’t try to make an InVision prototype from your animation. Just plan actions sequence you need like a scenario and make a movie. This will save you a lot of time and would make your life much easier.

Simple action sequence i used to animate my Louder.me project (currently in Beta).

P.S.: This is my first article here so I hope that it will help you and will give you some new thoughts. I’d really appreciate your feedback, comments and claps 👏.

And feel free to drop me a line on Facebook. Cheers!

Principle principles: how not to go mad and make animation quickly and easily was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Principle principles: how not to go mad and make animation quickly and easily

Cool stuff, every week

More Articles