In this tutorial, I’ll teach you how to create an animated prototype of your mobile application design. The prototype will look and feel like a real application on your phone; you’ll be able to navigate and scroll through your design, using gestures and custom animations.
At the end of this tutorial, you will be able to make an animated prototype version of any application design using Pixate. Let’s get started!
Tutorial Assets
For this tutorial you will need three things to follow along:
- The iOS Fitness Application Sketch file from my previous tutorial
- A free account in Pixate
- The free Pixate application from App Store
Why Use Pixate?
In my view, Pixate is the best tool available to designers to create completely functional, custom animated mobile application prototypes, without writing a single line of code.
Unlike other prototyping tools, such as Flinto, or Marvel, Pixate lets you separate layers and embed interactions, such as Drag, Tap, Double Tap, Scroll, Pinch and more.
The prototype itself exists on the web. During this tutorial we will be using the web version of Pixate, but we will get the end results in a native application on our phone, which provides a great fluid experience.
1. New Pixate Project
Before we can start creating our first prototype, we have to setup a new project in Pixate.
Step 1
After you’ve logged into your account, click on the New Project button, then select the New Prototype option.
Step 2
Here we can select the specific type of device we’re designing for. In this case, let’s choose the iPhone 6, since we designed the fitness application for that particular device in Sketch.
Note: we can also select smartwatch screen sizes like the Apple Watch, LG G Watch or the Moto 360.
2. Importing Assets to Pixate
Pixate allows us to animate every single object in our prototype, based on various events and interactions, like the screen loading, tap, double tap or scroll. This also means that we have to separately export the elements we want to animate in our prototype.
Step 1
Let’s open our Sketch file and start exporting every element one by one. If you look at the final prototype, you can see that in the case of the “GO screen” I separately exported the navigation bar, the tab bar, every single column of the weather forecast and the goal circles.
You should export in PNG, since it’s key to have transparent layers.
Tip: always focus on one screen at a time. At this point in the process, you should only export the layers of the “GO screen”, so it will be easier to work with and modify things on-the-go if necessary.
Step 2
Importing assets in Pixate is a question of draging and dropping the exported PNG files into the browser window:
Step 3
Now, it’s time to rebuild our screen in Pixate. This work can be done much quicker if we’re referring to the Inspector panel both in Pixate and Sketch. When this is the case, we just have to copy and paste the X and Y value of each element.
Note: keep in mind that our Sketch design was made at @2x resolution, while in Pixate we’re working with @1x resolution. This means that we have to divide every number from Sketch by 2 before applying to Pixate.
3. Animating the GO Screen
Let’s open the Pixate application on our iPhone, where we can see that our design has started to come together. From now on, every time we change something on the web application, it will be automatically synced to our phones.
Step 1
After selecting the first column of the weather forecast, we can see the types of animations available on the left side in our browser. Let’s drag & drop the Fade animation to the opposite side, the right sidebar.
Step 2
Now, we have to specify when we would like this animation to appear. Set the Based on values to *SCREEN*, Loaded.
This means that our animation will be played right after the first screen is loaded, which happens immediately when we run the prototype.
Step 3
Since our goal is to have a fade in effect, let’s set the initial opacity to 0% on the Properties panel, and to 100% on the Animations panel.
Step 4
At the bottom of the Animations panel we can also set the easing curve, the duration and the delay values.
You should set the duration between 0.2-0.4s, but there is no official way here, so I encourage you to play with these values until you feel they are just right.
Note: in my prototype, I preferred to use slightly slower animations, so you can see them more clearly. In a real project, I would recommend quicker and more subtle motion.
Step 5
Now let’s select the second column of the weather forecast and set exactly the same Fade animation as we did before, with only one difference: this time set the animation delay to be around 0.1-0.3s. This way the animations will be played in a sequence.
Continue with the exact same method for all elements you would like to add a Fade animation to, but don’t forget to continuously increase the value of the animation delay.
Step 6
Now let’s set up the interaction between the circles in the goal section. In order to be able to horizontally scroll between the goal rings, we have to import them as three separate PNG files.
After placing them in their correct position, let’s create a new layer in Pixate; necessary to enable horizontal scroll. On the Properties panel make sure you set the appearance to No image set. Before we add any interaction to this layer, we’ll add the goal rings PNG files to the new layer on the Layers panel. In simple terms, this is similar to the Group tool in Sketch.
Now we can add a Drag interaction to this new layer and set Horizontal scrolling with minimum position: -255pt and maximum position: 120pt on the Animations panel.
Step 7
For the small bouncing effect during the horizontal scroll, I created a custom animation with special conditions. To start, add a Move animation to the newest layer, which contains all the the ring layers.
Now, in the Animations panel set the Based on value to Goal settings and Drag Release.
For the first IF condition I used the following formula: goal_settings.x > -255 && goal_settings.x < -67, which means that if the position of the goal group layer (layer ID: goal_settings) is higher than -255 pt and smaller than -67 pt, it will move the left side of the layer to the -67 pt point.
For the animation I used a Spring easing curve with a friction value of 25 and tension of 600.
My second IF condition is: goal_settings.x <= -67 && goal_settings.x > -255, then move the left side of the layer to -255 pt.
The third condition is: goal_settings.x > -67 && goal_settings.x < 150, then move the left side of the layer to 150 pt.
Last, but not least, the last IF statement is: goal_settings.x < 150 && goal_settings.x > -67, which will move the left side of the layer to -67 pt.
Note: I know this looks a bit complicated for the first time, but I encourage you to copy & paste my solution and try it, then change something and try it again. My conditions are not in any way perfect, so you can even improve and tweak them, until they feel right for you.
Step 8
As we did with the goal rings, let’s create another new layer and put every layer we have so far into it. We’re just grouping together the layers of the “GO screen” right now.
4. Animating the Challenges Screen
Before we start to import and rebuild the “Challenges screen” in Pixate, we have to create a new layer, which will function as the group layer for every element on this screen. Let’s place this right next to the “GO screen” without any padding or gap between them.
Step 1
After we imported and rebuilt our screen, layer by layer, we need to set the vertical scroll for the challenges cards.
Let’s create a new layer with no image background and add our cards layers to it. Vertical scroll is even easier than horizontal scroll, because the only thing we have to do is to add a Scroll interaction to this new layer.
Step 2
In order to see the “Challenges screen” on our iPhone as well, we have to go back to our “GO screen” and add a new rectangle layer at the top of the Challenges button on the tab bar.
Set the appearance to no image fill and add a Tap interaction to it. Now let’s go back, select our Challenges group layer, which contains every element on the “Challenges screen” and add a Move animation to it.
The only remaining things we have to do, is to set the Based on event to the button we recently added to our “GO screen” with Tap interaction and set the Move to value to 0 pt. Then when we press the challenges button on the “GO screen”, the Challenges group layer will move in to its proper place.
Step 3
To animate the challenges cards, we will use two animations, a Fade and a Move, at the same time. Make sure that you’ve set the Based on value to the Challenges button.
For the Fade animation, we use the same technique as with the GO screen, so let’s set the Opacity to 0% on the Properties panel and the Fade to valueto 100% on the Animations panel. For the duration I used 0.5s with a 0.2s delay.
Note: don’t forget to continuously increase the value of the delay for each card.
Our second animation is a Move animation. Just like in the case of the Fade animation, let’s set the Based on value to the Challenges button and use the exact same animation duration and delay as in the case of the Fade animation. Now, set the Move to Top value to 10px, which will move our challenge card 10px upwards, when the animation starts.
Since at the end of the animation, every challenge card will be 10px upwards, we have to move them 10px downwards on our Pixate canvas.
5. The Browse Challenges Section
Step 1
Let’s create a new layer once again, which will contain the Browse challenges section. As in the case of the My challenges section, let’s add a Scroll interaction to it.
Step 2
To be able to switch between the My challenges and Browse challenges sections, we have to create a new layer at the top of the Browse challenges title, which will work as a button. Set the layer fill to No image set and add a Tap interaction to it.
Now, if we go back to our Browse challenges group layer (created in the previous step) we can add a Fade animation to it based on this new button. So until we press the Browse challenges button, the opacity of the browse challenges section is 0%, and after the tap, it will be 100%.
Step 3
As a final step I added a Scale and Fade animation to the timeline progress bars in the Browse challenges section.
Note: don’t forget to use the exact same animation duration and delay values for the Fade and Scale animations.
6. Animating the Activities Screen
Before we start to animate the “Activities screen” we have to repeat a few steps performed in the case of “Challenges screen” as well.
Step 1
Let’s create a new layer right next to the “Challenges screen” without any padding. This layer will be the group layer for the elements on the “Activities screen”.
Step 2
Now let’s go back to our “GO screen” and create a new layer at the top of the Activities button on the tab bar. Add a Tap interaction to this new layer.
Go back to our Activities group layer and add a Move interaction to it based on our new button.
Step 3
Now add a Fade animation to every result on the Activities screen with a 0.4sanimation duration and a 0.1sanimation delay between the results.
Note: don’t forget to set the Based on value to “Activities button”, which we placed on the “GO screen”.
Step 4
Create another group layer and place every workout session within it, except the first one. We will need this for the Move down animation, since moving down only one layer is much easier, than moving down six or seven layers at once.
Now add a Tap interaction to the first workout session, then add a Move animation to the group layer we’ve just created. On the Animations panel set the Based on value to the first workout session and add a Move to Top value around 277pt. When we tap the first workout session, everything else will move down on the screen.
Step 5
For the workout detail view, I’ve only used Fade and Move animations based on tapping the first workout session.
At the beginning, just fade and move in the background, then the graph and finally the specific numbers and details of the workout.
You should play here a little with the animation durations and delays.
Congratulations!
You’re awesome! You’ve just created your first fully functioning, custom animated Pixate prototype. Having followed this tutorial, I hope that you are more confident in using Pixate for mobile application prototypes.
I’m curious to hear your views on this tutorial and feel free to ask any questions in the comments, I will be here to help and answer them.
