Flow - Now with Lottie & Animated SVGs - Ship beautiful UI Animations. | Product Hunt Embed

Now Exporting LOTTIE and
Animated SVGs! Check out the details on our PH Launch.

Try Flow for Free
Watch Intro
Flow W Logo with Name

Powerful animation tools &
code export you’ll actually use.

Create polished animations with Flow's powerful timeline and export to production-ready code.

View the Code:

View the Code:

Flow
Sketch

No animation tool on Earth works better with Sketch. Auto-animate between Artboards. Perfect Sketch file imports.

Unmatched
Code Export

Flow has the most robust code export in the industry. Period. Export Swift for IOS, Javascript for HTML, and animate SVGs.

Who's Using Flow: SAP, Stackbit, Microsoft, Deloitte, RGA, Apple, IBM, Amazon, Accenture
Flow Teaser Cover
Play Flow teaser

"I would’ve killed for Flow when I was co-designing ****** a few years ago."

Someone You All Know - A Very Well-Known Website

"Comparing it to the tools I’m used to working with (Adobe Animate) it’s very intuitive and pleasant to work with."

Fade Rudnitsky - Founder @ Fade

"Great product. Love the React export feature... very nice and clean to work with. Very easy to understand."

Rodik Hanukaev - Senior Engineer, Technical Lead @ Stackbit

"The code generated by Flow is very readable. Working with this code was easy and nice :)"

Paulina Masiak - Senior Javascript Developer @ Movade

"The best point about Flow is the clear JS code it outputs, which is easily readable and editable."

Hosein Emrani - UI Designer @ Aylien

Blue Banner Left
Blue Banner TopBlue Banner Animated
Blue Banner Right
Dark Mode Top
Dark Mode Bottom

Design in Sketch, animate & hand-off code with Flow.

Flow translates all the nuances in your animations & Sketch designs to code that developers can easily read and integrate. Everyone saves time and your hard work makes it through production exactly as you designed them.

Try Flow for Free
Design Animate Export Build

Know Sketch? Know Flow.

Designed for Sketch users, by Sketch users. 👋 Learning to animate in Flow is incredibly easy.

Flawless Sketch file import

Flow accurately preserves your designs, without flattening layers into bitmaps, so you can easily bring them to life through animation.

Animate between artboards

Define before and after states in Sketch, and Flow can automatically animate everything in-between. All you need to do is tweak it to perfection.

Animate Between Artboards Preload

Your wildest animated dreams,
in production.

Craft world-class animations using our powerful timeline editing tools. Flow gives you accurate control over properties, timing, and easing. You can fine tune your work to perfection and deliver developer-friendly code.

Try Flow for Free
Darkmode Curves Preload
Darkmode Screen Top Preload
Darkmode Screen Bottom Preload

Powerful easing tools made easy

Fine tune your animations with our precise easing panel. Choose from a range of useful presets or tweak them and create your own. The best part? Looping animations reflect easing curve changes in real time so you can test different profiles easily.

Powerful Easing Preload
Export Formats Preload

All the right formats in the resolutions you need

Convert any frame to a static PNG, or your whole animation to animated GIF, APNG, or MOV, then scale it up using a handy little drop-down option on Flow’s export panel. Everything is generated in high resolution, so you can downscale as you need afterwards.

Industrial Strength Code Export

Stop wasting time manually translating UI Animation prototypes from the design team into code. Our sophisticated code export allows designers to easily generate developer-friendly code for iOS (Swift), Web (HTML/CSS/JS) or SVG.

Code Export Preload
Try Flow for Free
Easy Integrate Preload

Easily integrate code into your projects

Whether you're an iOS or Web developer, Flow's code is dead easy to integrate into your projects, with tailored assets and organized files structured for ease of use. The architectures are clear, readable, and not bloated.

No 3rd Party Dependencies

Flow's code export depends on industry-standard approaches, like Core Animation for iOS, or web-animations (maintained by W3C) for HTML and SVG.

No 3rdparty preload
Formats preload

Customizable code templates

If you need a different language, or style of code to export, you can easily write your own templates so that you get exactly what you want.

Try Flow For Yourself

Try Flow for Free
design code blank

Subscribe to our newsletter

Love UI Animation? Sign up to receive the latest news, articles, tutorials and resources.

We're diligent and don't spam.

Recent MovingUI Articles

MovingUI is a publication sponsered by FLOW focues on UI animation for IOS and the web...


Animate Your Portfolio with Sketch & Flow

Learn the best ways to use motion to help sell your work and step-up your portfolio.

Read on Medium

Choosing The Best Animation Tool for Sketch

The Ultimate Guide to UI Animation Tools for Sketch Users in 2019

Read on Medium

Building Brand Loyalty and Reducing Anxiety with UI Animation

Turn moments of anxiety into opportunities to delight users and build emotional bonds with animation.

Read on Medium

Embracing Your Animated Future

A designer’s guide to learning UI Animation and animating Sketch designs.

Read on Medium

Slack logo

Discuss. Connect. Share.

background Made with Flow.
underscore Made with Flow.
line2 Made with Flow.
line1 Made with Flow.
circle Made with Flow.
hit Made with Flow.

result(s) found for “”.