Prototyping an E-Commerce App in Flinto: Part 2 of 2
In this 2 Part Tutorial we’ll be prototyping the design for a fictional E-Commerce iOS App
Please Note: This is a scaled down version of the Chapter available in my new guide Sketch App Essentials. In the full chapter you will be shown how to prototype 12 screens inside of Flinto, instead of just the 6 covered here (with even more detailed Transitions).
If you missed it, you can check out Part One of the Tutorial Series here…
Before we make a start on Part Two, make sure you have the following applications, and assets installed…
- Tutorial Assets (includes Sketch file to import into Flinto)
- Raleway and Open Sans fonts*
* You can find these in the Tutorial Assets/Fonts folder.
Applications, and assets at the ready? Cool! Let’s go ahead and finish up the tutorial.
Between this, and the Category (Hoodies) screen, is where we’ll be doing the bulk of the Transition work in Flinto. We will be creating some pretty sweet animations in the process. Hold on tight…
Let’s start with a link from one of our products to the Item Description screen.
With our product item having a much larger tap area than previous elements we have dealt with in this chapter, we can simply select the product group in the Layers Panel and click (F) to create a link.
Quick Tip: You may be thinking ‘F to create a link? Not the most obvious letter choice for this type of keyboard shortcut’. Just think ‘F for Flinto’.
Drag the Link Line across to the Item Description screen, click to bring up the Gesture/Transition window, select the Tap gesture, choose the Flip Right Transition, and click Done.
Once again, we do have content that far exceeds the height of the iPhone 6 screen, so we will need to create a Scroll Group for that content.
Select the Content group in the Layers Panel, and then either click the Scroll Group icon in the Toolbar, or use the shortcut (Alt + Cmd + G) to create a new Scroll Group.
So the scroll content does not get cut off too early at the top (and scrolls up, and under the Category Navigation), select one of the sizing handles at the top of the Scroll Group, then drag the sizing handle up, until it snaps to the bottom of the Category Navigation.
Do the same for the left of the scroll content (all will be revealed shortly). Select one of the sizing handles at the left of the Scroll Group, then drag it to the left edge of the screen.
When you Preview (Cmd + P) you may notice that the bottom of the screen does not have enough whitespace. Let’s fix that up quick-sharpish!
At the bottom of the Scroll Group, select the round sizing handle, and pull it down toward the bottom of the screen. Have a play around with this until you’re perfectly happy with the result.
Now for the best part, and a little trickier it has to be said.
We’re going to create a Transition between this screen, and the Category (Hoodies) screen. And we will be creating a link for this in two places on this screen. The first one will be on the Category Navigation for when a user clicks on the Hoodies menu item, and the second one will be when a user swipes on the content below that. Sound ok? It will be. Let me guide you through it.
Let’s deal with the Category Navigation link first…
Draw a link (D) around the Hoodies menu item, and drag the Link Line across to the Category (Hoodies) screen. Then click to bring up the Gesture/Transition window. Select the Tap gesture, and click New Transition.
In the Transition Designer, Select the End Screen by clicking on the red border around it, and then dragging it on top of the Start Screen. Remember to take note of those red guidelines to align things perfectly.
Quick Tip: If I’m going to be moving an element in the Transition Designer (and especially if I’ve placed one screen on top of the other), I prefer to select it first in the Layers Panel, and then move it around in the screen area. This way you know exactly which screen (Start, or End) you are working with at that current time, and that you’ve selected the correct element.
Now, things may be looking a little odd currently on the screen, but we will soon remedy that.
We of course want to hide most of the elements on the End Screen which are currently visible, so let’s adjust those.
Select the Header group on the End Screen…
…and reduce the Opacity to 0%.
Give things a quick try (Space, or Shift + Space), and you’ll see a simple fade between the two screen Headers.
Now for the Category Navigation, where we want a transition between the Tees, and Hoodies menu items, with the Active Marker sliding between those two items. This is where we will be using another great feature of Flinto called Connect Layers.
Let’s start with the Active Marker first.
In the Layers panel, select the Active Marker on the Start Screen, then hold (Cmd), and select the Active Marker on the End Screen.
You will now see the Connect Layers option become active in the Toolbar.
Click this, and you will see the two layers highlighted with a link icon in the Layers Panel to show you that they are now connected.
From the Connected Layer panel, change the Behaviour to Crossfade.
Then give it a quick try (Space, or Shift + Space). Pretty cool right?
From the Flinto documentation:
Flinto doesn’t keep track of layers between screens automatically. That means if you have a small photo on one screen, and a large version of it on another screen, the small layer won’t automatically scale up to the large version. This can be surprising at first, but it allows more flexibility, and allows a big reduction in the complexity of your prototypes. And fortunately, we have an easy to way to connect layers and achieve this behaviour.
You can indicate that two layers from different screens are connected in a transition and they will be automatically be animated.
We’re going to repeat this behaviour for the Tees, and Hoodies menu items, so go ahead and follow the steps I just showed you to achieve this. I’ll be here when you get back…
All done? Awesome!
For the Content group, we want the T-Shirts to be visible at the start of our Transition, and the Hoodies to be off-canvas, and slide in from the right at the end of the Transition. Let’s make that a reality folks…
On the End Screen, choose the Content group, then hold (Shift), and pull it to the right, and out of the screen area.
We also want the Hoodies to fade in gradually (this effect will be more noticeable in the next part), so reduce the Opacity down to around 10%. You can take it down to 0% if you want, I’ll leave it up to you.
At the end of our Transition we want the T-Shirts to slide out to the left, and fade also. To do this, make sure you are at the end of the Transition by making note of the Preview Control position.
Then, similar to what we did with the Hoodies, select the Content group in the Start Screen, and then hold (Shift), and pull it to the left, and out of the screen area. Reduce the Opacity down to around 10%.
Give the new Transition a name (i.e. Category Navigate), and click Save & Exit.
Now we have that Transition saved, we can go ahead and easily re-use it in other parts of our screen. And that’s what we’re going to do.
On the Category (Tees) screen, draw a link (D) to cover the whole Content area, and drag the Link Line across to the Category (Hoodies) screen, then click to bring up the Gesture/Transition window.
Select the Left Swipe gesture, choose the Transition we just created (i.e. Category Navigate), and click Done.
Check out the Preview (Cmd + P) to see this Transition in action. Too cool for school!
Of course, once you Transition to the Category (Hoodies) screen you’re kind of stuck! Not a problem. We’re going to hop on over to our Category (Hoodies) screen in the next section, and add some Reverse Transitions.
But quickly, before we do that. Select the Content group, and create a new Scroll Group (Alt + Cmd + G). Remember to adjust those sizing handles (top, right, bottom, and left) so the scrollable area does not clip the content.
Draw a link (D) around the Tees menu item, drag the Link Line across to the Category (Tees) screen, and click to bring up the Gesture/Transition window.
Select the Tap gesture, choose the Transition we created earlier (i.e. Category Navigate), click on the Reverse icon at the bottom of the window, and click Done.
Give that a quick whirl with Preview (Cmd + P), and you’ll see you can now navigate between the menu items. The Reverse Transition function is working its magic! Let’s use it one more time on this screen.
Draw a link (D) to cover the Content area, drag the Link Line across to the Category (Tees) screen, and click to bring up the Gesture/Transition window.
Select the Right Swipe gesture, choose the Transition we created earlier (i.e. Category Navigate), click on the Reverse icon at the bottom of the window, and click Done.
Preview those Transitions (Cmd + P). Looking better right? Indeed.
Quick Tip: When working on a project in Flinto, and things are getting a little hotspot/link crazy (i.e. There’s blue squares everywhere). Use the shortcut (Cmd + L) to show/hide those links.
Hopefully you can now appreciate what a powerful tool Flinto is, and how well it works alongside Sketch. Once you’ve had a few run-throughs with this fantastic tool, it makes the prototyping stage of your workflow a breeze, and a much more enjoyable one to boot.
Thanks for reading the article,
If you’re a UI/UX Designer you really need to check out my new project…
Your UI/UX needs, all in one place.
Check it out, and join my Mailing List to receive a Free copy of my guide to improving your UI skills with Sketch…