Is Lottie a Hottie? Going Through the Basics of the Great Tiny Animation Format that is Lottie-files

Vectorized animations and 3.000 times smaller than a GIF? That sounds almost utopian. However, the Lottie-file (or, simply a Lottie) is a reality, and for me as a UX Designer, it allows me to create custom animations that can easily be implemented in code.

In this blogpost, I am going to explore which building blocks we can use in order to build a bridge between UX and development. Lottie-files might be only one example of a such building block, but all bricks are important when building a strong foundation. Moreover, although I am writing about this subject as a designer, it is equally as relevant for developers.

So, what is Lottie?

Lottie is a JSON-based format that makes it easy for me as a designer to export my custom animations without losing any quality, while maintaining full scalability.
It makes animations easy to implement, and nice-to-have elements like these could easily become need-to-have in the future as it adds dynamic and gamification aspects, which might not only enhance User Experience, but also Developer Experience as well.

What do developers think of Lottie?

Seeing as I am not a developer myself, I thought it wise to ask one of my friends, who is a Tech Lead at IT Minds, what he thinks of Lottie as he has worked with it on an internal project.

In general, he's a big fan of Lottie, among other things, because it's easy to work with both as a developer and as a designer. The only downside is the bundle size:

"It's easy for both developer and designer, but it comes at the expense of bundle size and performance. So it works best when you are working with more complex animations"

So, how easy is it?

Luckily for this blog post, I have a great deal of friends at IT Minds. As a trial run, I asked one of our software developers, Stefan, to give it a go at implementing a Lottie-animation in a React environment. This is what he said about the experience:

"As someone who had not worked with Lotties before, it was a very easy and straight-forward process to implement them in a new or existing project. The Lottie-React library had fine tools for using and customizing the Lotties for specific scenarios and interactions."

Is it easy for a UX designer to make the animations?

Some of the questions I have been asked from my developer-colleagues revolves around whether it is easy for me to make these animations. The truth is that you need some experience in Adobe Illustrator and Aftereffects, but apart from that it really is quite easy.
These are the 'simple' steps you have to go through, when making an animation:

1) Design an icon, such as the one below, in Illustrator
2) Import it into Aftereffects, and create the animation
3) Export the animation as a JSON-file, by using a plugin called Bodymovin

Below you can see an example of a gif of an animation I have made on the basis of these steps. You can see the Lottie-file right here