Designer and developer friendly motion design tool | Flow Review

Introduction

In the niche of building apps and UX software, there is a thin line between design and development. Having a tool that bridges the gap between the two and makes everything simple goes a long way in setting the stage for better results. This is exactly what Flow does to designers and developers.

What is Flow?

Flow is a professional motion-design tool with an efficient code export engine created to allow designers, artists, and developers animate sketch designs much faster besides supporting the generation of production-ready Swift or iOS code. Flow gives users the power of creative programming without the slightest contact with code consequently doing away with the most challenging parts of hand-off in building apps.

With Flow there is no need for any prototypes since what one animates is actually the same thing that appears on the app.  Flow allows users to export their work to any local programming language to facilitate better understanding. It also gives designers more influence on the end result of their work. This tool comes with a simple and easy to learn interface making it an ideal pick for creative minds who want to harmonize app design and development.

Features of Flow

Sketch integration

Considering most people use Sketch, Flow is designed to tap directly into a user’s Sketch files.  For instance, when creating a new project, you can select a file that you have already worked on Sketch upload it and Flow will read it. This way you can animate Sketch files quickly and make adjustments to fit your needs.

Interface

As expected of a professional tool, Flow comes with a clear and intuitive interface setting stage for a wonderful user experience. The interface is composed of the following:-

Stage

This is the part that supports the user’s ability to choose and move layers.

Timeline viewer

The timeline viewer keeps track of the changes in properties of animated layers.

Properties panel

This gives users the power to customize the features on any layer of choice.

The Hierarchy panel

This allows a user to make a select, collect, reorder, conceal, and lock layer as may be necessary.

Code preview

As the name suggests, the code preview icon allows designers to get a sneak peek of how their animations will look like in the end. If you can’t wait to see the results you only have to select an object and tap on the code preview panel for the preliminary show.

Animation

When it gets to animating sketch files, Flow guarantees users a pleasant experience. Animating two linked artboards is automated so you can save time in the design process. It also provides for direct editing of the artboards from the timeline. The animation feature includes the following:-

Key values

Changes or movement of a layer on the stage triggers the appearance of a new key value in the timeline for the edited properties. Users can shift and alter the key values accordingly.

Key value copying

This makes it for users to copy and paste the key values they like. For example, if there is a lovely animation one has created and they want to see it or use it repeatedly key value copying becomes handy at that point.

Key value alignment

This feature allows designers to order, coordinate and distribute key values as the project demands.

Easing

Easing affords better control of one’s animations. It takes a simple adjustment of the easing amidst the key values

Expanding rows

When a track you are looking for is proving difficult to find expanding row remains of great help

Timeline zoom

Sometimes the key values seem too huddled. In such a circumstance, you can expand the timeline in or out.

Groups and hierarchies

Apart from offering a number of functional and dynamic icons, this feature provides for grouping and moving things over the interface.

Code export

Flow’s powerful code export mechanism supports the export of production-ready built-in code. Besides allowing export of animations to iOS, it is also compatible with most recent versions of Xcode and Swift giving users the freedom to customize to whatever format they wish to export them.

Pros: 

• Very smooth, easy timeline editing
• Responsive hence offers quick performance
• Easy to learn and master
• Generates production ready code
• Harmonizes design and development

Cons: 

• Sometimes if you import design files with too many intricate features, there is a probability that your files can be tight to the sketch designs.

Pricing

Flow is currently available at $150 a year. The license remains active for 365 days after purchase. Users can also access Flow through a free limited trial license which can be requested on the download page. Flow offers a discount for students, faculty staff or any educational institutions if contacted directly.

Other Tools

Apart from Flow, there are many other tools that offer quick and easy animations. These include Principle, Framer, Flinto and Invision Studio. Each of these tools have their own advantages and disadvantages of use. There are people who use a particular tool and swear by it, but ultimately it’s not about the tool but the understanding and the concept and the when and where to apply proper animations and interactions.