Subscribe
Sign in
Flow 1.0 — Professional Sketch Animation Software
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.
29
Replies
@itsthisjustin hey Justin! I know Anima app but I haven’t dig much into the app so I can speak in regards of what I see:
* Ecosystem: While Flow depends on Sketch for now, our goal is to make it an app that anybody can use it, wether your designer works on Sketch, Figma, or any other vector app. Anima on the contrary is a Sketch plugin so you need to work on Sketch in order to use it.
* Code: Anima lets you export to HTML/CSS, while Flow does HTML/CSS and Swift. But the real deal is that we invested a good amount of time creating a Code Export Engine so in the near feature we will support Android, React. Also, we export super clean and production-ready code.
* Animation: Flow is a desktop-grade application, and our set of tools is one of the most robust out there.
I hope all this makes sense to you. We give users 30 days trial so I encourage you to try the app and see if you like it! It’s a super solid product with tons of features coming in the near future.
@mordorinc Right off that bat that's a big difference being a standalone app vs a plugin. Very Cool. I'd love to give it a try. We are experimenting with animation tools right now.
@itsthisjustin We would love to hear what you think about Flow! Please go to https://createwithflow.com/downl... and get a 30days license so you can test it with your team.
And please join our Slack community to post your comments about the app, as well as any help you might need from us: http://join-createwithflow.herok...
Looks pretty awesome. Excited to give it a shot. Principle is really becoming quite frustrating
@aviranrevach I'll be working on tutorials with UI integration and code this week.
Downloading the demo now! Can't wait to give it a spin. I forget if you guys mentioned roadmap on Twitter, but any plans for a Figma integration as well?
@smallreflection Thanks for stopping by! Figma is in the roadmap for sure, and we've been working on the ability to copy paste from almost any vector app into Flow, so hopefully you'll hear from us soon. I hope you enjoy the beta and don't hesitate in contacting us with further questions.
@ios_javi We're glad you like it! Please feel free to reach us out trough our Slack channel if you have more questions :)
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
@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.
Hey there! Nicolas from Flow team here. We are really excited to launch V1! If you want to take Flow for a spin don't forget to check out the tutorial section and if you have any questions please let us know!
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.
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.
Hey Andy, thanks for the great and honest review. I have a couple of tutorials queued up that show how to use multiple animations in a single UI kit button. I'll repost here when they go live.
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/
❤︎
@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.
@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.
@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.
@brendan_oconnell Thanks! We have another one coming along soon. This one was done by http://wearethestill.com
Cleft Notes