There is a dilemma that’s plagued creatives since the dawn of time: hit your client deadlines or update your portfolio? Well, as they say “Money talks.” and, unfortunately, it rarely advocates in favour of your portfolio. So, the better things are going, the more ashamed we tend to be of our out-of-date portfolios showing old work we can barely even look at anymore.

“The biggest myth ever perpetuated in the design field is that good design sells itself. (The second is that Copperplate is a legitimate typeface.) Design can’t speak for itself any more than a tamale can take off its own husk. You’re presenting a solution to a business problem, and you’re presenting it as an advocate for the end users. The client needs to know that you’ve studied the problem, understood its complexities, and that you’re working from that understanding.”

— Mike Monteiro, Design Is A Job

( If you don’t know Mike, you should and this is an appropriate introduction.)

There you have it. You heard it straight from the bearded horse’s mouth: the sheer brilliance of your work alone, will not get you anywhere.

This may be tragic news to some of you, but I assure you, it’s true. So what does this mean?

Unfortunately: you must be your very own hype (wo)man.

This means you must be just as good at selling and justifying your work, as you are at producing it.

It doesn’t matter if you’re presenting to your boss, pitching a client or winning funding for your startup:

If you can’t sell it, it doesn’t exist.

You have to sell your work and provide context for your design decisions at every touch-point possible. This, of course, includes your portfolio and animation is a great tool to provide context and bring designs to life in your absence.

We’ll look at 5 ways to do this and hook you up with some free resources to help you start injecting motion into your portfolio quickly and easily.

• Scrolling
• User Flows
• Focus
• Transitions
• Visual Accents

Scrolling AKA The *Least* You Can Do

Yes, we know: you’re busy and your portfolio is in shambles. This is a sign of success! Ain’t nobody got time to update their dribbble account when paying work demands your attention. To make things worse, I’d wager many of the older works in your portfolio don’t have animations and sexy transitions. That doesn’t mean you can’t embrace your animated future.

You can quickly breath some new life into even old static designs through the magic of ✨scrolling✨.

That’s right, just take your crummy old static design and… make it scroll. Simple, but effective.

Granted, it’s not insanely exciting but it is insanely easy to do and looks pretty good considering the trivial effort involved. To make it even easier, we’ve prepared 3 free templates and a tutorial to help you start incorporating some motion into your portfolio today.

Some scrolling goodness to get you warmed up:

User Flows

If you have the time to produce them, there is no better way to showcase your designs than animated User Flows. Instead of just showing interfaces, this allows you to demonstrate the problem you are solving or behaviour/feature you are enabling. This is an important shift in the way you present your work.

Instead of just a “Music Player” your comp becomes “Adding a track to a playlist”. Instead of a “Search Screen” it’s now “Multi-search by categories”.

Instead of arbitrary “walk-throughs” that take you on a transition-filled, sweeping journey through all of the magical screens of your app, try to structure the narrative of your animations around focused User Flows that solve specific problems for your users. This allows you to demonstrate a level of design thinking, fidelity and nuance that is impossible to reach with static images.

Focus

When watching User Flow animations, it can be hard to take it all in. Your eyes are naturally drawn to the largest, most dynamic, movements on screen, so it can be easy to miss thoughtful details and transitions in peripheral areas like navigation, status indicators, dialogues, etc.

Break these little microinteractions out into their own animations to cut down visual noise and allow these details to shine through. Dole out your brilliance in little bite size pieces to help showcase your attention to detail.

As with the User Flow animations, the more you can incorporate mini-narratives into your animation the better.

Transitions

We need transitions because snapping between screens like this is jarring and inhumane:

A potentially lovely interface is suddenly hobbled: How do these different flashing screens connect to each other? What user flow is being demonstrated? What does this even do?

Compare that to this animated comp:

Granted, the comparison isn’t entirely fair because the example above is a full blown User Flow. You get the idea, though. Even if you are just presenting some static website comps, you can still keep things interesting by creating some slick transitions between your screens.

Visual Accents

If you’ve stepped foot inside Dribbble in the last few years you’ll have seen a lot of this. Visual accents outside of your actual comp can help make otherwise static designs feel a lot more engaging.

Here is a great example of a way to present light & dark modes of an app:

Another subtle, but effective, way to accent your designs is with color. In the example below, Mr. Salomon is shifting the background color gradient to complement the dominant color on each of the screens being shown:

As always, you can have too much of a good thing. Be careful that your accents don’t start distracting from the actual work you are presenting:

So, a gentle reminder:

Don’t Overdo It

Make Your Own

Today’s your lucky day. We’ve put together 3 free animation templates of the scrolling variety, just for you.

In the 5-minute tutorial below, we’ll show you how to easily customize them with your own design assets so you can start incorporating motion into your portfolio today.

Step 1

Don’t worry, there’s only 6 steps! We’ll be editing our templates with an animation tool called Flow. Start by downloading and installing a free, fully functional, trial version here. You’ll have 14 non-consecutive days to use it for free… but this tutorial won’t take more than 5 minutes.

Step 2

• Download the 3 templates here.
• Now, open up “Website Template” with Flow.

Step 3

• Drag and drop your own design assets (in gif, jpg or png format) onto the stage.
• Click the Magnet Icon on the right side of the toolbar to enable Relative Mode. This allows you to make changes to your assets throughout the whole timeline (move, scale, rotate, etc.) while preserving any animations they may have.
• Move and resize your assets to fit over the ones in the file, like I did in the example below.

Step 4

• Select the existing layer that you have overlayed with your own asset. (Either “Project” or “Homepage”)
• In the timeline, find your layer and click the little arrow next to its name to reveal the blue keyvalues. Since only the Y-position values are animated, you’ll just see values for “Y”. Click and drag to select the blue keyvalues that belong to that layer.
• Now copy and paste those keyvalues onto your asset.
• Rinse and repeat for your second asset.

Step 5

• Boom! Your assets should be animating.
• Select and delete the old assets. You can also select and delete our flying circles and triangles if that’s not your thing. We just love shapes…
• Change the color of the background or animated shapes by selecting them and clicking on the “Fill Color” box on the right sidebar.
• If you would like to add some subtle drop shadows to your assets you can also do that in the right sidebar, just scroll down from the “Fill Color” box you were working with earlier.

Step 6

• Now we just need to export your gif!
• Go to Menu > File > Export > GIF.
• You’re done!

Related Articles

Embracing Your Animated Future

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

Embracing Your Animated Future

Building Brand Loyalty & Reducing Anxiety with UI Animation

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

Building Brand Loyalty and Reducing Anxiety with UI Animation

About MovingUI

MovingUI is a publication for UX Designers learning UI Animation. It is brought to you by Flow, a tool for animating Sketch files for iOS.

Animate Your Portfolio with Sketch & Flow was originally published in MovingUI on Medium, where people are continuing the conversation by highlighting and responding to this story.

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

Thinning The Herd

If we simply ask: “Can this software animate interfaces?”, the number of tools available gets out of hand pretty quick. Here’s how we whittled it down to 5 options.

Producing vs. Prototyping

The first thing you need to ask yourself is if you want to be “producing” or “prototyping”. There is quite a big difference, and the answer often lies in the current stage of a project. At an early stage, you’re probably experimenting with high-level concepts like the the general flow, look, feel and style of an app or site. If that’s the case, then any tool that empowers you to quickly ground the concept is ideal. But as you get further along with a project, being able to craft the fine details of your work becomes critical. So does being able to directly contribute to production.

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

Based on our criteria above, we’ll be looking at the following 5 tools. (In alphabetical order.):

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

Let’s start with a high level look at the strengths and weaknesses of each of these tools. Then we’ll dig into each one in detail.

Adobe After Effects + Lottie

Price:

$20.99 per month for After Effects (with a 30 day free trial) and Lottie is open-source (free).

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.

Who’s it for?

If you already know and use After Effects, this is pretty appealing. This is a good solution for a high-end team (like Airbnb) that wants to be doing many different kinds of animations and already has motion design talent fluent in After Effects. If “most creative freedom possible” is your priority, you are working with experienced developers, and married to After Effects, then this is probably a good choice for you.

The Good

• After Effects is incredibly powerful and there are countless of resources out there to help you learn it.
• 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

• If you are new to it, After Effects can be a lot to take in.
• 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

• It’s Adobe. Ugh.
• 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:

$15 per month or $150 per year (with a 30 day free trial). MacOS only.

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.

Who’s it for?

If getting your work 1:1 into a production-ready product is your priority then Flow is for you. It’s code-generation feature makes it incredibly easy to hand off the unique, and often complex, timing subtlety of great animations. If you work in a team geared towards producing high fidelity user experiences for web or iOS, then Flow is definitely for you. It’s also great for anyone wanting to quickly sketch out motion, or taking a peek behind the scenes to learn how to build animations in code from scratch.

The Good

• Powerful timeline: with its design-focused approach, editing anything on the stage creates timelines for any properties that change. You can accurately edit timing, change easing curves, and even copy/paste values and animations between layers.
• 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

• Mac only: but since they’re targeting Sketch users as a primary audience this isn’t totally 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

• Young product: learning and support resources are available, but the team needs to focus on producing more.
• 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

Free or $19 per month for Haiku Pro. MacOS only.

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.

Who’s it for?

If you are working with a highly iterative team on projects that need to be delivered across a wide variety of platforms, then Haiku is a solid choice. It’s git-backed version history is great and if your devs don’t mind a few 3rd party libraries, then they have to think about very little once they add a line of code to their projects. Designs can be updated without much hassle.

The Good

• Powerful timeline: sequence and animate elements using the built-in tween and easing curve library.
• 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

• Almost everything you can imagine can be animated using web-standards, so reliance on this 3rd party library is questionable.
• 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

• To really get power out of the api, you need to have a developer who’s experienced with HaikuCore.
• 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

$99 ( 30 day free trial. ) MacOS & iOS only.

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.

Who’s it for?

If you’re designing iOS or macOS apps and want to bring animations into your UI, then Kite might do ya just fine. The interface for Kite exposes the power of Apple’s native animation APIs and feels like a visual translation of Core Animation, so if you’re experienced with CA then you’ll probably ❤︎ this one.

The Good

• POWER. There’s an interface that lets you essentially animate everything possible in iOS / Mac native animation APIs (i.e. Core Animation).
• 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

• There is a nice KiteKit Framework for embedding Kite documents in apps, which looked like it had potential. Unfortunately it is out of date and won’t compile with the latest version of Swift.
• 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 interface is not intuitive… Unless you’re an expert in Core Animation, and you understand things like byValue, or how raw values like 200, 10, 7 and 0.4 can translate into motion and feeling.
• 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

$39 per month if you want to export code. Free if you don’t. (14 day free trial.) Sketch app plugin only.

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.

Who’s it for?

Timeline is fantastic for building simple prototypes that animate between various static states. If you want to quickly sketch out concepts for an app, a button, or any other kind of simple component, and send them to colleagues or clients, then this is a great tool for you to use. Plus, never having to leave Sketch is a bonus.

The Good

• There’s a lot of really great features such as being able to record a demo of your interaction, in-app help, feedback, etc. We were really impressed with how well this tool integrates into Sketch.
• 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

• No iOS or Android code export – you’re really limited to only the web.
• 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

• Just because interactions work in the app, that doesn’t mean they will work in the web export.
• Most expensive monthly fee.

Conclusion

If you are anything like me, you’ve scrolled past all this nonsense so you could get to the end and see which one we recommend. Silly goose — if you’d read the article you’d know that one size does not fit all. Try this TLDR version:

AE+Lottie

If animation fidelity is your main priority and you’re married to After Effects, then this is probably a good choice for you.

Flow

If getting high fidelity animations 1:1 into a production-ready product is your priority then Flow is for you. Its code-generation features and quality are unmatched.

Haiku

If you are working with a highly iterative team on projects that need to be delivered across a wide variety of platforms, then Haiku is a solid choice.

Kite

If you’re designing iOS or macOS apps and are looking for a tool that exposes the power of Apple’s native animation APIs — this is like a visual interface for Core Animation.

Sketch+Timeline

If you want to quickly sketch out concepts for an app or any kind of simple component and share them, without ever leaving Sketch, Timeline is great. (Limited to web exports.)

Good luck and happy animating!

Related Articles

Embracing Your Animated Future

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

Embracing Your Animated Future

About MovingUI

MovingUI is a publication for UX Designers learning UI Animation. It is brought to you by Flow, a tool for animating Sketch files for iOS.

Choosing The Best Animation Tool for Sketch was originally published in MovingUI on Medium, where people are continuing the conversation by highlighting and responding to this story.

It’s crunch time, baby! You have a deadline. You’re running to a presentation and need to print something (are we still printing in 2019?! ). It’s really important.

Does the printer work? Hahaha — not a chance!

Is it out of ink? Of course it is, and the driver has magically uninstalled itself. Surprise! Your simple task of “print this now” has been upgraded to a 12 chapter side quest. Welcome to your glorious life, brought to you by technology.

Many seemingly simple user journeys are littered with micro-interactions that put users in emotionally vulnerable positions.

Do I remember my password? Was it my bullet-proof “123456”…? Did that web app really save my changes? Was my shared document sent? Where did that notification disappear to? How do I get it back?

That’s a lot of little moments of doubt and anxiety to deal with — especially when using an interface your users aren’t familiar with. It’s our job as designers to judo-flip these moments of anxiety into moments of delight and moral support for our users.

An opportunity for delight is present anytime our user is facing anxiety and is surprised by an especially positive outcome.

These moments of anxiety are some of your best opportunities to create an emotional bond with your users. They are vulnerable. Let them know you’re there for them. Showing empathy and helping your user reduce their anxiety through thoughtful copywriting, interface design and animation can evoke a kind of joy that takes a product to the next level.

Let’s look at some common anxiety inducing micro-interactions and some animations that help turn them into moments of delight. Then we’ll show you how to create this Save button animation using Sketch and Flow.

Submitting & Sending

The simple act of sending an email, a file or posting something can carry with it all sorts of anxiety: Did I do everything right? Am I sending this to the right people? Will it be well received? Will it be received, period?!

Depending on the kind of product you are designing, you may have no way to give your users definitive answers to these questions. In lieu of that, you can at least show empathy for their plight and then help them celebrate when the micro-interaction is complete.

These famous examples from MailChimp’s “Send Campaign” workflow have made the rounds on the old interweb many times — and with good reason, they’re terribly charming! These animations communicate empathy and camaraderie in a moment of uncertainty. Boom! An emotional connection is made.

Saving

With “ever-saving” web apps like Google Docs increasingly ruling the day, the act of saving your work is becoming more and more automated. Unfortunately, that automation often comes with some ambiguity. Do I need to manually save my work in this particular app? Did it actually save? Ok, but did it really actually save? Is my work safe?!

The example below is a Save button from a Sticker-Maker app and does a good job answering these burning questions with some simple animated cues:

1. The button press is followed by crisp, immediate animation. My wish to “Save” has been acknowledged. I’m sure things are happening.
2. Ok, but is it really doing something? The “Smiley Face Progress Bar” is objectively adorable, makes the process of saving feel more tangible and assures me that it’s actually being done. Remember, I’m fragile. Hold me.
3. Finally, the checkmark at the end gives me the soul-soothing confirmation that my attempt to save has been successful beyond a shadow of a doubt. And checkmarks feel good — so it helps me celebrate, in a small way.

Logging In

Let’s be honest, the act of logging-in to anything is often a pain in the ass. The whole situation is ripe with opportunity for spelling mistakes, forgotten passwords and the dreaded Reset-Your-Password side quest.

Anything you can do to make this process more enjoyable is sure to delight your users, as long as it doesn’t impede the efficiency of the task.

The animation on this old login form from CodePen does a wonderful job of this:

System & User Errors

You know, the trouble with interfaces is all the humans. Namely, the humans that design them and the humans that use them. They’re all error prone. ( Don’t worry, not you, you’re perfect. ) So try as you may, errors will occur and they aren’t generally pleasant experiences.

Animation is one of the many great tools at our disposal to try and salvage these uncomfortable moments.

The example below uses animation to make a user error feel surprisingly human. The user has failed to fill out the form before clicking “Pay” and instead of presenting them with an ornery error message, this modal simply shakes its head: “Nope.” The interaction is clear, universally understandable and surprisingly human.

The only thing worse than suffering your own errors is dealing with system errors. This example below is Google Chrome attempting to improve a situation it can’t remedy: the user’s lack of an internet connection.

If a user presses the space button after being presented the “Unable to connect to the Internet” screen, they are rewarded with a mini-game featuring an adorable dinosaur. If that’s not delightful, we don’t know what is. While this is more of an easter egg than a standard interface animation, it’s still another great example of the power of surprise and humour in a moment of frustration.

Animate Your Own Save Button

Now that we’ve explored some of the most common micro-interactions that cause anxiety, you can create your own delight-inducing, anxiety-reducing “Save” button. We’ll show you how to animate the button below, designed in Sketch, in just 5 minutes:

If you are a Sketch user, then Flow is the best animation tool for you. Flow is incredibly easy to learn and integrates with Sketch to animate your interfaces and even export them to production-ready code developers can actually use.

Let’s do this:

Step 1. Download Flow

Download a 30-day free trial for Mac

Step 2. Start the Tutorial

You can start the tutorial here.

Related Articles

Embracing Your Animated Future

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

Embracing Your Animated Future

About MovingUI

MovingUI is a publication for UX Designers learning UI Animation. It is brought to you by Flow, a tool for animating Sketch files for iOS.

Building Brand Loyalty and Reducing Anxiety with UI Animation was originally published in MovingUI on Medium, where people are continuing the conversation by highlighting and responding to this story.

A collection of articles and guides for UX designers getting serious about UI animation. We cover UI animation principles and best practices, what-not-to-do, and a new tool for animating Sketch designs.

The distant future. 🤖

The year, 2000!

… and nineteen?! How did that happen?

All we know for sure is, the future is now and the future of UX, is animated. With delightfully (or terribly) animated UI experiences becoming increasingly ubiquitous, UX designers are now tasked with designing and, often, executing on the animated aspects of interfaces. This is both a great opportunity for UX designers to enrich their work, and a daunting new skillset to master. Like it or not, it doesn’t matter:

You’re going to need to become a better, more efficient animator because, like most of us, you’re no Walt Disney.

You can do better. We all can. So, we’ve put together a set of articles and resources to help you get started. This guide is by no means exhaustive… we wouldn’t want to exhaust you.

Just a quick start. To help you get a solid foundation quickly, we’ll cover:

• UI Animation Principles & Best Practices
• What Not To Do
• Animating Your Sketch Designs

Let’s do this.

UI Animation Principles & Best Practices

Understanding a few fundamental ideas and techniques behind UI animation will get you pretty far. Far enough to do some damage, anyways. Here is a collection of articles and resources to help you up your UI animation game.

🚀 Getting The Lay of The Land

A few great articles to get you started. When should I use animation? Why? How do I make it not suck?

Transitional Interfaces

by Pasquale D’Silva

A witty, entertaining introduction to some of the fundamental ideas behind moving interfaces. Lots of great visual examples. Pasquale also expanded on this article in this a 50 minute, equally witty, talk. Take a look:

Motion Design Doesn’t Have to be Hard

by Jonas Naimark

The primary function of UI animation is to help users navigate an app by illustrating the relationship between UI elements. This article outlines some of the patterns and principles underpinning Google’s Material Design Language. Google’s MDL makes excellent use of animations in a consistent and understated fashion.

Good to great UI animation tips

by Pablo Stanley

Over 1 billion people use apps and services built with Google’s Material Design Language every single day. This article has covers some of Google’s principles applied to standard interfaces like lists and menus. It includes excellent animated examples, like the one above, to help illustrate subtle refinements that will take your animations from good to great.

Sculpting Software Animation

by Pasquale D’Silva

Another great article from Pasquale. This one goes more in depth into some of the methods employed in animation like rhythm, timing, tempo, composition, texture and dynamics. Lots of great visual examples.

👷‍♀️ Let’s Dig Deeper

Dig into these detailed articles that break down UX animation conventions into a catalogued set of principles.

Creating Usability with Motion: The UX in Motion Manifesto

by Issara Willenskomer

An excellent and exhaustive article — ney, manifesto — outlining 12 principles for creating usability with motion. Extensive and filled with great visual examples.

The Ultimate Guide to Proper Use of Animation in UX

by Taras Skytskyi

UI Animation principles laid out with great “Good vs. Bad” examples. Not only does this guide cover the most important principles, it also gets into some of the techniques behind different kinds of easing, speed and UX choreography.

🧞‍♂️⭐️ Disney & Star Wars

Wait, what?!

Disney’s 12 Basic Principles of Animation

by Animation Mentor

The Twelve Basic Principles of Animation are essential “guidelines” created by Disney animators Ollie Johnston and Frank Thomas in 1981. How do you go about using these principles in your work? How can you keep track of them all, and what’s the best way to approach them once you know them? Animation Mentor has put together 12 articles that will help you get a solid foundation in expressive animation.

Here we have these principles explored in the context of interface animations:

Disney’s motion principles in designing interface animations

by Ruthi

Though some would argue these principles are no longer relevant:

UI Animation Principles: Disney is Dead

by Issara Willenskomer

An interesting article exploring the relevance of our aforementioned 12 Principles of Animation in the medium of UI animation.

More of a George Lucas fan? Fine, enough about Disney.

Jedi Principles of UI Animation

by Kit Oliynyk

A thoughtful article on why, when, and how to use animation in your UI, what UX Choreography is, and what all of this has to do with Star Wars.

Microinteractions?! 🐜 🧐

What are these? Interactions for ants?! UI animations are often used to augment “micro-interactions”, which just means every individual action made by the user within a UI experience. We are now seeing the animations themselves increasingly being referred to as “microinteractions”. That word is a train wreck. Enjoy reading it over and over again:

Microinteractions for Macroresults

by Tubik Studio

“Microinteractions are one of the key things to care about in UI/UX design. They are, perhaps, the best proof that attention to small details is able to give big and powerful result.”

Bringing Micro-Interaction & UI Animation to Life Through Developer–Designer Collaborations

by Kyo Kim

“Unlike other forms of animation that exist solely to create the illusion of movement, micro-interactions directly engage the user, enabling him/her to accomplish a variety of tasks and interact with the product in an intuitive and effective way.”

🤦‍♂️ What Not to Do

Remember when they first introduced filters in Photoshop? You probably don’t, it was over 200 years ago. But if you do remember, then you probably also remember finding that sweet sweet “Render Lens Flare” filter and abusing the absolute shit out of it. Everything was better with lens flare! Until, you realized it really wasn’t.

What we are trying to say is:

Don’t over do it. 🤨

Here are some guidelines to help you avoid over-animating your interfaces:

Stop Gratuitous Animation

by Sophie Paxton

This mini essay explores the over-use of animation in UI design, show comparisons with early visual design and offer some suggestions for effective GUI motion design.

And here’s a lovely expansion on that article:

Your UI isn’t a Disney Movie

by Sophie Paxton

Learn How to Animate Your Sketch Designs

Great — now you’re all studied up and the next Disney of UI Animation.

But how do we go about doing the actual animating? Just like in the UX design field there are a wide range of tools available. Most are bloated, not geared for interface animations, or they are focused on prototyping rather than creating refined, production-ready animations.

If you are a Sketch user designing for iOS apps, then Flow is your best bet. Flow is incredibly easy to learn and integrates with Sketch to animate your interfaces and export them to production-ready code developers can actually use.

Download a 30-day free trial for Mac here: http://www.createwithflow.com/download

Now let’s get you started with some easy tutorials!

Create animations like these in minutes:

Codepen Logo Animation

5 Minutes

This tutorial introduces the concept of tracing shapes, while you build a nice animation for the CodePen logo.

Skype Logo Animation

10 Minutes

In this Skype logo animation tutorial, you’ll learn about multiple rotations that you can set up in Sketch.

Logo Build Animation

10 Minutes

In this tutorial you’ll learn simple techniques for rotation, scaling and easing to bring the Twitter Logo to life.

Sketch Logo Animation

15 Minutes

Learn how to align / distribute keyvalues and animations in this Sketch logo animation tutorial.

Vimeo Logo Animation

10 Minutes

Anchor point rotations are key in this simple tutorial, showing you how to lovingly animate the Vimeo logo.

Dribble Logo Animation

10 Minutes

Taking tracing a step further, learn how to coordinate the tracing of shapes by aligning their timing and rotations

Check Boxes ( Part 1 )

10 Minutes

Learn how to take an existing Sketch design, then restructure and rename its layers and artboards to be animatable.

Github Logo Animation

20 Minutes

Coordinate the scaling of multiple objects, and learn some visual tricks while animating the Github logo.

Launch Animation

40 Minutes

Learn how to create a launch animation in Flow, then neatly integrate into an existing Xcode project.

Related Articles

Building Brand Loyalty & Reducing Anxiety with UI Animation

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

Building Brand Loyalty and Reducing Anxiety with UI Animation

About MovingUI

MovingUI is a publication for UX Designers learning UI Animation. It is brought to you by Flow, a tool for animating Sketch files for iOS.

Embracing Your Animated Future was originally published in MovingUI on Medium, where people are continuing the conversation by highlighting and responding to this story.