UX Planet — Medium | Mary Hyde

From complex onboarding animations aimed at guiding users through account creation to beautifully simple micro interactions, animation is one of many successful tools in creating an engaging experience for your audience.

This ‘how to’ guide will explain the process from start to finish, all in one place. Let’s get started! 💪

But wait! First we need a little help from Lottie.

In short, Lottie was developed by Airbnb and is an iOS, Android and React Native library that renders After Effects animations in real time. BodyMovin (an open-source AE extension) exports the animation into a JSON file which contains the code necessary for Lottie to render these animations in any native app.

Be sure to read the full behind the scenes on the creation of Lottie. It gives a really good insight into how and why Lottie came to be!

Before we start…

Here’s a list of the software and extensions I will be using: Adobe After Effects, Adobe Illustrator (though not essential), BodyMovin & Lottie.

1. Designing key components in Adobe Illustrator.

The first step to integrating an animation into any native app is to have a design to animate, of course.

Now, there are hundreds of vector graphics editors on the market and I understand the unwillingness to be ripped away from your comfort zone, but Illustrator goes hand in hand with After Effects and can really make this entire experience a breeze.

It’s okay to create the components of your animation in your preferred design tool (even inside After Effects if that’s what you’re comfortable with), but I recommend you import your design into Illustrator if created elsewhere and save it with an ‘.ai’ extension when you’re done. This means that when you import your design from Illustrator to After Effects all of the layers are preserved — You don’t have to unpick layers that have merged or redraw existing shapes.

If you’re one of the many people using the popular design tool Sketch, here’s a really great tutorial on how to import files created in Sketch to Illustrator.

Layers created and separated in Illustrator.Make sure to retain layer sizes when importing your .ai file into After Effects.

2. Generating motion in Adobe After Effects.

With your design imported and an idea of the composition you wish to create, it’s time to bring your animation to life.

I won’t explain in detail here the art of producing stunning animations, but I will provide a few helpful tips to help make the rendering process smoother.

Pro tip #1: It’s best to ‘create shapes from vector layer’.

When an Illustrator file is imported in to After Effects a new composition is created with Illustrator layers. Converting these vector layers into shapes inside of After Effects results in easier handovers that don’t require sourcing files for the animation to work. (It also makes animating & adding effects easier!).

Right click the layers to open up the menuIllustrator layers are hidden leaving only shape layers.

Pro tip #2: Check which effects are supported.

Here’s a handy table provided by Air BNB listing the supported and unsupported features when exporting your animation. Checking this before you begin animating is essential to saving you time and frustration — trust me.

3. Rendering your animation using BodyMovin.

When you’re happy with your composition it’s time to export your animations as JSON, ready to be integrated into your app. Here’s where BodyMovin comes in!

With the BodyMovin extension installed all you need to do is navigate to Window > Extensions and select BodyMovin. This will open up a new tab with the BodyMovin interface.

Before selecting the green button, make sure to select a new destination folder (it’s easy to miss!) and select the composition you’re planning to render. You may also wish to explore the settings listed individually for each composition to ensure you’re going to end up with the expected result.

Pro tip #3: Export a demo alongside the JSON.

Before handing over your designs it’s a good idea to check over your animation to ensure that everything has rendered correctly. BodyMovin cleverly exports an html file which previews your animation in the browser, however it doesn’t have this setting enabled by default so be sure to open it’s settings (unique to each composition) and turn on ‘Demo’ before exporting.

Making sure ‘Demo’ is selected before rendering.Composition ready to be rendered.

4. Integrating it into a native app.

The handover to the developer who will be integrating your animation is the most important part. If you have included any external files (for example, images) into your composition then you will need to make sure they are included in the file you provide or your animation will render with some unexpected results.

Pull the corresponding Lottie repo for your OS (Android, iOS, React Native) and install it using the instructions provided in the README files.

5. Voilà!

And with that, the process is complete!

The possibilities are endless. Lottie allows UI designers to express their creativity when designing new and exciting interfaces by allowing animations to be created and implemented with ease.

An example of some of Dootrix’s own animations

“With Lottie, it allows our design team to be closer to the development of the final presentation layer. Developers no longer need to guess Bézier curves, and re-make animations with just a GIF for reference. It’s streamlined our workflow and increased the quality of our final product overall.”

— Jamie Heuze | Head of Design at Dootrix.

“Lottie enables me to implement animations at a much faster pace than ever before. I no longer have to worry about recreating complex animations as the designer provides me with the animation in JSON format, Lottie makes it as easy to load and control the animation as it is to display an image.”

— Thomas Tilios | Software Engineer at Dootrix.

Do you have any pro tips?

I’ve only shared my experiences with Lottie here, but I’m sure there are many more things we could all learn!

If you have any tips you think are useful comment them below and share the knowledge. ❤️

References

https://airbnb.design/lottie/
https://aescripts.com/bodymovin/
https://www.adobe.com/uk/products/aftereffects.html
http://airbnb.io/lottie/supported-features.html

Author Mary Hyde
UI Designer at Dootrix

Mary begun her career as a UI designer in 2016 after graduating from Dootrix’s own university course where she learned the art of software testing and development.

From there she focused her artistic skills and knowledge of software fundamentals on UI design, animation & illustration, and has spent the last 2 years working with clients such as Clancy Docwra, Suffolk Libraries & P&O Ferries to produce unique user interfaces across a number of platforms.

Integrate awesome animations into your native apps. was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.