Introduction

Flow is a motion-design tool for animating Sketch files and eliminating the most painful parts of hand-off in app development. It bridges the gap between design and development by generating native code that can be directly incorporated into larger more complex projects by a developer.

Our focus on making Flow a production tool that exports code allows designers to have far more impact on the final product of development cycles. The simplified interface we have created is easy to learn and adopt.

Sketch Integration

Animate your Sketch files in seconds!

Artboards are States

When designing for an animation, think of your artboards as states. Create two similar artboards like Menu Open and Menu Closed, then load them into Flow.

Interface

Flow’s interface is clear, clean and just what you’d expect.

Stage

This is where you can select and move layers around.

Timeline Viewer

This is where the magic happens! A Layer that animates will have a track for every property that changes.

Properties

There is a powerful panel that lets you customize every property on a selected layer.

Hierarchy

The hierarchy panel lets you select, group, reorder, hide and lock layers.

Code Preview

Eager to see what your animation looks like?? Select an object and open up the code preview panel!

Animation

Animating your Sketch files is intuitive, fast and delightful.

Key Values

Every time you move or change a layer on the stage a new key value will appear in the timeline for the properties you just edited. You can then move and edit those key values to your ❤’s content.

Key Value Copying

If you already ❤︎ an animation you’ve made, and you want to see it over and over and over again… Simply copy and paste the keyvalues.

Key Value Alignment

Yes, to keyvalues you can align, distribute, etc., and do all the things.

Easing

Control your animations by changing the easing between key values.

Expanding Rows

Can’t find the track you’re looking for?

Timeline Zoom

Keyvalues just a tiny bit too close together? Then, zoom out! (or in… depending on your pov)

Groups and Hierarchies

The hierarchy panel works as you’d expect, you can group and move things around. Oh, and it has some lovely dynamic icons too.

Exporting

Convert your animations to movies, or code()!

Export a Movie

You can export your animation to a lovely compressed mp4 file.

COOOOOOOOOODE!

You can export your animation to iOS, and it works in the latest versions of Xcode and Swift!