How to build a material design prototype using Sketch and Pixate - Part Three
In Part 2 of the series, we looked at getting our assets from Sketch into Pixate and creating a simple login prototype.
In this final and concluding Part 3, we’re going to step it up a notch and produce a more detailed prototype. You should have completed Part 1 and Part 2 before you start this, so if you haven’t already go and do them first.
I’ve updated the Sketch assets so that they include all that you need for Part 3, your job is to just get them all exported. Remember to export them at 3x so that they will look good on your phone. Feel free to customise them to your liking, just try and keep the sizing the same so that any measurements used in the tutorial are correct.
Let’s drawer on some inspiration
Lets start with adding a navigation drawer to our prototype. The navigation drawer is a common design pattern in apps today. It sometimes seems to rub people the wrong way but it’s still prevalent.
Hide the Login Screen by pressing the eye that appears when hovering over it in the layer menu. Create a new layer called “Navigation Drawer”. This will need to be 340x640, just like the sizing in the Sketch project. This includes 36 pixels of padding used to register swiping. This is so that we can pull the drawer out. The Navigation Drawer needs to be placed to the left of Login Screen so that we can swipe it in and out. The Navigation Drawer layer X needs to be -304. This is so that the handle area we accounted for can be swiped. Also, make sure to change the “Appearance” of the layer to make it transparent or there will be a grey bar to the right of the Navigation Drawer. Finally add the "Nav Drawer with 36dp drag area" image that you exported to the layer.
So now we have the drawer on screen we can add a “Drag” interaction so it can be swiped/dragged out. Click and drag the “Drag” interaction onto the Navigation Drawer layer. When you click on the Navigation Drawer, you should see “Drag” in the “Interactions” attribute in the right-hand menu.
Let’s configure the “Drag” interaction. We only want the Navigation Drawer to move horizontally so select “Horizontal” on the “Move w/Drag” menu. We now need to set a maximum that the Navigation Drawer can travel right. If we don’t we could drag the drawer all the way across the screen. In the first “Reference Edge” option make sure “Left” is selected and enter “-304” in the “Min position” box. This ensures the drawer never goes off screen to the point where we can’t drag it back in. Using the second “Reference Edge” option, first select “Right” and then enter “340” in “Max Position”. This will stop the Navigation Drawer when its X gets to 340 when we’re dragging. With everything setup you should have something like this:
Drawing it out
We’ll add one more feature to our Navigation Drawer. This is so that when moving the drawer back we can let go of it earlier. It will then go offscreen automatically, meaning we don’t have to drag it all the way to the left.
We need a “Move” animation for this, so drag this onto the Navigation Drawer. We’re going to name this interaction so we’re clearer on what it does. Name it “Put back in place”. This “Move” needs to be based on the Navigation Drawer “Drag Release”. This is so the movement happens when the user has stopped dragging. Our animation has to be “With duration to final value”. Now we need our “IF” condition. We’re going to say that if the drawer is less than 340 we want the drawer to animate off screen. We then need to tell it where we want the drawer to animate to via the “Move To”. Select “Left” and then in the value box enter “-304”. Lastly, select “ease out” for “Easing Curve” and leave the default type to “quadratic”. this should make our drawer move back in a more natural fashion.
Ok time to test it out!
When we drag the drawer to the right it should stick in place. When we drag a bit left and let go it should move off screen. There’s more you could do to make it an accurate representation of the real navigation drawer, but that’s something you can explore yourself.
The Home Screen
Right, we’re going to create our Home Screen. The Home Screen will consist of two tabs, Versions and In Words. Versions will hold a list of Android versions that will be scrollable. In Words will contain a bit of Dessert Ipsum for some content.
The first task is to get all the assets exported from the updated Sketch file for the Home Screen. The assets need to be exported at 3x. If you haven’t already you’ll need:
- app and status bar
- versions tab selected
- in words tab selected
- tab indicator
- Version List
- In Words Content
Go back to Pixate and import the exported assets.
We can now move on to building. Add a new layer called “Home Screen”. Resize it to the same size of the Login Screen, 360x640. Make sure the new layer covers the whole of the Login Screen. We’ll worry about that later.
Now we need to add a new layer called “App and Status Bar”. This should be part of the Home Screen layer. Add the “app and status bar“ image we exported from Sketch using the properties menu. Its size will need to be 360x136 and aligned to the top. Why 136 high instead of 128 as in the Sketch file? Well we need to account for the shadow, which Sketch ignores. Set the colour to transparent so that we can avoid any background grey seeping through. Ok you should have something like this:
Just Tab it in
Let’s get the tabs in now. We’re also going to add the functionality to switch between them.
We need two layers, both 180x48. Name one “Versions Tab Selected” and the other “Background Tab Selected”. Make sure they are both part of the Home Screen layer. The Versions Tab Selected should be positioned at 0, 80. The Background Selected Tab needs a position of 180, 80.
We’re missing one thing, the tab indicator. Add a new layer, call it “Tab Indicator” and make it 180x2 and make sure it’s part of the Home Screen layer. This layer should be first in the layers hierarchy; above both the Versions Tab and Background Tab. This means it will get drawn on top and we can see it. You then need to add the “tab indicator” image asset we exported earlier. The Tab Indicator needs a position of 126, 0.
Animating the indicator
Ok so now we have all the items in place for us to get the tabs working like they would in a real app. What we want is the indicator to move to the respective tab that gets tapped. We’ll start with when the Background Tab gets tapped.
Drag a “Tap” interaction to the Background Tab. Now we need to configure the Tab Indicator based on this tap interaction. Drag a “Move” animation to the Tab Indicator. Name this animation “Move on Background tap” so we know what this animation does. Select the “Based On” drop-down and select “Background Tab”. Under “Move To” we want to select “Right” and enter the value “360”. This will position our indicator under the Background Tab. Next, we need to select the “Easing Curve” so the tab movement is more natural. Change this to “ease out” and leave it set as “quadratic”. The last thing, change the “Duration” to “0.1” as we want to get it moved quickly like a real tab indicator. Here’s what your settings should look like:
And here’s what it looks like in action:
Now we need to get the Tab Indicator to move back when the Versions Tab gets tapped. This is just a repeat process from before, only using the Versions Tab. This is an exercise I’ll leave to you. Just remember to drag a “Tap” interaction to the Versions Tab otherwise you won’t see it in the drop-down menu for “Based On”.
Upon completion, you should have an indicator that moves back and forth when you tap the tabs!
You see me scrolling
Now lets move on to putting a scrollable list into the app. We’ve already got the exported “Version List” asset from earlier so we can get started.
Create a new layer named “Version List”. The Version List needs to part of the Home Screen layer and is 360x1232. This will make it longer than the screen but don’t worry about this, Pixate will help us out. Position the Version List just below the toolbar, it should snap into place.
Now we need to add the ability to scroll the list. Now you might think that we need to just add a “Scroll” interaction to the Version List. But what we actually have to do is define an area that can be scrolled.
You’ll first need to hide the Version List to make this a bit easier. We need to create a new layer called “Scroll” that’s within the Home Screen layer. This layer needs to start below the app bar and tabs and fill to the bottom. Its size is 360x512. Its x=0 and y=128. This should give you a grey box onscreen. Now drag the Version List on to the Scroll Content layer to make it part of it. Unhide the Version List and everything should look the same as before. Now if you run the prototype you should be able to scroll the Version List up and down.
So far we have a reasonably functional prototype but we’re still missing the ability to switch tabs. Let’s put that in now.
We need a new layer called “In Words” which needs to be part of the Home Screen layer. This layer should be positioned to the right of the Home Screen and sized 360x512. Now add the “In Words Content” image to the layer. You should have something like this:
We’ll need to add a new layer for our view pager. It will enable moving from one tab to another via a simple drag from the screen edges, just like a real app. This layer needs to be the lowest in the hierarchy of layers. It also needs to have the In Words and Scroll Content added to it so it knows what content it needs to move.
Drag a “Scroll” interaction onto the View Pager layer. Within this “Scroll” menu there should be an attribute called “Paging Mode”. Make sure you select “paging” from the drop down menu. If all has gone well you should now be able to swipe between screens!
Moving the tab indicator on swipe
We have one little thing we have left to do to finish the Home Screen. That’s to move the tab indicator when swiping between tabs.
Drag a “Move” animation onto the Tab Indicator and name it “Move on Swipe Left”. Here are the settings you need for it:
Ok so here’s what we have. We base the movement of the tab on the View Pager and we only act when the scrolling has ended. In our “IF” section we check to see if we are 360 away from our starting X, which would mean that we’re viewing the next tab. When this happens we want to move the left to 180 which should place the indicator underneath the In Words tab. Next, we change the “Easing Curve” to “ease out” for a more natural movement just like before. Lastly, we change the duration to 0.1 so that the tab moves across as quick as possible.
If you now swipe the screen the tab should now move too!
Now all you need to do is reverse this process to move the tab back when you swipe right. I’ll leave this as an exercise for you to do. I’ll give you this one line to help you out for the “IF” condition:
view_pager.contentX == 0
When you have this figured out your Tab Indicator should move back and forth as you swipe between tabs:
All we need to do with our prototype is provide a transition from the Login Screen to the Home Screen. You’ll need to make the Login Screen visible in Pixate and that it is above Home Screen in the layer hierarchy.
We’re going to add a simple scale animation when the user presses the login button. Drag a “Scale” animation onto the Login Screen layer. Make sure it’s on the whole Login Screen layer and not just a component of it. Here’s the settings you want for the animation:
We’ve based the animation on when the login button gets tapped, which only happens once the user has tapped both input fields. We’re scaling by factor and linking the X and Y (because we want it to scale down evenly). We set the “Scale” to “0x” which means that the Login Screen will disappear. Then we set “ease out” and the “Duration” to “0.3” so that the animation doesn’t happen too quick.
Here’s what it should look like:
Finally, lets make sure that the Navigation Drawer cannot be swiped out on the Login Screen. Here are the settings we need:
In the “Properties” menu for the Navigation Drawer reduce it’s “Opacity” to “0%”. This will mean it cannot be swiped on the Login Screen. Next, drag a “Fade” animation onto the Navigation Drawer layer. Just like the previous scale animation for the Login Screen, we want this fade animation based on the login button press. We also want it at 100% so we can see the Navigation Drawer completely. We delay the animation for 0.3 seconds so that the scale animation for the Login Screen can play out.
And that’s the final step! If all’s gone well you should have a simple material design prototype app that you can show off!
I hope you’ve enjoyed this tutorial series. There is a lot more you can do with Sketch and Pixate that can take you to the next level. If you’ve enjoyed using these tools I implore you to seek out more tutorials on them. There are a few things that you could do to improve this prototype such as:
- Implement screens based on those in the navigation drawer such as the logout button
- Make detail screens for each Android version in the list
- Improve the animation for removing the Login Screen
- Improve the Navigation Drawer movement e.g. open when only dragged halfway
- Utilise the unselected tabs in the Sketch assets file and make them show when the tab is not selected
If you do improve the prototype or come up with something better based off this tutorial then please get in touch with me and let me know. It’ll be great to see what you come up with. Find Eden on twitter and show them off!
Thanks for taking the time to follow along with the series and good luck with Sketch and Pixate!