Tutorial ?️ How to add Lottie Animations to Sketch2React

Lottie animations and Sketch files, together? Whaaaaat… Yup ?

Lottie is one of the most versatile animation formats out there and works about everywhere, be it web or app, iOS or Android, Lottie have you covered. It’s become really popular, specially within app developers.

From version 1.5 of Sketch2React you now can embed Lottie animations, the same way that you today embed Haiku animations within our framework.

Another great thing about Lottie is that there’s a huge amount of free resources, specially on Lottiefiles.com.

Why should I even bother?

I always ask myself this very important question every day. Why? If you, like me, also dabble with motion design and animation, this should by now have you very, very excited. Only if you’re a nerd like me ?

You can, very quickly, create a simple Lottie Animation Showcase website straight from within Sketch. Export takes just seconds and you just need to drag+drop your files onto a server and you’re done! If you’re going for speed and efficiency, export as HTML, it’s the best supported and quickest Sketch to code workflow we have.

Don’t feel like putting things on a server? Just share your .sketch file and make sure the dude on the other end also has our code app v1.5 pre-release.

---

Important Thing 1

As of this writing the only way of getting hold of v1.5 (pre-release) and the Lottie symbol is by either purchasing it or by being a patron of Fredrik & Juan on the highest tier. Version 1.5 will be released for free to the public later this summer.

https://medium.com/sketch2react/sketch2react-dlc-1-is-here-4e8055568fab

Important Thing 2

Our Lottie Symbol is based on you needing to upload your Lottie Animations to Lottiefiles.com.

---

Step 1 — Copy the Lottie Symbol from our Template

1. Open up our Lottie Animations Template .sketch file
2. Select one of the three provided template symbols and copy it to your own artboard/document
3. Important! Make sure you have a page called Symbols in your Sketch file or this will not work in our code app

Step 2 — Getting the Lottie Animation URL

This tutorial assumes that you already know how to upload Lottie .json files to Lottiefiles.com

1. If you have uploaded your own Lottie animation, go to your Dashboard, click the animation you want to embed, and copy the Lottie Animation URL to clipboard

Step 3 — Pasting the Lottie Animation URL in Sketch

1. Go to your own artboard where you have our Lottie Animation symbol
2. Paste the Lottie Animation URL into the override that is called {attribute.animationSourceUrl}
3. Add a Preview image, presumably the first frame of your animation into {preview} — it makes it way easier to see what animation you have embedded
4. Done! ??

I hate to read, give me video sir

All the best!

Juan, Team Sketch2React/Designforventures