Adding Lottie files in XD can make interactions and other dynamic mockups.
First, Lottie files are small animation files. (They may remind you of gifs.)
Just like images, you import your Lottie file into XD by dragging it to the artboard or choose File > Import.
The first frame of the Lottie displays on canvas. If the first frame of the Lottie is blank, you see a blank frame on canvas. This can make it a bit hard to find, so use the Layers panel to help you locate it.
Just like with videos, you can set a variety of playback options:
- Play automatically (default)
- Play on tap
- No playback
- Loop playback
These settings also create the prototyping. However, you can still go into the Prototype mode to edit or refine these settings.
Lottie playback can work with other interactions. For example, as the end of the Lottie an action can be triggered or playing multiple Lottie animations or playing Lotties with video.
Table of Contents:
00:15 – What are Lottie files
00:43 – Where to access lottie files
01:37 – Lottie Files online
02:00 – Downloading lotties
02:37 – Importing to XD
03:03 – Play options for lottie
03:32 – Creating an interaction with lotties
03:39 – 1. Lottie has no playback
03:50 – 2. Create component
04:10 – 3. Add hover state
04:28 – 4. Lottie plays automatically
04:34 – Preview
04:54 – Additional lottie tips
