August 1, 2019
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.
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.
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 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.
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.
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.
Like the example but are struggling to repeat it? Then download the files below so you can try it out on your device.
If you enjoyed this article then you may want to read my other articles.
Fill in the form below, and I'll get back to you within 24 hours.