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.
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.
Importing 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.
Don’t forget about the second option! You can create you own new document.
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.
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:
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.
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.
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!