Yalantis: iOS, Android And Web App Development Company

How Can You Use Flinto to Create Cool Interactive Prototypes?

We’ve already shared our impressions from using Pixate and Principle for prototyping animations, so now I’m going to explore the topic further, and tell you what I think about Flinto – a mobile app interactive prototyping tool.

My acquaintance with Flinto actually started from Pixate. I've made a couple prototypes using this tool, but then somebody told me “Hey! You should check out Flinto too!” I thought “Why not?” So here I am talking about Flinto showing off my simple prototype that I created in this wonderful program. Here it my prototype:

Flinto prototype

[My Flinto pototype. Check it out on Dribbble]

Prototyping with Flinto

Before I explain how you can work with Flinto, let me say a few words about my overall experience using this service. Flinto allows to create interactive prototypes for Android, iPad, iPhone mobile apps. It is simple, like really. Since it has native Mac OSX elements you can intuitively work with it (if you’re lucky to own Mac, of course). Another great thing about Flinto is that it has a Sketch plugin! No other prototyping tool, at least from those I know, has it. And one more thing before we get going – with Flinto you don’t have to do any graphics slicing to make a prototype.

Okay, now let’s dig in!  

Creating a new project

The following is what shows up on your screen when you’re about to create a “New Document” in Flinto:

prototyping in Flinto

Speaking of sizes, you can use a standard size for iOS mobile deviсes (in this case you’ll automatically get 2x pixel density), OR you can set a custom size and change pixel density manually!

prototyping in Flinto

By pressing the ‘’Create’’ button, you get the ‘’New Screen’’ artboard where you can’t create anything, but you can duplicate the existing ‘’New Screen’’ and change its background color. At first, it’s kinda weird, but then you think “Why on Earth would I create anything here?” And you start using the Sketch Plugin.

Read also: 3 Approaches for UI multi-platform design adaptation

Sketch Plugin

When you export your design from Sketch, it appears in Flinto as a single layer! Isn’t it awesome?

But be careful: the plugin exports all the artboards from the Sketch page, not just one of them. This means that if you want to export a single artboard (screen), you need to create one more page, place your screen there, and only after that export this artboard to Flint.

If you want to implement some changes on one of the screens of your prototype in Flinto, you need to create a separate screen in Sketch first. For example, if you decide to add a pop up window to your prototype, you should do this on a separate screen, then drop it to Flint and only after that you can connect two screens.

Here is what my prototype looked like when I had just exported screens from Sketch:

Flinto prototyping tutorial

Transitions

To create a new transition you have to select the layer you want to start from and just press F (F - for Flinto :)). This shortcut will create a link to the screen you want. After that, you’ll see this:

As you can see here, we have some options to choose from. Pretty simple, eh? What do you like more, gestures or some default transitions?

But the real magic begins with the ‘New Transition’ button! Here you can create whatever transitions you can come up with!

In the “New Transition” section you always have two screens: “Start” and “End”. You can change position and size of the entire screen and of its separate layers. Also, there are a lot of timing options there.

Read also: How we developed Guillotine menu animation for Android

Finish

To create my prototype I didn’t have to use all the features that Flinto offers. But there are some of them that are really cool. For example, Timer Links allows you to create a transition that will work without taping which is a really cool thing for loading screens. Also, there is the Connected Layers feature which connects layers (as you might’ve guessed) so you don’t need to guess how two layers will work together.

Also, Flinto allows you to make live previews on desktop, but you can’t record videos or gifs for your prototype. To be honest, it was more difficult for me to record a video and add a touch indicator there, than actually make the prototype. But I hope guys from Flinto will eventually add a recording function to make a designer’s life easier.

After using Pixate where I had to cut every layer and upload it, Flinto feels just like magic. But I wouldn’t compare Pixate with Flinto just because they’re quite different. I mean they’re used for different tasks. With Pixate, you can create a detailed prototype of a single component of the application, while with Flinto you can design more than one screen and even make an entire app prototype from A to Z, but none of the screens will be as detailed as in Pixate. In conclusion, let me list our traditional pros and cons:

Pros:

  • Sketch plugin
  • easy to use
  • live preview on desktop
  • multiscreen prototypes
  • customizable image sizes

Cons:

  • doesn’t allow you to record a video/gif for your prototype
  • doesn’t allow you to create ‘on scroll’ interactions
Design

Our First Look at the Floid Prototyping Tool

Design

Why Principle is the Simplest Tool for Prototyping Interactive User Interfaces

Design

Product Designer in App Development

See our workout book

Know what your health & fitness app can look like

Check out the case study