#flinto

My design partner, Ramon and I decided to use the prototyping software Flinto for prototyping a High fidelity design of Chipper. Flinto provides the tools to quickly create advanced transition-based animations and the screen management to handle a large number of app screens. 

The Transition Designer inside of the software allowed us to customize the animations and behaviors between two screens based on where we position the second (resulting) screen and the time effects we apply to the transition. 

Though prototyping has been an interest of mine since I started to get a sense of design, during my internship at TamTam, I felt the urge to master the art of prototyping. Believe me, explaining transitions or animations to others is quite hard, even when you have it al figured out inside your head. Fortunately prototyping tools such as Principle, Framer, Proto.io and Flinto offer a way out. Especially if you are not the kinda code person. These wizards truly can bring your designs to life.

So you’ve decided to give it a try. But wait, so many prototyping tools to choose from?

I encountered the same problem back then. Over the past few weeks I’ve been using Principle and Flinto for Mac. With this article I hope to help you figure out the right guy to do the job. It depends on what you are trying to achieve.

The interface

If you are familiar with Sketch, you will undoubtedly notice the similarities. The look and feel, artboards, layers and so on.

In Principle I immediately noticed the layer properties pane on the left side. Regardless of whether you have selected something, the width, height, angle, scale and other properties remain visible.

In Flinto the layer properties pane is only visible when an object is selected. Otherwise it shows document options. This works the same as in Sketch. From an User Experience point of view I like this way better, because the tools appear when you really need them.

Connected layers

“Principle looks at similarities in artboards by the layer names and then automatically adds movement or animation from the first state of the layer to the next”, says Abhinav (Chhikara, 2016). Because of this it is important that you name your layers carefully in order to prevent “janky” animations. Otherwise you might end up renaming layers. Of course, proper layer naming is a best practice and this quality may encourage you to stay organized. Yay!

In Flinto you have to do this manually. Thanks to the ‘connected layers feature’, it is relatively easy to connect layers between the start and end screen, in the transition designer. The advantage here is that you do not have to think about it beforehand. You remain fully in control.

Timeline

Experience with Adobe After Effects? Then timelines and keyframes will be familiar to you. You’re in luck! The Animate and drivers panel both show a timeline. Principle uses a timeline for animating objects between screens (the Animate panel) and a second timeline (the drivers panel). Drivers allow us to animate objects based on a changing property. For example, an element that scales down while it is being dragged. Unlike the Animate panel, properties live in artboards.

You will not be able to find any timelines in Flinto. “Just put stuff where you want it to go” and the magic will happen according to Flinto. If you have a complex animation in mind, you might be better off with Principle.

Behaviors vs Transitions

In Principle the built-in preview window is your new best friend. The preview window provides you with feedback for all the transitions and behaviors you create.

Flinto successfully separates its core features. This is great when working with a large number of screens. Flinto separates transitions and behaviors. Transitions in Flinto are animations that take you from one screen to another. You can create transitions with the transition designer (a separate view from the canvas).

With the behavior designer you can create animations that happen within one screen. Behaviors are applied to groups, so in order to design a behavior you need to select or make a group. The behavior designer allows for a great level of detail.

Advice

Compared to Principle, you can easily prototype full flows without getting messy. Flinto simply provides the screen management to handle a large number of screens.