Video transcript
6-minute video ·
Today I’m going to be showing you a quick tutorial on how you can import Lottie animations into your Figma designs and prototypes in one click using the Convertify Figma plugin.
To get started, all we need to do is go to our Figma file, go down to the actions icon in the toolbar down here, and if you just search for Convertify. Under the Figma plugins tab, if you click on Convertify, you can run the Figma plugin by either clicking on this run button down here, or I’d recommend clicking on the save icon next to that. Then you’ll be able to run the Figma plugin from your Figma plugins list. I’ve already clicked on the save icon down here, so I’m just going to go to my Figma canvas and right-click anywhere. Then go down to plugins, go to saved Figma plugins, and then click on the Convertify item. That’s just going to run the Figma plugin we saved a second ago.
If you’re new to the Figma plugin, it basically has a bunch of different options that allow you to export files from Figma, but also import files into Figma as well. That’s what we’re going to be looking at today. By default, the Figma plugin will open up with this export option selected. All you need to do is go to the select list here, click on that, and then just go down to the import to Figma section and click on the import Lottie as GIF to Figma option. This is going to let us drag and drop JSON files or files which we’re going to download from the lottiefiles.com website. All you need to do is go to lottiefiles.com, and then if you go to the products tab, you can go to the free Lottie animation section or any of the other animation sections on the site, or you might have your own Lottie animation that you want to import, and that’s also totally fine. For today, I’m just going to keep it simple and I’ve grabbed a few of these free animations. I’ve got this one here, another one which is this little loading animation, the Amazon logo animation, and also this Studio Ghibli animation as well. I’ve basically gone ahead and downloaded all of those, and you can either download them as Lottie files or the Lottie JSON files. It doesn’t matter which one you download; they’re both supported. You just have to download those to your computer by clicking on the download button here. You can see I’ve already downloaded those files. I’ve got two in JSON and two in Lottie.
I’m going to show you what that looks like now to upload or drag and drop into the Figma plugin. We’re just going to go back to the Convertify Figma plugin. With that option selected, I’m just going to grab one of these files and drag and drop that into this little drop zone area here. When I let go, you can see that it’s loading up the Lottie file, and it’s basically adding that as an optimized GIF into our Figma file. That’s already finished now. It only takes a few seconds, and you can see we’ve got this brand new image layer with a GIF in it. If I go to the fill, you can see here it’s coming up as a GIF, and I can actually preview that inline inside of Figma. You can basically see the animation has been imported from the Lottie file, and we can now use that in our Figma file. That’s basically what it looks like. I’ll import those other files just to show you a few different examples.
We can do this one with the Lottie extension. It supports the Lottie format as well. Again, you just drag and drop that Lottie file into this drop zone area here and let go of that. It only takes a few seconds, and we’ve got our animated Lottie file imported into Figma. Again, we can click on play in here, and you can see that it’s playing back as we’d expect. That’s looking really good. Because these are imported as GIF fills, they’ll also work in your Figma prototypes. If you’re using prototyping and you want to use these animations in there, they will show up as playable GIFs in your Figma prototypes as well. That can be really handy if you want to enhance the prototype interactions and make them have a little bit more of an animated style on the hover states or success states. These can be really helpful for that.
I’ll just import the last two to show you what they look like. I’m just going to again drag and drop the JSON file into this drop zone area. You can see it’s added that animation as a GIF, and it’s also optimizing the GIFs by default. You can see that it’s got an optimize imported GIF file size toggle, which is enabled. It’s slightly slower, but because the animations are usually so short, you won’t really notice any difference anyway. It’s just going to give you a more optimized, smaller file size in Figma, so it doesn’t bog down your Figma files at all. We can see that that one’s been imported as well. If I play that, we’ve got the walk cycle as we’d expect. That’s looking really good. We’ll do one more, which is the last one. We’ll just do the Amazon logo that we looked at before. Again, going to drag and drop this final Lottie file into the Figma plugin over here. Drop that in, and that’s going to automatically add those frames from our animation. Again, we’ve got the GIF fill over here. We can hit play on that one, and that’s animating in those letters from our Lottie animation. That’s looking really good there.
That’s basically it. I just want to keep this one really short. If you’ve been wondering how to import animated Lottie files into your Figma designs or Figma prototypes, this is a really easy way to do it in one click without having to use any other tools or conversion methods. You can basically just drag and drop the Lottie files or the JSON Lottie files. As I mentioned, it supports both of those formats. You can just go ahead and drop those directly into your drag and drop area here in the Convertify Figma plugin. Just make sure you’ve got that import Lottie as GIF to Figma option selected, and you should be good to go. I hope that helps with your workflow. If you’ve been interested in using Lottie animations to enhance your Figma designs and prototypes, this should be a really interesting way of improving those and adding a bit more motion into your designs without having to manually use the animation tools in Figma. We’ll leave it there for today. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.
Pro Bundle