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

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
Jimmy Reuterwall
Looks like a great product, any plans to export code for React Native?
Nicolas Prieto
Maker
@jmy hey Jimmy, for sure! We're working on having multiple code export options in the near future!
G G
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.
Nicolas Prieto
Maker
@androidlove 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.
Nicolas Prieto
Maker
Hi! I'm Nicolas, from the Flow team. We're really excited to be on the Product Hunt Community – thanks to @graeme_fulton 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: http://join-createwithflow.herok... Or, email us at: info@creatwithflow.com 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. ❤
Graeme
Hunter
@creatwithflow @nicolas_prieto Great, thanks for summarising where you're at – that's an epic journey, congrats on the rebrand and beta release !
Nick Neuman
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 = 💯
Nicolas Prieto
Maker
@nneuman 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.
Matt Proto
Looks like exactly what Principle should have done. Animation then export to code. Awesome job
Al Poolman
Shazam
Great welcome video on the Flow website!
Graeme
Hunter
@alpooly hah it's funny! Wish it was on YouTube so we could add to the PH gallery 🙃
Nicolas Prieto
Maker
Hey @graeme_fulton, @alpooly We just uploaded that vid to Youtube. You can have a look:
Graeme
Hunter
@alpooly @nicolas_prieto 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
Nicolas Prieto
Maker
@alpooly @graeme_fulton Haha I am, thanks!
Thanasis
Travelplanet24
Seems really interesting, has anyone tried it in cooperation with a developer Any feedback? @createwithflow
Nicolas Prieto
Maker
@tnsrig 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.
Andy Dent
@createwithflow @tnsrig 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.
Erin Toland
No trial period? It would be great to be able to try it before I buy it.
Nicolas Prieto
Maker
@mynycincolor1 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: https://www.download.createwithf...
Erin Toland
@nicolas_prieto Ah cool, thanks!
Louis Delgado
gimme dat
Andy Dent

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
Last