Easily Build Code-Free iOS Prototypes With Flinto

A hand’s on walkthrough for designers and entrepreneurs to quickly build prototypes that feel native on iPhone and iPad

Since the launch of the first iPhone — and subsequent iPad — the design community has been making sense of the new possibilities afforded by these powerful, touch based devices. While we’ve seen the rise of many successful start-ups dominating in this space, it’s taken a while for designers (rather than software engineers) to find ways to quickly test designs and user flows beyond static pages and clunky html image hotspots. Thankfully there are now some very smart ways to prototype and build high-fidelity prototypes (for rich prototypes with advanced control, I suggest looking at Proto.io or Just In Mind). These are great for testing out a flow, impressing a client with an app that seems *almost* real, and refining your work by experiencing it on the device it’s designed for (while designing your app, you should definitely use a live mirror app like Skala Preview or Liveview. How else can you get your design finger perfect)?

In this article I will share my recent experience using Flinto, a well thought through, simple and smart online product that’s doing a great job of extending my existing workflow and allowing me to build and quickly iterate prototypes — no coding required. We will go through the main steps and tips to build this Top Fives prototype.

The example prototype we will be building

You can download the assets for this project here or use the learnings to create your own experiments. The article is divided into the following sections:

1. Preparing Your Screens
2. Importing and Linking Screens in Flinto
3. Slicers and Link Groups
4. Preparing to Share and Manage Access
5. Viewing on Your Device, On and Offline
6. Updating Your Prototype and Pro Tips
7. Limitations and Wishlist

Let’s get started.

1. Preparing Your Screens

Everyone can adopt their existing approach for designing the static screens. For some it might be about doing quick paper sketches and snapping them with a phone. For others it might be Photoshop or Sketch. For me it’s been Illustrator ever since my early days designing flash websites! Whatever your chosen method for designing/preparing the screens, the important thing is to ensure the width is 640px for retina screen iPhones in portrait and 1136px for landscape (iPhone 5 and above). Flinto will automatically fit the screens to the device width, but it’s good practice to start with the correct size wherever possible. Find other resolutions for iPhone and iPad here.

I begin by setting up a bunch of Artboards in illustrator with the right width and initial height of 1136px. Next design your first round of screens using your preferred method.

Pro Tip: I find the mighty Teehan+Lax iOS templates to be incredibly helpful, though I must confess to re-building most of the assets in illustrator for control and scalability.

Once I’ve developed the design concept and worked through the initial flow for my prototype, I go about creating a selection of static screens that I will later link together. I add button graphics and include any elements that will act as a link hotspot in my final prototype.

My Illustrator file with multiple Artboards prepared

Fixed parts of our design

This particular prototype has a fixed top bar and a docked bottom menu bar across most screens. Don’t worry if some screens are longer, just ensure the Artboard height is adjusted as needed and keep the menu bar aligned to the bottom of the Artboard.

Once you are ready to export your artwork, I suggest naming each Artboard and then my preference is to go to File>Export… and save all Artboards (tick ‘use Artboards’) at once as jpeg (say at 80-90% quality).

Pro Tip: If you had elements of the status bar graphic in your design, you should delete these as Flinto uses your own device’s status bar.

Once you have all your static screens exported, it’s time to dive into Flinto and begin getting your prototype ready.

2. Importing and Linking Screens in Flinto

Begin by setting up a trial account with Flinto. You will need a subscription to continue to use it, but I like the fact that you aren’t limited in the number of prototypes you can produce. And they seem like nice guys…

Click ‘New Prototype’, give it a name and choose what device and orientation you want. Now you’ll see your workspace, this is where the bulk of your prototype will be built.

Your Flinto Workspace

Now simply drag all the artwork files we have prepared right on there. Alternatively click the ‘Add Screens’ button and import them from your finder. Once in, you can zoom in and out of your workspace by dragging the bar on the top right. This is especially handy in more complex scenarios where you might have fiddly screen management to contend with.

Workspace with your screens dropped in

Now you have all your screens ready to be linked. If you click and drag over any portion of the screen, you will create a hotspot and have a link thread. Click on the screen you want to link to.

Link one screen to another by simply dragging out a hotspot and using the thread to choose the target screen to link to

Pro Tip: Hold down ‘alt’ while moving your mouse over a screen and Flinto will automagically detect potential areas to link

Once you create a link, you can add a transition from one screen to the next. Experiment with the options to slide, dissolve, flip and push. To get a good result, be mindful of the UI design patterns of your favourite apps.

Transition styles

Continue to link your screens together until you are satisfied with the interaction flow of your prototype. Use the ‘Preview’ button regularly to test your prototype and ensure each screen links up.

3.Slicers and Link Groups

Slicers

At this point you have your prototype roughed out. If your design has a fixed height and no scrolling, then you are ready to move to the next step. Otherwise you’ll want to fix the header and bottom menu as per our design.

Thankfully Flinto has a handy feature called ‘Slicers’. Simply drag the small pointers at the top and bottom of each screen to ‘fix’ the header and bottom bars. Again Flinto will attempt to ‘snap’ the location making this really quick in most cases. You can also tweak the heights yourself if it’s a little out.

Drag the pointer and Flinto will automatically snap to the right location

Once that’s set, hit preview and you should now be able to scroll the page content while keeping top and bottom bars fixed.

Pro Tip: Flinto uses the top and bottom pixel colour so that you have a nicer blanking area when you over-scroll. You can be smart and set a 1 pixel colour in your design if you want to control it’s look and feel.

Link Groups

It’s all well and good to link one page to the next in a linear flow, but what about times you might want a menu or hotspots that link consistently to the same place (as with our bottom menu button). And what happens if you want to change the link across all the pages? Thankfully we can use ‘Link Groups’ for this. And again, it’s really intuitive.

Simply create your hotspot and link as usual.
Now grab the link and drop it onto all the other screens that share the destination screen. When you change the linked screen, it will change it across all linked groups. You can also ungroup links on a particular page by selecting it and clicking ‘unlink’.

Pro Tip: When you create the bottom menu link, dropping it on longer screens automatically aligns to the bottom of the screen, regardless of it’s length. Nice!

I found this feature considerably extended the usability of Flinto for my projects. See the final section for more pro tips with Link Groups.

4. Preparing to Share and Manage Access

Now you’ve built your prototype, how do you get it ready to share with your colleagues and client? And what’s left to do before your share?

Essentially your prototype is ready to shared at any time. But before you do, go into ‘Settings’ and check off a few things:

1. Set an icon. This looks great when the prototype ends up on the iPhone homescreen
2. In the ‘Share’ tab, set the status bar style (this will be seen once on the phone. You can also set the frame style when the prototype is viewed on desktop. Select or deselect tap highlights (useful especially when only a few elements on a screen are linked).
3. Enabling iOS 6 Mode may be necessary if your client uses this OS.

Save Changes.

‘Share’ Tab

Now, click on ‘Share and Install’ in the main workspace

Sharing is a breeze

From here you can either just paste the Quick Link into an email, or send personal emails with instructions to your chosen clients. Although the link is fairly secure, you can also add a password for maximum client confidentiality. I’m really impressed with how effortless it is to share with anyone without needing any apps on the client side.

Pro Tip: You can revoke individual access at any time, or simply re-generate the Quick Link to revoke access for everyone

5. Viewing on Your Device, On and Offline

As you’ve seen, clicking the link within a desktop environment will give you a very good way to view and interact with our prototype. But in order to get the full experience, grab your iPhone!

Simply click the Quick Link url within your phone. This will open up a browser and prompt you to ‘Add to Home Screen’.

Do that and voilà! Your prototype is ready to open. That icon looks good huh?!

Install the app on your Home Screen

You can now interact with your prototype as if it were a native iOS app! Flinto has a couple of features I really appreciate.

1. As soon as you open the app, Flinto begins to save the entire thing for use offline. If you touch and hold down at anytime within the app, you will see if the app is fully offline, or when it was last saved.

Access This menu by holding down on any screen

2. As long as the link URL isn’t re-generated, any changes you make to the prototype will be reflected next time your user opens the app on their device. That’s huge! That means you can push tiny iterations and incremental changes to the app without bothering your users or constantly sending new links!

6. Updating Your Prototype and Pro Tips

You’ll find this way of working addictive. Every time you open the app, you’ll think of ways of improving it, you’ll become obsessed with little details, and you’ll want to continue to refine and iterate your prototype. Flinto has some great ways to make this easier, and speed up your workflow.

1. Replacing screens is as easy as clicking on a screen and hitting ‘Replace’. All your hotspots and slices will remain unaffected
2. If you have a bunch of screens to replace (say you decide on a different logo), as long as they have the same file name, you can drag the whole lot onto the workspace and all screens will automatically be updated
3. ‘Link Back’ is brilliant in instances where you want to go back to whatever your previous screen was. For instance on our prototype, I wanted to click the bottom menu from any screen to bring up the sections (link groups), and then I wanted to close the menu and go back to the previous screen (the one I initiated the menu from). Just select the menu close button and instead of dragging the linker thread, click the ‘Link Back’ button. This is like a history -1 action. Super useful.
4. Within a Link group, click ‘U’ to unlink the group
5. Add additional links to an existing group by selecting one grouped link, and the link to be added and pressing ‘g’ or the ‘Add to Group’ button
6. With one link in a group selected, pressing ‘g’ or the ‘Select Group’ button will expand your selection to the whole group
7. Add a starting image for a more refined experience (go to Settings > General and add your custom image at the right size)

You can find more tips and tricks on the Flinto Blog

7. Limitations and Wishlist

I’ve found Flinto to be an incredibly well thought out and simple way to build prototypes. It’s not a highly complex tool, and in the end that is what makes it accessible to most enthusiasts. Here’s a summary:

What It’s Good For

1. Take your designs and create quick prototypes
2. Working with the SaaS product, you can use all your desktop screen real estate and manage your workflow through a minimal, responsive workspace
3. Sharing is a breeze
4. Setting up on your device is a breeze
5. The creators went to great lengths to keep the use and flow of the product light touch — no hardcore options, endless drill-down lists etc
6. It’s so fast to deploy to your phone, you’ll end up making 100s of tiny changes just to see how they feel on the device. Updates are invisible and the whole things works seamlessly
7. You can emulate a native iOS app
8. As a designer, you can focus on creating the best work in your own chosen program. You don’t need to spend weeks wrestling with unfamiliar tools, learning how to create screens layouts, manage big libraries of UI elements etc
9. In the end, Flinto really lowers the barrier for creating better prototypes that propel your ideas further — much faster
10. It works offline! Amazing when you are road testing your ideas

What It’s Not Good For

1. Rich animations
2. Very complicated prototypes that closely mimic the final coded app
3. Whenever you want to push the UI of your design. Flinto relies on established mobile patterns, it’s not going to be the place to do truly innovative UI development and testing (but that would be hard for most prototyping tools)
4. Currently there are a few gaps in the product

Wishlist

I’ve been emailing with the designer of the product Nathan about various ways to make Flinto even more useful and powerful (without getting into product bloat).

Currently we’ve chatted about:

1. Sliding side menus (‘hamburger’ menu as it’s been dubbed:-))
2. Swipe and pinch gestures
3. Allowing hotspots to link to external urls
4. Timed transitions (so you can hold a user on a screen for a few seconds before they move on)

I can’t wait to see the updates that filter through future revisions.

I’d love to hear your thoughts and see any prototypes you create! Get in touch on Twitter @KamKeshmiri