How Can You Use Flinto to Create Cool Interactive Prototypes?

A prototype is an animated version of a product design that breathes life into static wireframes. It helps designers test their UX hypotheses and architecture decisions, get valuable user feedback, and show the app concept to clients and the development team so they can better understand how the app should work.

There is a plethora of tools that allow designers to create rich interactive prototypes of different sizes and depths. The last year alone brought us 30 new prototyping tools. Each product has its own competitive advantage. Some work as a Swiss Army knife; some focus on one specific task.

Flinto is one of the one-size-fits-all solutions. You can use it to make simple transition animations for checking UX hypotheses and understanding an app architecture as well as to make complex and detailed prototypes that look just like the final product. Let’s take a closer look at Flinto and use it to create a prototype of a finance app. 

Flinto interface and main features

Flinto has a standard easy-to-use interface that closely resembles the interfaces of other prototyping software. If you’ve used Sketch or Figma before, you’ll quickly get used to Flinto. I personally like the idea of unifying the interface across modern design tools, since it results in a gentle learning curve. 

Flinto main screen

The main canvas area in Flinto is placed in the middle of the screen. On the left, you can find the Layer list, which contains all artboards and elements. On the right, you can find the Inspector panel, which lets you manage transitions, behaviors, and layer properties. We haven’t chosen an element, so there are no artboard settings in the Inspector

The good news is that Flinto has a predefined list of resolutions for different devices (iOS, Android, web) and allows you to choose a custom screen size. You can also choose the color of the artboard for iOS screens. A built-in status bar makes Flinto even more convenient.

Status Bar

The toolbar, traditionally placed at the top of the UI, allows designers to quickly reach the most useful actions — i.e. create new elements and group layers. 

Creating elements

Flinto makes it extremely easy to create new elements. You have several types of elements in your arsenal: circle, square, vector, and text. These building blocks allow you to create any figure you want.

You can create an app design directly in Flinto by dragging and dropping elements. 

Flinto also allows you to import a ready-made design from Sketch. In the past, you needed to install a Sketch plugin for this. But with version 24, Flinto introduced an integrated Sketch import feature. 

With this feature, all layers and groups are saved in their original order during import. Starting from version 27, Flinto also imports projects from Figma. The process works in the same way. 

But there are even more features that make Flinto convenient. For instance, when you copy folders, shapes, or even parts of an app design from one project to another, all changes in the original project are copied to the child project. 

Screen design

Simple interactive mockups can easily be created directly in Flinto, but you can’t use it to create complex platform elements like gradients, blurs, and additional shadows. For this, you’ll need another design program. Flinto supports the PNG, JPG, and GIF file formats for images as well as MOV and MP4 for videos, so adding files from different design system managers is really easy. 

I’ve created a simple screen: all the elements, except the card with gradients, shadows, and icons, were created directly in Flinto. 

My card design

Flinto can’t be called a professional design workspace for designing screens from scratch, but its functionality is enough for marketers, managers, and developers to demonstrate a basic concept for an application. 

Creating gestures and links

When you create a link from one screen to another in Flinto, you create an interactive element. In the prototype preview, you can interact with app elements just like in a real app. 

One of Flinto’s advantages is the ability to create different links for different types of interactions. For instance, tapping on an element can bring you to one screen, while swiping can bring you to another tab. Despite the simple logic, other UI prototyping tools lack this feature. 

Creating links

As you can see from the screenshot above, one element is linked to two different screens. After a single tap, we get to Screen 1; a double tap brings us to Screen 2. 

The Flinto library supports all standard gestures for both mobile-optimized and web applications:

  • Tap

  • Double tap

  • Long tap

  • Left swipe

  • Right swipe

  • Up swipe

  • Down swipe

  • Touch down

  • Touch up

  • Mouse over

  • Mouse out

  • 3D touch 

Screen animations

Creating design prototypes from low-fidelity wireframes is pretty easy. In my case, I made screens in Sketch and imported them to Flinto. After that, I drew links and described the animation behavior. For instance, I made a transition from the Home screen to the Notification screen. For this, I took the following steps:
Select the starting screen → Click Draw Link in the toolbar and draw the tap area → Choose the target screen → Select the type of gesture from the list → Choose the transition → Profit!

Flinto also has a Back Link feature that lets you create beautiful animations that return users to the previous screen. Plus, it automatically reverses transitions. 

Complex animations

I’ve created a couple of screens with primitive logic to illustrate Flinto’s capabilities for creating complex interactive prototypes. All the designs, except for the credit card look, were created in Flinto.  

My prototypes

I want to create my first animation. The first part of it will consist of swiping between two cards; the second will show detailed information about recent financial transactions.

To start, we need to define what gestures we’ll use. Having an idea of how e-wallets work, I decided to use two gestures for my prototype: left swipe and swipe from the bottom to the top (and some corresponding back transitions). 

Also, I want to make my prototype lively, so I’ve added some microinteractions: an animation for switching steppers and an animation after tapping the card. Even though these animations may hardly be perceptible, their absence can make the design a bit raw.

Let’s start with the left swipe and switching between Card 1 and Card 2. The sequence is the following:

1. Choose the element that will trigger the start of the animation. In our example, this is the Card element. The transition will start after a left swipe. 

Flinto transitions

2. The second step is choosing a transition type. Flinto has built-in settings for standard transitions (Fade In, Push Left, Pop Up, and so forth). These transitions are useful when you need to quickly create a basic app prototype. You can also create a custom animation. 

For custom animations, you need to place the start and end points. 

Transition designer

When choosing the starting point for an animation, you should take the distance between objects into consideration, since unlike After Effects, Flinto has no timeline. I wanted the elements in the Recent transaction block to appear in sequence. To accomplish that, I’ve put animations at an equal distance. 

Starting point

Bear in mind that elements that cannot be animated (in my case, these are the photo, card balance, and block headings) should be turned off.

After completing these steps, we get the transition. Now all we need to do is check the second screen and make a gesture for swipe back. For this, you should set your animation to play in reverse.  

3. Do the same with the next screen. Choose a gesture, set behavior states, and get the new animation. 

4. Our animation is ready. We can check how it works by clicking Preview. Also, we can set other timer settings so the animation will look more natural. 

Behavior 

Behaviors are interactions and animations that take place on one screen and don’t lead to another screen. You can use behaviors for creating realistic effects — for instance, animate active states, switchers, menus, looping animations, preloader animations, etc.

This is very convenient when you need to create animated icons or buttons. For instance, we can use Flinto to create a realistic behavior for a button or toggle switch without hassle. Let’s create a toggle switch in our prototype. Start by selecting the folder and choosing the Behavior button in the toolbar. 

Toggle switch

After that, another window  with the Toggle switch will appear and a preview of it on the top of the screen. By clicking the Plus button, you can create a copy of the object for creating a step-by-step behavior animation. Then create gestures following the instructions above. 

Animating toggle switch

I want to create a commonly used micro-animation: when a user taps on the toggle button, the oval shifts to the opposite side and the background changes color. Also, I want to add an effect for enlarging the oval when it moves on the horizontal axis. 

For this, I’ve taken the following steps:

  1. Create a Tap gesture and pin it to the oval.

  2. Create an intermediate state when the circle enlarges along the horizontal axis. 

  3. Create a state for the disabled toggle button with a grey background.

  4. Pin the Mouse Over gesture to the intermediate state and pin the transition to the disabled state (this means the animation will start when the mouse pointer is inside the element).

  5. Do the reverse for disabled state.

Create clickable prototypes: preview and device viewer 

Flinto, like other prototyping tools, has apps for smartphones where you can view and interact with your prototypes. This makes Flinto extremely useful. 

But the drawback is you can’t share your project to the cloud, so your teammates can’t check it. All you can do is share the source file, but nowadays that’s not very convenient.

Flinto vs Principle

Principle is a well-known Flinto competitor that boasts simplicity and a wide range of features. Based on my work in Flinto and Principle, I’ve created two tables listing the pros and cons of these programs. Both are not web-based prototyping tools, and available only for Mac.
Flitno and Principle Pros and Cons

Flinto is a fully fledged product that will help you create both low-fidelity prototypes for proofs of concept and high-fidelity prototypes that look and work just like a ready-made app. It’s a good alternative to the well-known Principle; in some cases, Flinto even outstrips its famous rival. 

4.2/ 5.0
Article rating
71
Reviews
Remember those Facebook reactions? Well, we aren't Facebook but we love reactions too. They can give us valuable insights on how to improve what we're doing. Would you tell us how you feel about this article?
See our workout book

Know what your health & fitness app can look like

Contact us

We use cookies to personalize our service and to improve your experience on the website and its subdomains. We also use this information for analytics.