Powerful Tool

Sketch

Flow has really tight integration with Sketch. Layers, symbols, shapes, all the things.

Figma

Our newest design tool import is fantastic. Sync your account, paste your share link, import and animate like a whizkid.

Figma Plugin

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.

SVG Files

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’.

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

Path Editing

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?

Magic Animate

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).

Layer masking

Here’s something your design tool doesn’t have… Clip to the edges of layers and groups opens up some awesome animation techniques.

Shape masks

Import shape masks from Sketch, Figma or SVGs.

Precision Timing

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.

Area-select keyvalues

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.

Slice animations

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

MOV

Flow’s basic format for exporting videos is as a .mov file.

MP4

Sometimes you need an MP4, right? Well, we’ve got you covered here.

M4V

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.

Animated PNGs

The absolute best format for animated images.

PNG Compression

We’ve got a the standard PNG compression options available for you to optimize that image right at the source.

Animated GIF

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.

Transparent GIF

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.

Size multiples

Make it bigger, or a bit smaller. We’ve get 0.5, 1, 2, 3 and 4x for you.

Framerates

From tiny animated images to full res video files, chose from 10, 15, 24, 30 or 60fps.

Codecs

From high to low we’ve got your video codecs lined up and ready to go: Prores 4444, Prores 422, H264, HEVC, and JPEG.

Colorspaces

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.

iOS

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.

HTML

Our approach to animations for the web is cutting-edge, blending CSS, inline SVGs and the Web Animations API.

Animated SVG

Need a single file to drop into a web page, then our aSVG export has you covered. It’s brilliant.

Lottie (Web)

Everyone loves Lottie. Export your JSON with the touch of a button a preview it in a webpage.

Lottie (Android)

Like a beautiful, tasty pig in a blanket hors d’oeuvre, this export wraps your Lottie file right into an Android Studio project.

Lottie (iOS)

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.