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.
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.
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, 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.
Easing
Control your animations by changing the easing between key values.
Expanding Rows
Can’t find the track you’re looking for?
Groups and Hierarchies
The hierarchy panel works as you’d expect, and 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 Xcode!
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:
For more information, features, and tutorials please visit:
