Flow 1.0

Professional Sketch Animation Software

#5 Product of the DayJuly 17, 2018

Built for Designers and Developers, Flow lets you animate designs in seconds and generate production-ready code that a developer can use right away. Our goal with Flow is to let you create production-quality work. No more prototypes. Everything you create can go straight into production.

Around the web

Reviews

861332
955423
1009763
 +7 reviews
  • 1054264
    Andy DentTouchgram founder, coder+martial artist
    Pros: 

    Very smooth, easy timeline editing, can quickly go from before/after mode to working code. Drastically reduces iteration and tweak time.

    Cons: 

    Bit awkward having to maintain same layer structure when you import, merging alternate animations may become painful.

    I'm trying to do some exploding icons where initial menu icons break into parts to give users a clear and continual hint as to how the UI works, rather than an onboarding screen. (Totally inspired by Canva's "more" button becoming a close X).

    Just quickly putting a couple of artboards together from my design doc and playing with it in Flow has let me realise things about the UI much faster than my imagined presentation.

    My biggest concern right now is how to combine the generated code because I want to have four different menu buttons with their own animations - lots of room for tutorial articles.

    Andy Dent has used this product for one year.

Discussion

You need to become a Contributor to join the discussion - Find out how.
Hey everyone! Travis here, from the Flow team. We're excited to announce that Flow is now officially out of Beta! Flow let's you Animate Sketch designs in seconds and generates production-ready Swift/iOS code. No more prototypes. Everything you create can go straight into production. With Flow designers now have far more impact on the final product. What you animate is exactly what you see in app. Flow translates the nuances in your animation straight to code that a developer can easily understand. Flow's Key Features: ☑️ Sketch Integration: Flow taps straight into a designer’s Sketch file... ☑️ Artboards are States: You design the beginning and end of the animation in Flow ☑️ Animation Tools: Flow automatically animates between two linked artboards, and allows you to edit the states directly from the timeline ☑️ Export Code: Flow’s sophisticated code export system exports animations as high-quality, production-ready native code, including Swift/iOS code or HTML5/CSS. ☑️ Customizable Code Export Templates: Flow’s template engine gives developers the ability to customize how code will be exported. Try it for yourself: https://createwithflow.com/ ❤︎
955423
Tim J. Elliott@omnispace_designer · Designer | Build Your World 🌎
@postfl any Android export in the foreseeable feature future? Or is Customizable Code Export Templates the solution ("dev" question from a non-dev) - thx tim
@omnispace_designer Yes there is. We were talking about VectorAnimatable and React Native last night as next options for export.
955423
Tim J. Elliott@omnispace_designer · Designer | Build Your World 🌎
@postfl That's great news, I think variety of export options will definitely be your "api slack play" as this aspect could make you guys dominant in terms of operability which functionally is the doorway into every design workflow. It would be great too if you ended up having a framework other devs could build on. Best of luck. If you need beta testers for any new releases DM me, I love critiquing/playing with products. cheers
@omnispace_designer Already in our sights for sure – we spent a lot of time on a portion of the application that will allow us to do just this in a very efficient way. And, this is pretty high on our to-do list. A great challenge is in balancing how to animate between different "outputs"... For example, in iOS you can animate the stroke of a shape... however in HTML you can get the same effect by animating the pattern and offset of a line... Two completely different properties will yield the same result. So, the question becomes: how can we allow a designer to animate 1 time in Flow and have the same effect across multiple export formats > this is very challenging.
955423
Tim J. Elliott@omnispace_designer · Designer | Build Your World 🌎
@postfl a very good point within the larger consideration of interoperability and more importantly expected result(s) outcome from a user POV (typical "just make it work I don't care about the details"). I think if you clearly define what basic/common animation types 80% of the web uses (clearly the less flashy, more practical animation types around common UI action elements and transitions), replicate those in each use case (web, iOS, Android, Desktop, etc.), possibly even offer bundles as quick-start animations for sale, this will be huge time-saving value for people who need functional animations on-the-go. Also, since you're essentially solve sets of single problems multiple times in different use cases (of which having their own variable sets), a huge dev value would be to see these translations documented so that if they ever wanted to tweak the code post designer x Flow output, they would have a clear/dev-minded entry point into gaining context as to how things work/why things are structured/named the way they are. As much as your mission is driven by the notion of "production-ready" ignoring the common developer need of "playing and tweaking" could be huge loss; they may not be your direct adopters but absolutely will indirectly have an affect on whether or not your tool gets picked up by design teams since they ultimately will be the ones receiving this code in their hands. This type of consideration could also potentially provide a form of free support for you guys, as if the devs understand the context, they can debug things themselves even if you don't have a patch/fix right away. Sketch has a big problem with this IMO.
870398
Brendan O'Connell@brendan_oconnell · Student
Brilliant video!
@brendan_oconnell Thanks! We have another one coming along soon. This one was done by http://wearethestill.com
37765
blake folgadoHiring@blakefolgado · Lead Design @Cuvva🖍
Looks pretty awesome. Excited to give it a shot. Principle is really becoming quite frustrating
504465
Jamie Shoard@jamie_shoard · Design/Founder Combo Studio
Excited to try this, big fan of Principle, but always good to see competition with some stand-out features! One piece of feedback before trying - I noticed that pretty much all the tutorials are how to animate various logos, which doesn't strike me as the core use case for Flow? I'd love to see tutorials on a few more subjects, like carousels/paging/menus etc. that might relate a bit more to how people intend to use the app. On a related note... is there any support/thoughts around exporting .png sequences for sprite sheets? Often found Principle et al can be quicker to mock up spinners that AE, but lacks the ability to export anything except gif/mp4. That'd be pretty sweet. :D
880142
Nicolas PrietoMakerHiring@mordorinc · Product Designer
@jamie_shoard Hey thank you for comments and feedback! - We're in the process of redoing all our tutorials so we started with the super basic things, that's why we decided to use well known logos. We're increasing the amount and complexity of tutorials in the near future incorporating more UI interactions. If you tried the app, there are some example files included in the DMG with UI transitions. - We recently incorporated GIF, and our roadmap right now is to provide better video settings and APNG format. Sequences seem to be like a natural step in that direction so we'll add it as a feature request. I hope you enjoy the app and please jump into our Slack Channel to stay in the loop http://join-createwithflow.herok...
@jamie_shoard Thanks for the feedback. @mordorinc is spot-on with his answer. I just wanted to mention that we have been thinking about "components" for a long time – i.e. interactive elements that could have multiple animation timelines, behaviours, link to one another, etc. – and over the last year it was clear that in order to nail components we needed a rock-solid animation and code-export platform. So, components are coming. In the meantime, I have a few tutorials queued up that will teach how to integrate things you can make with flow into existing iOS UI elements.
487605
Javi@ios_javi · Digital Comm Major. Future PM.
Just played with Flow and fell in love. It's about time Principle gets replaced with something better 🙌
880142
Nicolas PrietoMakerHiring@mordorinc · Product Designer
@ios_javi We're glad you like it! Please feel free to reach us out trough our Slack channel if you have more questions :)