Anima

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

This cool cat was designed by <a href="https://lottiefiles.com/diane_soko" rel="nofollow noopener noreferrer" target="_blank">Diane Soko</a>

What is <a href="https://airbnb.design/lottie/" rel="nofollow noopener noreferrer" target="_blank">Lottie</a> Animations?

Vector animations that are lightweight

Created in Adobe After Effects, no engineers involved

- 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

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

Enter or paste your Lottie json URL * Here’s <a href="https://support.animaapp.com/en/articles/2621070-how-to-embed-videos-and-gifs">how to upload</a> your files

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

1. Click ‘Video, GIF, Lottie’ option under Smart Layers
2. Enter or paste your Lottie json URL * Here’s <a href="https://support.animaapp.com/en/articles/2621070-how-to-embed-videos-and-gifs">how to upload</a> your files
3. Click ‘Preview in the browser’, and watch the magic happens
4. Share or Export Code

<a href="https://blog.animaapp.com/announcing-anima-for-adobe-xd-6db773468f4f" rel="nofollow noopener noreferrer" target="_blank">Announcing Anima for Adobe XD</a>

<a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-publish-a-website-and-host-it-with-anima" rel="nofollow noopener noreferrer" target="_blank">How to Publish a Website and Host it With Anima</a>

<a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-export-sketch-to-html">How to Export Sketch to HTML</a>

<a href="https://support.animaapp.com/en/articles/2627097-anima-for-sketch-how-to-create-a-high-fidelity-prototype">Creating a High-Fidelity Prototyping in Sketch</a>

- <a href="https://blog.animaapp.com/announcing-anima-for-adobe-xd-6db773468f4f" rel="nofollow noopener noreferrer" target="_blank">Announcing Anima for Adobe XD</a>
- <a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-publish-a-website-and-host-it-with-anima" rel="nofollow noopener noreferrer" target="_blank">How to Publish a Website and Host it With Anima</a>
- <a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-export-sketch-to-html">How to Export Sketch to HTML</a>
- <a href="https://support.animaapp.com/en/articles/2627097-anima-for-sketch-how-to-create-a-high-fidelity-prototype">Creating a High-Fidelity Prototyping in Sketch</a>

What is Lottie Animations?

How to add a Lottie animation to a prototype

Learn More