All the lovely Free features
Pro codecs and export options
Having to learn After Effects
All the lovely features in Media
Essential Code Export
Everything in Code, with advanced export formats
Dribbble/Instagram Export (Soon)
Onboarding & Launch Animations
Lottie for Android & iOS
React Toggle Buttons
Be friends with your devs again
Flow has really tight integration with Sketch. Layers, symbols, shapes, all the things.
Our newest design tool import is fantastic. Sync your account, paste your share link, import and animate like a whizkid.
Install our handy little plugin and tag layers in your design as exportable to help you see only the things you want to when importing in Flow.
Got a file you downloaded from a UI kit, maybe a logo you found online? Create a timeline with it and get animating in Flow.
Illustrator (via SVG)
If you’re working in Illustrator, save your design as an SVG and bring it into Flow.
Adobe XD (via SVG)
You’ve animated a UI in XD, got sign-off, now what? Export those buttons and interactive elements as SVGs and bring them to life.
Affinity via SVG
If you’re working in Affinity, save your design as an SVG and bring it into Flow.
Drag and drop images
Need to quickly add an image to your animation? Drag it. Drop it. Animate it.
Drag and drop SVGs
Need to quickly add an illustration to your animation? Drag it. Drop it. Animate it.
Drag and drop audio files
Want your animation to sing?… Literally… Drop an audio file in and hear it play back.
Copy and paste text from anywhere
Need to add a label to your animation? Copy some text and paste it right in.
Copy and paste layers from Sketch
Already synced your file, but made a change? Copy it. Paste it. Keep on truckin’.
Design & Animation
Create animations from a single artboard
Start simple. Create a timeline from a single design and have at it.
Auto animate between multiple artboards
Got a few different states already designed? Select up to 100 artboards and Flow will create you a lovely animation between all of them.
Editable layer hierarchies
Pretty standard stuff. Select, rename, group, ungroup, move them around… Nothing to brag about here, just table stakes.
Standard design tools
Move, select, cut, copy, delete, resize. Same story
Flow’s got you covered on the standard path editing capabilities.
Advanced Path Editing
There’s a few things we needed to add for animation’s sake. Sublayer manipulation, setting the start point, and drawing direction to name a few.
Edit every possible property of a layer
Flow converts every single layer property to something editable, and gives you a huge amount of control over the little details.
Work with images, shapes, text and audio
Table stakes, right?
This. Is. Hot. Flow’s ability to create animations as you make changes to your design puts it in a class of its own. Literally, this feature alone will give every single designer the ability to become amazing animators.
Scalable groups and artboards
Pretty standard stuff here. Everything should resize nicely (if you want it to).
Here’s something your design tool doesn’t have… Clip to the edges of layers and groups opens up some awesome animation techniques.
Import shape masks from Sketch, Figma or SVGs.
Get right down to the 1/100th of a second while animating. Huge!
Scale or expand the timeline
Easily create variations on your animations by changing or scaling the timeline’s duration.
Automatic keyvalue generation
This is the nerdy way of talking about Magic Animate. As you make changes to your design, Flow will create key values for those changes wherever playhead is sitting.
30+ Standard easing curves
Easing is like the Umami of great motion design. Easily add feel to your animations with the click of a button.
Custom easing curve editor
Need a custom curve? Flow’s got you covered. Create your own and save it for use throughout your project.
You literally can’t do this with After Effects.
Move, duplicate and scale groups of keyvalues
Again. Why AE hasn’t figured this out is great for us, and even better for you!
Copy and paste kevalues
You read that right. Copy whole sets of key values and paste them to create repeating animations.
Copy and paste animations between layers
You read this right too. Paste animations between layers!
Copy and paste animations between projects
I just can’t stop… Got an animation in another project? No problem. Copy it, paste it into your new project.
You can slice an animation at any point on its track by option-clicking. This is super handy.
Edit individual keyvalues
Select a value, change it.
Align and distribute keyvalues and animations
Seriously, this is another HOT feature that you can’t do in other tools
Flow’s basic format for exporting videos is as a .mov file.
Sometimes you need an MP4, right? Well, we’ve got you covered here.
Need a little DRM for your beautiful creations? Export as an M4V file without having to recompress.
Single frame PNGs
Need a frame, maybe for a thumbnail or a comp? Move the playhead to where you want it, export that frame.
The absolute best format for animated images.
We’ve got a the standard PNG compression options available for you to optimize that image right at the source.
Welcome to the 80s. Not even GIPHY uses GIFs anymore. But! If you really want to limit your anims to 256 colours we’ve got you covered.
We’ve got these too, though you may want to experiment a bit with color maps to get your animated transparent gif looking good.
GIF Color Maps
Optimize your image’s color palette across every frame of your animation.
Make it bigger, or a bit smaller. We’ve get 0.5, 1, 2, 3 and 4x for you.
From tiny animated images to full res video files, chose from 10, 15, 24, 30 or 60fps.
From high to low we’ve got your video codecs lined up and ready to go: Prores 4444, Prores 422, H264, HEVC, and JPEG.
Designing for an iOS app? You may just want to optimize your media for the P3 colourspace. We’ve also got RGB, sRGB and Grayscale (this one’s for images).
Dribbble (Coming soon)
Pick a default 4:3 size, background color, and scale your animation into the frame. Add a rounded corner and even a shadow if you dare. Exports automatically as a high-res MP4.
Instagram (coming soon)
Pick a default square size, and repeat the Dribbble options above, and export the exact specs to best share your stories.
We are masters of animation programming, and the iOS is our testament to that, mixing UIKit and Core Animation into an Xcode project that’s production-ready.
Our approach to animations for the web is cutting-edge, blending CSS, inline SVGs and the Web Animations API.
Need a single file to drop into a web page, then our aSVG export has you covered. It’s brilliant.
Everyone loves Lottie. Export your JSON with the touch of a button a preview it in a webpage.
Like a beautiful, tasty pig in a blanket hors d’oeuvre, this export wraps your Lottie file right into an Android Studio project.
Want to see that Lottie file on an iOS device? This is how you do it.
Minified Lottie Files
Optimized Lottie files are smaller in size and easier to share.
Toggle Button (HTML)
A special version of our HTML export wraps your animation in a toggle button.
Hover Element (HTML)
Go check out Mailchimp’s website, roll that mouse over their logo to see it wink. That’s a great use of an animated hover element and this export is how you make your own!
Toggle Button (iOS)
Wrapped in a delicious UIButton, we’ve optimized your animation for toggling (and we have some very nice techniques for those rare situations where people jam the button on and off really fast).
Toggle Button (React)
A custom version of our HTML button, wrapped into a lovely react project. We’ve solved the major hurdles related to getting animations into React sites.
Onboarding Animation (iOS)
Make an animation with multiple steps, toss it into a paginated scrollview and voila, you have your very own onboarding animation. Easy.
Launch Animations (iOS)
Every app should have a launch animation. Why? Because they’re lovely, and with Flow they’re incredibly easy to produce.
Spinners ➞ iOS
What a lovely touch it is to have a custom branded spinner for your apps. This export takes your animation, lovingly places it inside an actual UIActivityIndicatorView and scales it to perfection.