All Collections
Popular Articles
Adding Lottie to a Prototype
Adding Lottie to a Prototype

How to add a Lottie animation to a prototype in Sketch, Adobe XD or Figma

Avishay Cohen avatar
Written by Avishay Cohen
Updated over a week ago

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

Did this answer your question?