Prototyping an E-Commerce App in Flinto: Part 1 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).
Flinto for Mac allows you to create small interactions, and animations, all the way through to building comprehensive flows for multi-screen apps. It follows a similar aesthetic to Sketch, and even offers up similar tools to what you can find in the aforementioned tool. Heck it even has some of the same keyboard shortcuts. It’s as though they were cast from the same mould, and that’s always a bonus.
It’s intuitive for beginners, and a breeze to use when you’ve become accustomed to it, with menus, tools, and options kept to a minimum. Enough to enable you to create impressive prototypes, and avoid venturing into the world of ‘feature-overload’ which becomes an unwelcome distraction.
The key feature with Flinto is the Transition Designer. If you’re the kind of designer who has an aversion to timelines, and programming, the Transition Designer will bring a very big smile to your face. It’s powerful beast, and the precise control you have over each layer enables you to create some very complex transitions, which are then reusable throughout your project.
Let’s go ahead and take our Sketch design to Flinto, and put it through its Prototyping paces…
Before we make a start on Part One, 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 prototype some awesome in Flinto.
Opening up Flinto
After opening up Flinto, you’ll be presented with the splash screen, where you can go ahead and click on New Document. This, in turn opens up the New Document window (Yes, I know, the obvious has well, and truly been stated there).
Set the Device Type to iPhone 6, and click Create.
Quick Tip: Once you have your New Screen displayed, you can use the same Keyboard Shortcuts you’ve become accustomed to in Sketch…
- Zoom In Cmd + (+)
- Zoom Out Cmd + (-)
You can also click on the screen to have it center on the canvas when you zoom. Always handy that one.
You will find there are a lot of similar actions, and keyboard shortcuts to those that you’re used to in Sketch. Flinto does make the transition between the two applications feel very familiar, which is great.
We of course, won’t be needing the screen that has just been created, as we’re importing in the screens from Sketch. So delete it either by pressing the (Delete) key, or right-clicking on the screen, and choosing Delete.
From the Inspector Panel, leave the Document settings as they are, apart from the Background Color, change that to White #FFFFFF.
Remember to quickly save the new document, and give it a name for the Sketch plugin to reference very shortly. Something like Store — Ecommerce App would be perfect.
Jump on over to Sketch, and make sure you have the Sketch file open, ready to import into Flinto.
Choose Plugins > Send to Flinto from the Menu Bar, or use the Keyboard Shortcut (Shift + Ctrl + Cmd + F).
From the popup window, set the Scale to 200% (as we designed at 1x in Sketch, but want Flinto to scale our design up to 2x for the iPhone 6 Retina screen), and click Send.
Then in the next window, check that the Flinto file you saved earlier is selected, and click Merge.
Back in Flinto, you will see all your screens have been imported into the application, and from the Layers Panel you will see that the Layer/Group hierarchy has been preserved from your Sketch file.
Choose the menu item Center Canvas, and use the shortcut Cmd + (+), and Cmd + (-) so all of your screens are visible, and centered on the Canvas.
Please Note: If (in the Layers Panel) your screen names are not in the same sequence as they were in Sketch, you can easily click, and drag to re-order them correctly.
With the Splash screen being the Home screen of our app, we need to let Flinto know that. So with that screen selected, check the Home Screen option from Screen Properties in the Inspector Panel.
You will now see a small Home icon appear on both your screen, and in the Layers Panel.
Now, we’re going to add a timed transition from the Splash screen, to the Home screen. So select Timer Link in the Inspector, and enter the following settings…
- Timeout: 1000
- Target: Home
- Transition: Fade In
You will now see the Splash screen with a blue border around it, and the Home screen with a red border around it. This shows you that there is now a transition in place between those screens. Think of blue as the Start screen, and red as the End screen. Simple as that.
There is also the Link Line (that orange line, with the dots at each end) that shows you the connection between the two screens, and the Gesture icon which sits on top of the Link Line, that indicates, at a glance which gesture you have assigned. Clicking on that icon gives you immediate access to the Gesture and Transition options. You’re going to fall in love with the Link Line I promise.
Quick Tip: Now would be a good time to fire up the Preview window. I know there’s not much to see just yet, but from here on in you have the ability to view your changes as they happen. Click on the Preview icon in the Toolbar, or use the simple shortcut (Cmd + P).
If you haven’t already, you can also grab the Flinto App from the iOS App Store. “Always test on a real-world device when you can” that’s my motto. I like to use the Preview (Cmd + P) function for my initial run-through, and then switch to the iOS App after that. It’s entirely up to you.
With this screen, we will be creating some simple links, a scrollable area, and also putting the mighty Transition Designer to the test.
We’ll start with the links first, and create a Link through to our Sidebar Menu screen. And I’ll show you a couple of ways to achieve this.
You can select an element on the screen, and simply use Create Link (F), then drag the Link Line to the screen you want to link to.
Or, you can use Draw Link (D), which enables you to create a freeform link which you can create at any size you require, and is perfect for when you want to create links on smaller UI elements such as a Search icon, where you need the tap area to be a little bigger when using it on your iOS device. This is the method that we’ll stick with for most of this chapter.
Ok. Back to it.
Use Draw Link (D), to create a link hotspot around the Menu icon on our Home screen, and drag the Link Line to the Sidebar Menu screen. Then click to bring up the Gesture/Transition window. Select the Tap gesture, and click New Transition.
…and boom! We’re into the Transition Designer, where the really cool stuff happens.
The core feature in Flinto, and it’s most powerful, is the Transition Designer. This is a truly intuitive way of working with transitions between screens, and my personal preference compared to many of the ‘timeline’ based prototyping tools out there. It’s just such damn fun to work with.
From the Flinto Documentation…
Transitions are the most powerful and most fun part of Flinto. Creating your own animated transitions in the Transition Designer is easy. You should exercise restraint when creating transitions, it’s easy to get carried away with fancy effects.
The Transition Designer is a separate view from the canvas. It focuses on the two screens involved in the transition. After designing your transition, you can exit back to the canvas view and continue creating new screens and links.
To create a transition, you need to ensure that the incoming screen is not visible at the beginning of the transition, and the outgoing screen is not visible at the end of the transition. How you hide those screens is up to you. You can fade them out, move them outside the device area, scale them down, etc. Flinto will automatically animate the hidden screen into it’s final state based on how it appeared in the canvas.
Ok. Back to our project…
Two simple Keyboard Shortcuts before we dive further into the Transition Designer…
- Preview Transition: Space
- Preview Transition in Slow Motion: Shift + Space
Give them both a quick try now… Cool huh? Holding (Shift) to slow things down is great for when you want to fine-tune a transition (I use it a lot).
Ok. Back to our project…
You will of course see the two screens that we want to transition between, and you will also see these marked accordingly in the Layers Panel (Start Screen, and End Screen).
The transition that we want to achieve between the Home, and Sidebar Menu screen is where the Home screen darkens, and the menu slides in from the left hand side. This type of transition would be one that happens inside of a single screen when viewed on an iOS device, so to achieve this type of transition, drag the End Screen (Sidebar Menu) on top of the Start Screen (Home).
Quick Tip: You can select the whole screen by clicking on the red border around the screen, and then dragging it on top of the other screen. Take note of the red guidelines to align it perfectly.
Of course, you may now be thinking ‘But hang on I don’t want to show the menu, or darken the screen at the start of the transition’. Of course you don’t. And this is where you can use a few different methods to hide elements from your End Screen (Sidebar Menu), at the start of the Transition.
So make sure you have the End Screen (Sidebar Menu) selected, and then from the Layers Panel, select the Full Screen Overlay layer.
And then from the Inspector Panel, reduce the Opacity of that layer down to 0%. And that’s it.
Give it a quick try (Space, or Shift + Space). Of course, not a great deal is happening just yet. The screen darkens, and erm, yes that’s about it. But hopefully it gives you an idea of what you need to do when you are creating Transitions that are happening ‘in screen’. It may seem mildly confusing at first, but trust me, by the end of this chapter (or hopefully before), you’ll be a Flinto Ninja!
Quick Tip: Make note of the Transition Preview Control in the Toolbar. This just allows you to always know which screen you are currently working on in a Transition.
For the ‘slide-in’ menu, select the Menu group in the Layers Panel.
And then back on the Canvas, hold (Shift) and drag the element to the left, and out of the screen area.
Hit (Space) to see your menu slide in. Cool huh? But let’s breathe a little more life into this Transition.
Select the Menu Items group in the Layers Panel.
And then back on the Canvas, hold (Shift) and drag the element to the left of the menu background.
Not bad. But could do with a little more sparkle! (That’s one of my favourite technical terms right there).
From the Properties panel, reduce the Opacity to 0%.
And from the Timing panel, increase the Delay to around 150ms.
Give it a try (Shift + Space). Much better don’t you think?
Please Note: I’ll be touching on Timing only briefly in this tutorial, but if you do want to read a more thorough overview of both Spring, and Classic timing then the Flinto documentation here is really worth a read.
Ok. I think we’re done with that Transition for now. So from the panel on the right, give your Transition a name (i.e. Slide Menu), and then click Save & Exit.
Back in the main window, select the Home screen, use Draw Link (D) to create a hotspot around the Search icon, and drag the Link Line to the Product Search screen. Then click to bring up the Gesture/Transition window, select the Tap gesture, and click New Transition.
Back in the Transition Designer, you will see the Default behaviour of the Start, and End screen sat side by side. We of course want our Modal window to slide in from the bottom when interacted with (this is again happening inside of the same screen), so let’s get things into place.
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 the red guidelines to align it perfectly.
Select the Search Modal group in the Layers Panel.
Then back on the Canvas, hold (Shift) and drag the element downwards, and out of the screen area.
Back to the Layers Panel, select the Full Screen Overlay.
And then from the Inspector Panel, reduce the Opacity of that layer down to 0%.
Nice work. That’s this Transition complete. Give it a name (i.e. Search Modal), and then click Save & Exit.
Finally, we will want to create a scrollable area for the product categories, and that’s insanely simple to do in Flinto. Let me show you…
From the Layers panel, select the Content group, and either click the Scroll Group icon in the Toolbar, or use (Alt + Cmd + G) to turn the group into a scrollable component. Yup, it’s that simple.
Test it out in the Preview window (Cmd + P).
Quick Tip: From the Group Options in the Inspector panel, you can make a multitude of changes to your new scroll group, some of which we’ll touch on later in the chapter.
Before we wrap this screen up, we’re going to create a simple Transition from our Tees, and Hoodies categories to their respective screens. Let’s start with the Tees first…
Use Draw Link (D), to create a hotspot around the Tees category on the Home screen, and drag the Link Line across to the Category (Tees) screen. Then click to bring up the Gesture/Transition window. Select the Tap gesture, choose the Flip Right Transition, and click Done.
Repeat this process for the Hoodies category.
With the Home screen, we created a link through to this screen, and created a pretty nice Transition between the two. But then you were probably wondering (if you’re were previewing the app) ‘How do I actually close the menu, and return to the Home screen?’. Well this section aims to answer that.
On this screen we’re going to create three different hotspot links, all linking back to our Home screen and using one of the handy features of Flinto. The Back Link.
Let’s put these into place.
Draw a link (D) around the Close icon, and drag the Link Line to the arrow icon which appears at the top of the screen. This gesture will now send you back to the previous screen (which in our case is the Home screen) and automatically reverse the transition.
Follow the steps above, to create a Back Link from the Home menu item.
And finally, as some users have a tendency to tap the screen background to remove a slide-in menu, or modal, we’ll place a Back Link to cover the part of the screen that is visible behind the menu.
Cool. That’s the Sidebar Menu screen complete. Fire up the Preview (Cmd + P) to see your new Transitions in action.
Remember that we linked through to this screen from the Home screen? Again, it’s a Transition that’s happening inside of one screen so we need to enable a way to Transition back to the default screen state (Home), and that’s where the Back Link comes into play again.
Draw a link (D) around the Close icon, and drag the Link Line to the arrow icon which appears at the top of the screen.
And like we did with the Sidebar Menu screen, we’ll place a Back Link to cover the part of the screen that is visible behind the modal, as like I mentioned before, users do have a tendency to tap on an area like this to close a menu, or modal.
We do also have content that far exceeds the height of the iPhone 6 screen, so we will need to create a Scroll Group for that content. Let’s do that quick.
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.
All cool. Or is it? Preview the project (Cmd + P), and you’ll see that the content is getting cut off at the top, due to the fact that the Content group we created in Sketch was set 30px from the bottom of the Title Bar.
Not a problem.
Jump back to the main window, and 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 Title Bar.
All fixed. Take a quick look at the Preview (Cmd + P) to see everything working as it should. Good times!
And that’s a wrap for Part 1 of this Tutorial Series. You can jump to Part 2 here…
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…