How to embed Lottie animations in Figma presentations using Pitchdeck

Video Transcript

Today I’m going to be showing you how to embed Lottie animations into your presentations in Figma using the Pitchdeck presentation plugin.

The first thing we need to do is just go into your Figma file, go up to the top here where it says the “Resources” icon, then just search for the word “Pitchdeck”, and you’ll see Pitchdeck pop up; Just go ahead and click on that, and you’ll be able to run the Figma plugin by either clicking on this “Run” button here, or you can click on these little three icons where it says “More options” and hit “Save to plugins”. I’ve already saved it to my Figma plugins, so I’m just going to right-click on my canvas, go down to “Plugins”, go down to “Saved plugins” and then I’m just going to click on the Pitchdeck Figma plugin that we just set up. This is going to run the Figma plugin that we just set up a second ago, and you can see here that I’ve already got a little simple design for my presentation setup.

If you haven’t used the Figma plugin before, the way it works is it treats every Figma frame on the page as a slide. If you create a new Figma file and then start adding these frames. I’ve just set them to 1920 by 1080 pixels, that’s full HD resolution, and you can just populate those frames with Figma content layers. You can see here I’ve got some content layers, text layers, image layers, things like that; and these will all pop up in your presentation here. I’m just going to go through a few of these Figma layers and add Lottie file animations to them. The way we can do that is by clicking on this little tab up here which is says “GIFs/Videos/Embedds”; I’m going to click on that, and you can see here that the content changes from animations to adding some input fields that we can paste links into. You can see here that there’s a couple built in; there’s GIPHY and Pixabay integrations built in, but if you click on this little link here, it’s going to take you to the docs page of the Figma plugin site, and you’ll get a list of all the supported embeds that you can actually add into these input fields.

Today we’re going to be focusing on Lottie files; Lottie files, if you haven’t used them before are a special type of animation format for the web. You can go to lottiefiles.com and you can browse a bunch of preset animations that you can use in your projects. For example, if we wanted to use this animation, all we need to do is click on the animation, and make sure you’re signed into your LottieFiles account now, it’s free to set up an account; and then what you’re going to be looking for is this “Lottie animation URL”, down here where it’s got this little URL, you want to click on the little “Copy” icon and copy that to your clipboard.

Then if you go back to your Figma file, and find the Figma layer that you want to add a Lottie animation to; in this case, I want to add it to my image here. I’m just going to paste in that Lottie animation link and that will automatically load in the Lottie animation to our Figma presentation. You can see here that we’ve pasted that Lottie link into the embed field and that’s automatically loading up the Lottie animation into our Figma slides. We can do that again, we can add another one. If we want to add another Lottie animation, we can just click on any of these again, click on the “Copy” link where it says “Lottie animation URL” and copy that Lottie link back into Figma. If we want to add that to another Figma frame, just go to the other Figma frame and then click on the input that you want to add it to, paste that in there, and you’ll see again this will automatically load up the Lottie animation.

Now that we’ve got that in there, we want to export this to a presentable slide URL, and the way we do that is just by clicking on the “Export Presentation” button in the Figma plugin, click on that, and I’ve already created a presentation; if you haven’t created one yet, it’ll say “Upload Presentation”. I’m just going to update my link, so I’m going to click on the “Update Web Presentation” button, and this is automatically going to export the slides to a special link that we can now use to present this presentation. What you can do is you can either get the link and password, or just get a passwordless link; I’m just going to click on that and copy it and in my browser, I’m just going to paste that link, hit “Enter”, and this is going to load up the presentation that we just uploaded from Figma.

You can see here we’ve got our first Figma slide with the normal image, but if we go to the next slide you can see here that the Lottie animation that we added to our Figma file has automatically been embedded into that Figma frame’s image. Then if we go to the next one, you’ll see again our other Lottie animation that we added to the presentation has also been added here; this this is a really nice way of adding more advanced animations into your presentations that have been exported from Figma. You can see here it’s just those those two layers, the rest are all the same; they’re just normal images from the Figma layers, but again if we go back to the other layers we can see here that our Lottie animations have been embedded; same with this one as well.

That’s basically it; you can also upload your own Lottie animations, so there’s a way to drop your Lottie animations that you’ve exported from After Effects or created in a different tool, you can also just upload those JSON files. That’s all the Lottie files are, they’re just basically a JSON file, and if you upload the JSON file to either your own web hosting link, or own server, or Lottie files itself actually has a way where you can do this. If you sign into your Lottie files account and just look for a place to upload the Lottie file, the JSON file, you’ll actually be able to get your own lottiefiles.com link, so you can actually upload your own Lottie animation files if you know how to do that. That’s just one other thing I wanted to call out before we wrap up the Figma tutorial.

I’ll leave it there for today, I just want to keep it really simple to show you how to embed Lottie animations into your Figma slides if you’re designing your slide decks in Figma and using the Pitchdeck Figma plugin, this is going to be a really easy way to include those Lottie animations into your Figma presentations that you can present with the Pitchdeck presentation web app. Thank you as always for watching, and we’ll be back with more Figma tutorials just like this one very soon.