Flow
Import Sketch or Figma. Animate your heart out.
Start new thread

Flow - Animate Sketch designs and generate production-ready code.

by•

Built for designers and developers, Flow lets you easily animate designs and generate production-ready code that a developer can use right away. Import Sketch Designs. Make Animations. Export Dev-ready Code.

Add a comment

Replies

Best
Looks like a great product, any plans to export code for React Native?
Maker
hey Jimmy, for sure! We're working on having multiple code export options in the near future!
Awesome product, just add HTML export and you've got my business! Embed the html in a webview and upload to App Store.... Your product is similar to Tummult Hype, but for apps instead of web.
Maker
hey Carlos, as mentioned we're working on HTML and other code export options. In reality we're building something a-ma-zing but I can't say much now.
Maker
Hi! I'm Nicolas, from the Flow team. We're really excited to be on the Product Hunt Community – thanks to for the hunt. Last year we released an alpha, called C4 Studio, for which we received an amazing amount of feedback and enthusiasm. Since then, we have been working hard to bring our product to a stable-production ready version. Now, we've released our tool with a new user-interface, a new brand, and a load of new features that have strengthened it significantly since the initial alpha release in 2016. We consider Flow a new class of motion design for mobile. Built for Designers AND Developers, Flow lets you easily animate designs and generate production-ready code that a developer can use right away. Our Beta release recently happened, and we're very proud of it. Currently, our tool works with Sketch (to import files) and iOS / Xcode (as export). You can use Flow in a variety of different ways. Some people use it for quickly generating animations of of the Sketch files. Others use it to prototype motion – exporting to movies. While other people use it to generate real components that can be used in iOS applications. There are a few things on the horizon that we hope will become part of V1.0... For example, exporting to multiple languages (e.g. HTML) is a major milestone we're currently working on. We'll announce other features as they come up. We've been developing Flow as a designer's tool, and would really like to find small teams of des/devs so that we can improve it for the developer's experience. We'd love to hear from you. Join us on Slack: Or, email us at: Currently, we're offering Flow on a PWYW (pay what you want) pricing model. It will be PWYW until we release V1.0 sometime next year. ❤
Hunter
Great, thanks for summarising where you're at – that's an epic journey, congrats on the rebrand and beta release !
I can't tell you how many times I've been in that awkward situation where the coded animation doesn't match the initial design. I definitely want to check this out. How would you compare Flow's animation capabilities to other products like Principle? Also, video = 💯
Maker
Our approach is a bit different, and definitely more focused on finer-grained control. In fact, our timeline/keyvalue approach is quite reminiscent of Flash or After Effects. We want Flow to be able to handle animations, components and app flow so that you’re able to not only design animations, but also build up to more complex interactions. Another point, our import functions works directly with Sketch to translate 1:1 everything into Flow. We do not flatten layers into graphics, and you can edit your layer hierarchy in Flow after you import. There’s one small caveat with importing… There are certain things that just don’t work on iOS (e.g. layer blending, multiple shadows on an object, etc.), so we don’t import those things. The idea is that you can be confident that what you see in Flow can also exported straight into iOS. That said, our philosophy is that the animation engine is the critical underlying piece, which is why we’ve been focusing on it quite heavily. Now that it’s in place, when we add the other features on top of it they will be rock-solid.
Looks like exactly what Principle should have done. Animation then export to code. Awesome job
Great welcome video on the Flow website!
Hunter
hah it's funny! Wish it was on YouTube so we could add to the PH gallery 🙃
Maker
Hey , We just uploaded that vid to Youtube. You can have a look:
Hunter
Nice 👌🏽 I just added it to the gallery - are you one of the makers Nicolás? I can add you as a maker, or whoever it may be 😂 - - just added you
Maker
Haha I am, thanks!
Seems really interesting, has anyone tried it in cooperation with a developer Any feedback?
Maker
We’ve heard a bit from developers, but now that we’ve released a solid beta we hope that we’ll hear from more teams. Prior feedback was a bit early as the tool was still quite alpha.
I AM a developer, and I'm in love. I've decades of history in code generation tools and have been intensely frustrated with the "modern" tool community focusing on adding value to the designer side but not dealing with how hard it can be to match animations in code.
No trial period? It would be great to be able to try it before I buy it.
Maker
Hey Erin! You can try it by adding your email and paying $0 if you like. You will be able to download the app and you will also get a license key on your inbox. Go here:
Ah cool, thanks!
gimme dat

I've been using it since the early alpha and just bought a copy now there's a paid release. It generates clean code for the fiddly business of animation so can save a huge amount of time fine-tuning code.

Pros:

Very elegant & smart way to get animations with timeline editing . It's a deceptively deep product, adjusting properties as slide timeline.

Cons:

Bit awkward having to keep same structure in destination artboard, if you want to do an "exploding parts" animation. Product name clashes

12
Next