How to animate prototypes using Principle and Sketch

Lately, I was working on designing a pleasant in-app purchasing experience. Nearly all of the time I use Sketch and InVision to create and prototype the experience but this time I want to showcase an animation I wanted users to experience. Anytime I want to create an animation, I will use the Principle app for Mac — Yeah, yeah, I know about InVision Studio.

I want to share how easy it is to use Sketch & Principle to create app animations and share them with the rest of the team.

We’re going to turn the image below from a static mockup to a living prototype that we can share with the team.

‍

Before we begin…

I’m not going to go through the step by step of how I create user interfaces in Sketch so if you’re looking for that, you’re reading the wrong article. Now, I’m gonna give you a brief reason why I use Sketch & Principle.

I use Sketch for all my UI design. It has an interface that is intuitive, and the plugins help to power my workflow.

I use Principle when I want to animate interactions. It is super easy to use and they’re plenty of tutorials so you can master it quickly.

Ok, that’s all the boring stuff over and done with.

‍

Preparing the Sketch file…

Before importing the designs into Principle, I like to tidy things up so that it is easy to work with and to increase performance.

Firstly, I want to reduce the number of layers that get imported to Principle, and we can do this by appending the layer name in Sketch with principle flatten. This will tell Principle to import the layer as a single rasterized image.

Next, I want to make sure that Principle will correctly map animations by ensuring that layers have a unique name — if two layers have the same name, Principle will automatically animate them during a transition.

Insert image here

Now we’re ready to import to Principle.

‍

Importing the designs…

Importing into Principle is an easy task, so click on the “Import” button and select the Sketch document, then click the “Import Page” button. I like to import at double resolution so that the design looks crisp.

Now that we’ve imported our design, we should have something like the following.

Click here to read more information about importing from sketch to principle.

‍

Animating…

Before we start animating, I’m going to lock the layers that I won’t be interacting with and duplicate the artboard to represent the start, middle and end states.

Now that I’ve done that we can begin the animation. We want this gallery images to rotate continuously and to do this we’re going to need to set an auto transition for State 1 to State 2 to State 3 and then loop back again.

To do this, I’m going to change the X position of the gallery on artboards 2 and 3. Then I set an auto transition for each state.

Now we need to sort out the timing of the transitions. For states 1 and 2, I’ve set the animation to run for 4 seconds, and I’ve set these to linear so that it is a constant smooth transition.

Lastly, I’ve created a new auto transition from State 3 to State 1, and I’ve set it to not animate. This will allow for the continuous loop.

That is our animation created, now to try it out.

‍

Trying it out…

The beauty about Principle is it has the Principle Mirror app for iOS so you can see your animations on a real device. But you can also try them out in the Principle app or export it as a mac app.

The result is you’ve got a prototype that mimics real interactions that you want to achieve in your live app. This will help you and your team to test the idea, and iterate on it. And it was super easy to do and share with the team.

You can see the prototype in action on my Dribbble account. Click this link to access it.

‍

Download it…

Like the example but are struggling to repeat it? Then download the files below so you can try it out on your device.

Download Art Collectors Animation Files For Sketch & Principle.

Principle has a wonderful collection of tutorials for you to practice with.

‍