Have a question to ask or an idea to share? Come and participate in Adobe XD Community. We would love to hear from you and see your creations!
- Adobe XD User Guide
- Introduction
- Design
- Artboards, guides, and layers
- Shapes, objects, and path
- Text and fonts
- Components and states
- Masking and effects
- Layout
- Videos and Lottie animations
- Prototype
- Create interactive prototypes
- Animate prototypes
- Object properties supported for auto-animate
- Create prototypes with keyboard and gamepad
- Create prototypes using voice commands and playback
- Create timed transitions
- Add overlays
- Design voice prototypes
- Create anchor links
- Create hyperlinks
- Preview designs and prototypes
- Share, export, and review
- Share selected artboards
- Share designs and prototypes
- Set access permissions for links
- Work with prototypes
- Review prototypes
- Work with design specs
- Share design specs
- Inspect design specs
- Navigate design specs
- Review and comment design specs
- Export design assets
- Export and download assets from design specs
- Group sharing for enterprise
- Back up or transfer XD assets
- Design systems
- Cloud documents
- Integrations and plugins
- Work with external assets
- Work with design assets from Photoshop
- Copy and paste assets from Photoshop
- Import or open Photoshop designs
- Work with Illustrator assets in Adobe XD
- Open or import Illustrator designs
- Copy vectors from Illustrator to XD
- Plugins for Adobe XD
- Create and manage plugins
- Jira integration for XD
- Slack plugin for XD
- Zoom plug-in for XD
- Publish design from XD to Behance
- XD for iOS and Android
- Troubleshooting
- Known and fixed issues
- Installation and updates
- Launch and crash
- Cloud documents and Creative Cloud Libraries
- Prototype, publish, and review
- Import, export, and working with other apps
Learn how to import and use Lottie to design rich animations in Adobe XD.
Lottie is a light animation format that can be exported from Adobe After Effects as JSON files. Lottie files are smaller in size compared to formats like animated GIFs and PNGs. Developers can reuse Lottie files in their code.
XD allows you to import Lottie files and control Lottie playback. After setting Lottie playback and wiring your prototype, you can preview it before sharing.
Suggested reading
Import Lottie files
To import your Lottie file into XD, drag it to an artboard. Alternatively, choose File > Import.
Once imported, the first frame of the Lottie is displayed on canvas. If the first frame of the Lottie is blank, you see a blank frame on canvas. In such cases, use the Layers panel to locate the Lottie.
When you select the Lottie in Design mode, you see a play icon in its upper-left corner.
After you import your Lottie file into XD, control when it will play. Follow these steps to set a playback option:
- In Design mode, select the Lottie asset on canvas.
- In the Animations section of the Property Inspector, choose a preset:
- Play automatically (default)
- Play on tap
- No playback
- Play automatically (default)
- If you want your Lottie to play on loop, click the Loop Playback button .
Playback options and associated interactions
When you set a playback option for your Lottie in Design mode, associated interactions are automatically set in Prototype mode.
When you choose Play automatically, Time trigger is auto-set with a delay of 0 seconds.
When you choose Play on tap, Tap trigger is auto-set with the default action as Toggle Play/Pause.
When you choose No playback, no interactions are set in Prototype mode.
Customize Lottie playback
To customize Lottie playback, in the Animations section of the Property Inspector, select Edit playback.
When you select Edit playback, you automatically switch to Prototype mode.
In Prototype mode, opt for any of these customizations:
Choose one of these triggers: Time (set Delay to more than 0 s), Keys & Gamepad, or Voice.
Change the Lottie playback action of Tap trigger from Toggle Play/Pause to Play or Pause.
Use Lottie playback with other interactions
Once you set a playback option for your Lottie, explore wiring it with other interactions:
- Set an End of Playback interaction for Lottie to trigger an action after it plays.
- Play multiple Lottie animations automatically at the same time (maximum of 20).
- Play Lottie animations with a video at the same time.
To learn more about prototyping in XD, see Create interactive prototypes.
Examples of prototyping
Now that you learned how to set a playback option for your Lottie and wire it with other interactions, let's try some examples.
Practice prototyping with Lottie animations using the sample files:
Learn how to animate a loading screen using Lottie.
Ex 1-artboard 1
- In Design mode, import plant-loading.json and place it on the artboard. Set it to Play automatically.
- In Prototype mode, wire the Lottie to Ex 1-artboard 2, and set it to an End of Playback trigger with Action Type as Transition.
When you complete wiring the interactions, preview the prototype and check the interactions.
Learn how to animate menu items when they are selected.
Ex 2-artboard 1
- In Design mode, import plant 1 (Spearmint) and plant 2 (Sansevieria) files, and place them in the respective containers. Set them to No playback.
- In Prototype mode:
- Wire plant 1 and its container to Ex 2-artboard 2.
- Wire plant 2 and its container to Ex 2-artboard 3.
Set them to a Tap trigger with Action Type as Transition.
Ex 2-artboard 2
In Design mode, create a copy of plant 1 and place it on the artboard. Set it to Play automatically.
Ex 2-artboard 3
In Design mode, create a copy of plant 2 and place it on the artboard. Set it to Play automatically.
When you complete wiring the interactions, preview the prototype and check the interactions.
Explore more examples involving videos, Lottie animations, and component states.
Preview your prototype and share
After wiring the prototype, use any of these options to preview it:
When your design is ready to be shared with stakeholders, set appropriate access permissions and publish the prototype or design specs link, and share it.
Learn more
Watch this 2-minute video to learn some pro tips on working with Lottie in XD.
- You can import only Lottie files less than 15 MB into XD. There are no limits on the number of Lottie files that can be in a single XD document.
- Lottie will not play automatically if a video is set to play automatically.
- Lottie will stop if other prototyping triggers are initiated.
- If a Lottie animation uses a desktop font, the font will not show up in web playback.
- You can't override Lottie in a Repeat Grid.
- You can't import Lottie animations referencing an external resource such as an image.
- You can't import a JSON file that is not a Lottie JSON.
Related resources
Have a question or an idea?