Yalantis: iOS, Android And Web App Development Company

Our First Look at the Floid Prototyping Tool

As a designer, I’m really happy to see more and more interaction design solutions come out. This makes design world more exciting, and helps us understand the application behaviour better.

I’ve already tried working with Pixate, Principle, and Flinto (and wrote an article about the latter). Once I heard about a new prototyping tool, Floid, that was released last month, I rushed to lay my hands on it and created a prototype. However, it turned out to be not as easy as I expected.

Floid animation prototype

Importing files and creating a new project

Once you start using Floid you have two options: to import Sketch/PS files to Floid or to create a new document.

Floid files importImporting works pretty strangely: Floid will import only those files from your Sketch/PS that were folded into groups. If a group contains lots of shapes, it will appear in Floid as a single layer. And if you want to import one shape, you should create a group that will contain only this shape. Another reason why I find importing to Floid a bit weird is that the tool doesn’t create different screens for your artboards. Instead, it makes a bunch of them – all on one screen.

Floid artboards

Don’t forget about the second option! You can create you own new document.

Floid new project

The good thing about creating new document in Floid is that you can choose from a vast variety of screen sizes for both iOS and Android platforms.

After you have created your traditional iPhone 6 screen, you can insert there a rectangle, a circle, an image or a screen. Then, you can have some fun with these shapes.

You won’t be able to change a rectangle’s size proportionally holding the “Shift” button like you did in Sketch, Photoshop, or any other tool. You just can’t do it in Floid. Period. Every time you want to proportionally change the size of a rectangle you need to press a tiny padlock icon. But it’s a different story with a circle. You can’t change its proportion even if you unlock the padlock icon. It’s not a big deal, but it’s irritating.

I don’t like how Floid imports files from Sketch. To build my prototype I had to make regular slicing. After that, I had to put every element of the interface in a proper position.

Read also: Koloda Tinder-Like Animation Version 2. Prototyping in Pixate and Development in Swift

Prototyping

As soon as every element is in its place, you can start prototyping. Just select a layer you want to start with and choose a gesture:

Floid prototyping

After you have chosen a gesture (for example, Touch’’), you should go to the “edit” mode of the Touch’’ trigger. The trigger has its own settings and animation group.

By the way, you can exit or enter the “edit” mode again by pressing cmd+E’’. It’s a cool feature.

The “edit” mode seems easy to use if you have only a couple of layers to animate. But if you have at least two screens full of layers, it becomes extremely hard to figure out where a layer is located, in which group it’s placed, and how you can animate it. Should I create one more group or should I place a layer to one of the already existing groups? It’s just hard to understand how it works. If I spent a week, maybe I would figure it out. But after all, Floid is a prototyping tool, you’re not supposed to spend a whole week trying to understand its functionality!

On the bright side, Floid has a great Preview function for viewing transitions. Seriously, this one works very well.

Recording the animation

Also, you can record your animation and save it as .gif or .mov file.

Floid recording

The recording feature works well enough, and it's quality is okay. But if you want to exit the recording, you should go to the Preview, and if you want to exit the Preview, you will probably press the “Exit Preview” button. And guess what? You will go to the recording mode again.

It’s a trap!

Be extremely cautious with the recording mode in Floid: to exit this mode, you have to shut down the application. And if you forgot to save the latest changes before starting the recording... well, you will have to redo all the work you’ve done since the last time you pushed “save”. Just as I did.

Read also: Why Principle is the Simplest Tool for Prototyping Interactive User Interfaces

Final thoughts

To be fair, I understand that the tool has just been released, so I hope guys from Floid will consider all the feedback they receive from the designer community and make their product better and more user-friendly.

For now, though, all I can say is that my acquaintance with Floid was really painful. I had to work hard for two days to create this simple prototype which reminded me of my first experience with Photoshop. Still, I had to finish the project I’ve started. Don’t really understand how, but I did it. You can now check the results on Dribbble!

Design

7 Up-to-Date Mobile App Design Trends 2016

Design

Why Principle is the Simplest Tool for Prototyping Interactive User Interfaces

Design

How Can You Use Flinto to Create Cool Interactive Prototypes?

See our workout book

Know what your health & fitness app can look like

Check out the case study