Prototyping a Quotes App using Sketch and Flinto for Mac
A short tutorial on how to prototype a fun and simple iOS application using Sketch and Flinto for Mac, including a guest appearance by the Craft Plugin from Invision Labs.
I recently started playing with Flinto for Mac in combination with Sketch and the two just waltz so well together.
I’ve found that I learn really well from tutorials that build something from start to finish, so I decided to create one that can help others get up and running as well.
Credit to Marc Andrew for his tutorial which inspired this post. I should also mention that the idea for a Quotes App was inspired by the Grapefruit team in Romania.
Part 1 of this tutorial walks through the design process in Sketch, while Part 2 walks through the process in Flinto.
Before getting started, make sure you have the following applications and plugins ready to roll.
- Sketch by Bohemian Coding
- Flinto for Mac the lastest tools from the Flinto team
- Craft Plugin a handy new Sketch plugin by Invision Labs
- Quotes Icon Set a set of 5 icons downloaded from iconmonstr
Part 1: Designing in Sketch
Sketch Artboards and Imagery
Fire up Sketch and open a fresh document. Let’s name it QuotesApp.sketch and save it to your location of choice.
Create your first Artboard (A) and select the iPhone 6 option in the inspector panel. Let’s name this Artboard Splash since it will be the first screen shown in our Quotes app.
Now draw a Rectangle (R) to cover your Splash Artboard. Let’s name this Rectangle BG since it will be our Background image. We’ll just leave it blank for now since we can insert all of our photos all at once using the magic of Craft (stay tuned for the magic!).
Since we’ll have text over this photo, let’s add a Gradient over this layer that will help the text pop. You can do this by drawing another Rectangle (R) and then choose Gradient Fill from the inspector. Let’s name this layer Gradient so that we can recognize it in the future.
Using the Inspector, arrange the Gradient from Top Left to Bottom Right and add the following color values:
- Top Left: #FFFFFF and bring your A value down to 50
- Bottom Right: #6A2626 and bring your A value down to 90
Sweet! Now that we’ve got our first Artboard all suited up, let’s do the same thing for the Quotes Artboards by Duplicating (Cmd + D) this Artboard 5 more times. Rename these new Artboards as Quote1, Quote2, etc.
Using the Craft Plugin
Finally, we’re ready for some Craft magic! Selecting all the BG layers at once, find the Photos option in the Craft panel next to your Inspector (you can toggle the Craft panel on/off by using the shortcut Cmd + P). Select the Unsplash option and click Place Photos to add a different stock photo to each BG layer. Boom! Game-changing time saver.
You can refresh the photos chosen by clicking Place Photos as many times as you like. There are literally tons of other amazing time-savers this plugin can accomplish, so do yourself a favor and go read this article about getting started with Craft.
Text for Splash Page
Let’s begin by adding a Text (T) layer to our Splash page. For this page, I chose the Title, “Quotes for Life.” Make sure it is aligned horizontally and vertically using your alignment tools and use the following values:
- Typeface: Century Gothic
- Weight: Bold
- Color: #FFFFFF
- Size: 72
- Alignment: Left
- Character: 9
Text for Quotes Pages
Now for the fun part: our inspiring quotes! It’s worth noting that the Craft plugin can actually auto-fill text just like images, but in this case, I’d like to hand select my quotes. Feel free to borrow mine or add your own! I keep a running repository of my favorite quotes here.
Create a Text Layer (T) to insert your first Quote and give it the following values:
- Width: 340
- Typeface: Century Gothic
- Weight: Bold
- Color: #FFFFFF
- Size: 38
- Alignment: Left
- Character: 2
Make sure your Quote is centered horizontally on the Artboard using the Alignment tools at the top of your Inspector (your X value should be 18), and give it a Y value of 265.
Now we’ll add the Author of the quote. We’re going to include a little background rectangle behind the Author text to give it a neat look.
Create a new Rectangle (R) layer to provide a background for our Author name and give the following values:
- Height: 30px (the width will be dependent on Author name length)
- Radius: 5
- Fill Color: #FFFFFF
- Radius: 5
- Borders: None
Align this Rectangle with the left edge of your Quote text and place it 20px above the text (X:15, Y:215). You can hold down the Alt key when selecting this layer to show the guide lines in Sketch to ensure you’ve aligned it correctly.
Within this Rectangle, we’re going to place our Author text using the following values:
- Typeface: Century Gothic
- Weight: Regular
- Color: #3A3A3A
- Size: 18
- Character: 2
Align this Text vertically and horizontally within your Rectangle using the alignment tools in the Inspector.
Boom! We’ve got our first Quote board.
Group these elements (Author + Quote) and duplicate them across each Quote board. It’s worth noting that we could have duplicated these elements across Artboards when duplicated our Backgrounds and Gradients, but I wanted to demonstrate the Craft plugin for the background images first.
Update the Text for your Quotes and Authors on each Quote Artboard and be sure to adjust the width of the Rectangles behind your Authors to fit the Author Text length.
We’re almost done with the Quote Artboards. Let’s drag our Share icon onto the first Artboard and update the color to #FFFFFF and size to 60x60. Center it horizontally on the Canvas and place it 40px from the bottom. This will be our action button to initiate the Sharing animation in Flinto. Group this icon together with your Text so that we have one group layered on top of our Background and Gradient layers
Start States and End States
Since Flinto handles animations with a Start state and End state, we’re going to duplicate each Quote board and place the copies below to make adjustments for our End state. Rename these new Artboards as Quote1Share, Quote2Share, etc.
Starting with Quote1Share, let’s pull in our remaining icon assets for the Close button, Twitter, Facebook and Email.
Replace the existing Share button with the Close button adjust its values to 50x50px and #FFFFFF. Make sure it is centered horizontally and aligned 45px from the bottom of the canvas (directly over the pre-existing Share button).
Now update your three icons (Facebook, Twitter, Email) to 48x48px and #FFFFFF and align them exactly 40px to the left, above and to the right of your Close button.
Lastly, grab your grouped Quote and Author layers and adjust the Y value to 140 so that it now 75px higher on your End state Artboard than your Start state Artboard. This will allow us to animate the Quote text to this higher location when triggering the Share action.
Apply these changes across all End state Artboards, and… we’re ready to take this party over to Flinto!
By now you should have a Sketch file resembling the image above. Follow along in Part 2 to import these into Flinto and start creating our prototype.
Part 2: Designing in Flinto
Warning: there are some animated GIFs in this section. I hope they’re more helpful than annoying!
Importing your assets to Flinto
Fire up your Flinto for Mac application and create a new document using the iPhone 6 device type. Save this file and name it QuotesApp.flinto. You’ll see a blank Artboard on your canvas but we can delete this as we will be importing our Artboards from Sketch.
Returning to your Sketch file, find the Flinto Plugin under the Plugins menu and select Send to Flinto. Merge this document with your new Flinto document and you’ll find your Sketch Artboards imported in Flinto with all elements intact. Oh the beauty!
Flinto looks and behaves very similar to Sketch, so those familiar with Sketch will enjoy a faster learning curve.
The first thing we’re going to do in Flinto is designate the Splash board as our Home Screen. This tells Flinto where to start when previewing our prototype. Select the Splash board and then find Home Screen under Screen Properties in the right panel. Check this box and prepare for blast off.
Adding Custom Swipe Transitions
Referring to the original demo video, we can see that there’s a Swipe gesture used to navigate between our Splash page and Quote pages. Looking closely, you will notice that the new screen is entering from a slightly rotated angle (on the Y axis) and the text and icon enter slightly after the image.
To add our first Gesture, we’re going to select the top layer (Gradient) in our Splash board and then select Add Gesture in the right panel.
Find and select the Left Swipe gesture and notice that you now have a Target and Transition to specify. In this case, we want our Target to be the Quote1 board (directly to the right). Flinto provides several pre-built Transitions, but as you’re about to see, all the fun happens in the Transition Editor where you can create custom animations using powerful tools.
Select New Transition and you’ll be presented with the Transition Editor view. Once here, all of your actions will impact this single Transition until you’re ready to return to your Artboards by clicking Save & Exit.
Your New Transition is organized by Start state and End state, and by clicking Play at the top you can watch your Animation animate live in the Editor. This makes it very easy to make minute tweaks to your transition, as you will see.
Creating your Left Swipe Gesture
Flinto has given us a default Transition for the Swipe gesture, but this is a little boring, no? Let’s get a little more creative. Start by naming your Transition, since we’ll be re-using it for swiping between screens.
First, let’s select the Text and Icon layers in our End Screen and pull them wide to the right so that they slide into view slightly after our imagery. Sweet!
Next, let’s rotate the entire End Screen 40 degrees by selecting End Screen in the left panel and adjusting the Y value to 40 in the right panel. Click Play and rejoice in beautiful animation!
With our first animation in place, we can test out Flinto’s Preview tool by finding the Preview button in the upper right. Go ahead and swipe your Splash page to test it out!
The Preview tool is super helpful to test out all of your Transitions as you’re building to make sure you’re on the right track. You’ll also notice an option to view the prototype on your iOS device — sweet!
Now, selecting the Gradient layer on your Quote1 page, add the Left Swipe Gesture, target Quote 2, and select your newly created Transition. Test this out in Preview to ensure your app is swiping correctly and then continue applying these steps across all of your Quote boards, linking Quote5 back to Quote1, since we don’t want to return to the start screen once in the app.
Creating your Right Swipe Gesture
Once again, select the Gradient layer on our Splash Page, click Add Gesture, find the Right Swipe option, and then click New Transition to open the editor.
Notice that our End Screen is still on the right side of Start Screen, but since we want the new screen to slide in from the Left, we’re going to grab the entire End Screen and move to the left of our Start Screen. Be sure it clicks into place perfectly next to your start screen.
Now, repeat the same steps as before, dragging your Text and Icon layer to the left of your End Screen and rotating the entire end screen by -40 in the Y field.
Name your New Transition and continue applying it to all of your boards, ensuring that the Quote1 board targets the Quote5 board so that users don’t return to the start screen after swiping. Testing your prototype in Preview, you should be able to swipe endlessly between quotes without returning to the Home screen.
Creating your Share Transitions
Now we’re ready create our Transitions for the Share feature on each Quote page. Referring back to the original demo video, we can see that when clicking the Share icon, the Author and Quote spring upward on the page, while the Email, Facebook and Twitter icons spin out in from the newly visible Close button.
Selecting the Share icon on Quote1, add a Tap Gesture and select Quote1Share as your target screen. Then click New Transition to open the Transition Editor.
There are a few steps involved here so I’m going to break them down by Icons and Text.
Icons
- Select your Close button and set your Z Rotation value to 360 in the right panel. This will cause your Close button to spin open when it appears.
- Select your Email, Facebook and Twitter icons, and drag them directly over your Close button.
- Select the Facebook icon alone and adjust the Delay setting in the bottom right to 50ms so that it animated slightly after the Email icon.
- Select the Twitter icon alone adjust the Delay setting in the bottom right to 100ms so that it animates slightly after the Facebook icon.
Text
- Select your Text group layer and adjust the Y value to 430 so that it starts in the same position as the Text on the Start Screen.
- With the Text still selected, adjust the Tension to 439 and Friction to 28. This will give your animation a sexy little bounce.
- Now select the Text groups on BOTH layers and find the Connect Layers option in the upper left corner of your canvas. Then, under the Connected Layer menu in the right panel, find Behavior and choose Hide Group in End Screen. This will ensure your layer animations stay consistent across Quote boards.
Now, drag your End Screen directly over your Start Screen, since we want them to animate from the same position. Your content will look a little overlapped in the Editor and that is intended. Name and Save your animation and then test it in preview to be sure it behaves as intended.
Pro-tip: You can hold down the Shift key to view animations in slow motion, as shown above.
Creating your Close Transition
Referring back to the demo, we can see that when tapping the Close icon, all the icons disappear to be replaced by the Share icon, and the Author and Quote spring back down to their original position.
Selecting the Close button on the Quote1Share board, create a Tap Gesture to target the Quote1 board and click New Transition. This one is quite simple compared to the first because we’re not going to animate any of the Sharing icons.
Adjust the Y value to 240 for the Author and Text layer group on your End Screen. This will ensure that the text animates from the raised position back into the original position. Make sure your Text layer groups are connected, just like the Share Transition.
Test your prototype in Preview. Download it to your iPhone using Flinto’s iOS app and show it off to your friends.
And that’s it! A fun and simple iPhone prototype for sharing great quotes.
I hope this little tutorial is helpful for those of you learning how to pair Flinto with your Sketch flow. The two fit together quite neatly, almost like it was designed that way : )
Thanks for reading,
Marcus
