Published on | Prototyping: From UX to Front End — Medium Flow

We are very proud to announce the release of Flow.

What is Flow?

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.

As a designer, you can work in Sketch, animate in Flow and export production-ready code.

As a developer, you can customize the kind of code you need to make it easy to integrate into your already existing projects. If you only want to cherry-pick the animations you can do so using the code preview window.

WAIT… I Thought That Was C4 Studio!?

It was. We’ve rebranded and released the latest version with a new name, new logo and new look and feel for the application.

We’ve also added an incredible amount of:

infrastructure,
controls, and
features

…that makes this version production-ready. Even though we still consider this release a Beta, we are confident that you can now work with Flow in your daily routine.

Sketch Integration

You can animate Sketch files in seconds. When you have created a before and after artboards you can load your file into Flow which then allows you to pick the two states for your transition. When you’re done, Flow animates all the differences between the two states.

<a href="https://medium.com/media/8c27f61f767ee70b1503f45ae5f6d9d7/href">https://medium.com/media/8c27f61f767ee70b1503f45ae5f6d9d7/href</a>

Oui, c’est si simple.

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.

<a href="https://medium.com/media/1952142fbf871741b2f10abdf75f07ea/href">https://medium.com/media/1952142fbf871741b2f10abdf75f07ea/href</a>

Interface

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

Stage

This is where you can select and move layers around.

<a href="https://medium.com/media/fb4645d50fb862ca20c77a891b876205/href">https://medium.com/media/fb4645d50fb862ca20c77a891b876205/href</a>

Timeline Viewer

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

<a href="https://medium.com/media/fb4645d50fb862ca20c77a891b876205/href">https://medium.com/media/fb4645d50fb862ca20c77a891b876205/href</a>

Properties

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

<a href="https://medium.com/media/7018cc0b8cea12aaf3c92a2a18e3795e/href">https://medium.com/media/7018cc0b8cea12aaf3c92a2a18e3795e/href</a>

Hierarchy

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

<a href="https://medium.com/media/acc0d94cc8594bb057239b3b49cbc3db/href">https://medium.com/media/acc0d94cc8594bb057239b3b49cbc3db/href</a>

Code Preview

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

<a href="https://medium.com/media/6ecbef117aff062fe9e83995269b3c56/href">https://medium.com/media/6ecbef117aff062fe9e83995269b3c56/href</a>

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.

<a href="https://medium.com/media/6f8c862e74966df0af226dc38aac459d/href">https://medium.com/media/6f8c862e74966df0af226dc38aac459d/href</a>

Easing

Control your animations by changing the easing between key values.

<a href="https://medium.com/media/05de229e6f9fd4c6c68d1b19aefb01c1/href">https://medium.com/media/05de229e6f9fd4c6c68d1b19aefb01c1/href</a>

Expanding Rows

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

<a href="https://medium.com/media/821e17a210e8fdbde2ed52fa66a215d1/href">https://medium.com/media/821e17a210e8fdbde2ed52fa66a215d1/href</a>

Groups and Hierarchies

The hierarchy panel works as you’d expect, and has some lovely dynamic icons too.

<a href="https://medium.com/media/9a92b93d12ddfa89c13c0dd0e6304458/href">https://medium.com/media/9a92b93d12ddfa89c13c0dd0e6304458/href</a>

Exporting

Convert your animations to movies, or code()!

Export a Movie

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

<a href="https://medium.com/media/d0af7bd4aa4aefc55dd76974d085142d/href">https://medium.com/media/d0af7bd4aa4aefc55dd76974d085142d/href</a>

COOOOOOOOOODE!

You can export your animation to iOS, and it works in the Xcode!

<a href="https://medium.com/media/bc512e25f1cad4eb3e489b598207b2d5/href">https://medium.com/media/bc512e25f1cad4eb3e489b598207b2d5/href</a>

Want to try Flow?

We’re actively looking for people who work at the cross-section of design and development and would love for you to try Flow.

Grab the Beta

We have an open beta, you can grab a license and a copy from:

https://download.createwithflow.com

Join Us on Slack

Hop on Slack to ask us questions, and keep in touch:

join-createwithflow-on-slack

For more information, features, and tutorials please visit:

www.createwithflow.com

Flow Beta was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Flow Beta

Cool stuff, every week

More Articles