Adding Lottie to a Prototype

Anima allows designers to create high-fidelity prototypes right inside Sketch, Adobe XD, and Figma and export HTML & CSS in a single click.

This cool cat was designed by Diane Soko

What is Lottie Animations?

• Vector animations that are lightweight

• Classic for responsive design

• Created in Adobe After Effects, no engineers involved

How to add a Lottie animation to a prototype

On Anima’s panel in Sketch, Adobe XD, or Figma

1. Click ‘Video, GIF, Lottie’ option under Smart Layers

2. Enter or paste your Lottie json URL
   * Here’s how to upload your files

3. Click ‘Preview in the browser’, and watch the magic happens

4. Share or Export Code

That’s it!

Learn More

• Announcing Anima for Adobe XD

• How to Publish a Website and Host it With Anima

• How to Export Sketch to HTML

• Creating a High-Fidelity Prototyping in Sketch