Within UX, movement is one of the principles that most impacts user attention . The response of a button to an action or a subtle animation in an illustration not only serves as basic feedback in a HMI (Human-Machine Interaction) relationship, but also as an attraction that generates added value in our solutions .
In this post we will talk about Lottie , a tool created by Airbnb for the development and implementation of micro-interactions and animations in a very simple way. Lottie allows us to obtain HTML or JSON code files of animations compatible with iOS, Android, React Native and Web.
Within UX, movement is one of the principles that most impacts user attention . The response of a button to an action or a subtle animation in an illustration not only serves as basic feedback in a HMI (Human-Machine Interaction) jordan number data relationship, but also as an attraction that generates added value in our solutions .
In this post we will talk about Lottie , a tool created by Airbnb for the development and implementation of micro-interactions and animations in a very simple way. Lottie allows us to obtain HTML or JSON code files of animations compatible with iOS, Android, React Native and Web.
After Effects : This tool is becoming standardized as the basic application for creating , editing and exporting Lotties files .
Bodymovin : is an After Effects plugin that will allow us to export our compositions to Lottie type files ( HTML or JSON ). This plugin must be installed using the ZXP Installer wizard in our After Effects program.
AEUX : This plugin must be installed both in After Effects through ZXP Installer and in our UX/UI design program ( Sketch or Figma ). In this post we will work with Sketch.
Lottie Mobile App : If you are working a lot on animations for Apps, it is recommended to download this application. Through it, we can test more accurately how our animations would look on iOS or Android systems .
applications
How to make a micro-interaction or animation in Lottie
1. Design your micro-interaction or animation in Sketch
We must have the Sketch and After Effects programs open at the same time. We will proceed to design our micro-interaction or animation , being very clear about which parts of it should be animated and which should not. In this case, it is recommended to maintain a clear nomenclature of the layers that will later help us animate them in After Effects.