Choosing The Best Animation Tool for Sketch

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

Flow
Flow
Feb 8, 2019 · 13 min read

It’s an exciting time for animation. Never before has there been such a cornucopia of tools available for UI designers and animators. So, which one should you use? Surprise, surprise: we have some thoughts.

But first, let’s agree on what constitutes the “right tool”.

Moving UI is brought to you by Flow: Animate Sketch designs in seconds and generate production-ready code.

Thinning The Herd

It’s time to thin the herd.

Producing vs. Prototyping

Prototyping tools like Invision, Marvel, Figma, et. all, have their place but the problem is, they don’t directly contribute to production. Designers and animators hand-off these carefully crafted prototypes and developers are left to wrestle with recreating it all in code. It’s wasteful, frustrating and inefficient.

Designers and animators should be producing, *as well as* prototyping. Enough of this nonsense.

To be fair, unless you possess a very broad set of design / animation / programming skills — you probably haven’t had much opportuinity to truly contribute to the production process. This is swiftly changing with a range of new tools that allow designers to animate their work and export it directly to code.

This is huge. This is the future.

Our Criteria

That brings us to our criteria for choosing the 5 apps we will cover:

  1. It should have powerful, full fidelity animation tools.
  2. It should integrate with some industry standard file formats (eg. Sketch, Adobe, etc).
  3. It should, on some level, integrate with and directly contribute to production/development: it should export code (both Mobile and Web, ideally).
  4. Exported code should allow for dynamic interaction and easy integration for developers.

So… let’s get to the apps already!


The Right Stuff

  1. Adobe After Effects +Lottie
  2. Flow
  3. Haiku
  4. Kite Compositor
  5. Sketch + Timeline Plugin

Yes, we know, there’s five of ’em. So, which one should you choose? Well, depends on what you want to do. We’ve broken down the Good, Bad and Ugly for each of these apps, as well as what each of them is good for. Read on to find out which app is right for you.

Overview

Having a hard time reading this? Larger version here ( Or click the table ).

Adobe After Effects + Lottie

Price:

Adobe After Effects CC 2019 Interface

You probably already know this, but just in case: Adobe After Effects is the industry-standard motion graphics and visual effects software. It’s an absolute beast. Animators, designers, and compositors use it to create motion graphics and visual effects for film, TV, video, and the web. There is little you can’t do with After Effects, but if you are new to it, there is a lot to learn.

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, and allows native apps to use animations as easily as they use static assets. It was birthed by the talented folks at Airbnb. Lottie uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin. The extension is bundled with a JavaScript player that can render the animations on the web.

Animations created with After Effects and Lottie. Credit Lottie.

Who’s it for?

A wide variety of animations created with After Effects and Lottie. Credit Lottie.

The Good

  • Lottie’s library allows for a variety of different kinds of animations, including basic line art, character-based animations, and dynamic logo animations with multiple angles and cuts.
  • Supports loading JSON files over the network, which is useful for A/B testing.
  • Optional caching mechanism for frequently used animation.
  • Animations can be driven by gestures using the animated progress feature.

The Bad

  • After Effects is not geared for UI animation.
  • No special integration for Sketch files – though there is a 3rd party plugin Sketch2AE… but it’s website literally says “fully broken in Sketch 52!”
  • Monthly fee for After Effects.

The Ugly

  • Learning curve is steep.
  • After Effects is bloated and requires a fast machine to run it fast enough to work super efficiently.
  • Questionable continued development of Lottie and Bodymovin, and a setup / pipeline that would make Rube Goldberg proud.
  • Lottie is a beast of a codebase, and (for iOS at least) it is written in Objective-C… Where’s the Swift?

Flow

Price:

Flow Interface

Full disclosure, MovingUI is sponsored by Flow. But, we promise our reviews are as objective as possible — we only have our readers’ best interest at heart.

Flow is a powerful tool for creating animations, interactive transitions and layout code for iOS and HTML projects. It’s tight Sketch integration let’s you import your designs 1:1 and have complete control over their animations, or you can import 2 artboards and have Flow generate transitions for you. Built as a production tool, Flow exports elegant Swift (iOS) and HTML5 – including SVG – code using industry standard approaches (i.e. AppKit / Core Animation for iOS or JS using the Web-Animations api). You can also export GIFs, Animated PNG, or compressed movies as well. You can think of it like this: Flow is to Adobe After Effects as Sketch is to Adobe Illustrator.

Transition created with Flow.

Who’s it for?

Dribble Logo animation done with Flow. Tutorial here.

The Good

  • Powerful code: Flow’s code export system consistently exports the most modern syntax for iOS and web development and exports light-weight, industry-standard code for either platform. Also, code is not dependent on the integration of any 3rd-party software.
  • Simplified interface: If you’ve ever edited a keyframe in your life then Flow’s interface will make sense to you.
  • Drivers: The latest release generates drivers as part of its code export. That means you can use gestures, triggers, or dynamic input (e.g. progress updates) to drive your animations.
  • Copy / Paste from anywhere: Despite only being able to import Sketch files, you can copy and paste content into a Flow document from almost any other application.

The Bad

  • Imports only Sketch files, currently.
  • Interaction is a few steps away: it currently isn’t a prototyping tool where you can lay out a screen and animate the “flow” of a user’s experience. You can experiment with drivers after exporting code, you just can’t do it from within Flow itself.

The Ugly

  • Reliance on Sketch: advanced editing tools for paths and typography are missing from the product. For example, if you want to create a custom shape or edit its curves you’ll have to do these in Sketch and import them into Flow.

Haiku

Price

Haiku Interface

Haiku is a slick tool for creating animated, interactive user interfaces. It works with files from Sketch, Figma, Adobe Illustrator, or SVG, and it’s backed by git version control. Haiku components (haiku) are built for production. A developer can drop a haiku into her codebase with a single line of code. From there, designers can continue to design, animate, and iterate.

Made with Haiku.

Who’s it for?

Made with Haiku.

The Good

  • Publishing, sharing and embedding your interactive animations is easy.
  • Supports Sketch, Figma, Adobe Illustrator and SVG files.
  • You can use expressions to add dynamic behaviour to components – this is pretty badass.
  • Publishes encapsulated components that can be rendered across a multitude of web and mobile platforms.
  • HaikuCore – handles everything for you.

The Bad

  • The timeline is pretty heavy, can be complicated to learn unless you’re experienced with After Effects.
  • You need to learn scripting for interactivity.
  • Can’t design anything from scratch in Haiku.

The Ugly

  • Getting your animations into iOS & Android = Haiku > Bodymovin’ > Lottie > Programmer… Rube Goldberg would be in heaven. It’s a bit of a house of cards.
  • The desktop app can really get your laptop’s fan singing.

Kite Compositor

Price

Kite Compositor Interface

Kite is a native animation and prototyping design tool for the Mac. It features a timeline editor, WYSIWYG canvas, and a robust scripting interface. The iOS companion app, Kite Compositor for iOS, allows you to interact with your Kite designs on your iPhone or iPad.

Made in Kite.

Who’s it for?

Made in Kite.

The Good

  • Export to native Swift or Objective-C code on iOS or Mac
  • Interactive Realtime Rendering
  • Sketch Import
  • Video and GIF export
  • Companion iOS App
  • Bezier path, and MOTION path editing
  • Component and effects libraries

The Bad

  • You need to be a developer to get your animations running cleanly in the iOS simulator (e.g. Kite exports an iOS simulator image as a TIFF file that the latest version of Xcode disagrees with… better if it were png).
  • Design-Code pipeline is limited to only iOS or Mac.

The Ugly

  • The code export, while precise, is limited in terms of flexibility and software design — it would be hard to effectively integrate an animation or prototype into components other than the SceneView that Kite exports.

Sketch + Timeline Plug-in

Price

Timeline interface in the Sketch app.

Timeline is a Sketch plugin. It allows you to work end-to-end inside Sketch.
All your creations, from animations to interactions are saved into your Sketch file. This simple and powerful tool lets you animate within Sketch for your websites, mobile apps, newsletters, banners, ads and more. On top of that, it has a nice sharing function that will upload your timelines to the web so you can play around, download them, or easily share them.

Made in Timeline.

Who’s it for?

Made in Timeline.

The Good

  • Sharing feature and the handoff.animapp.com is smooth as hell.
  • Lightweight and allows you to work end-to-end in Sketch.
  • State transitions – animating between your static designs is dead easy.
  • You can add click, hover or a timer to trigger state transitions.
  • Nested components. Symbols, artboards & groups can all turn into interactive components.
  • Exports are pure HTML / JS / CSS, no dependencies.

The Bad

  • Animation tool fidelity is moderate. Its state-animation model makes it cumbersome to smoothly add intermediate values and positions – i.e. you don’t have the ability to create key frames.
  • Limited interactions – you can choose between mouse events, a click and a timer, but nothing else.
  • Code is not clearly encapsulated – it’s packed into a single file. If you’re intending to add your prototypes into a larger project this adds a bit of difficulty to the process.

The Ugly

  • Most expensive monthly fee.

TLDR

Conclusion

AE+Lottie

Flow

Haiku

Kite

Sketch+Timeline

Good luck and happy animating!


Related Articles

Embracing Your Animated Future


About MovingUI

MovingUI

The UI animation resource for UX designers.