Video transcript
5-minute video ·
Today I’m going to be showing you a quick tutorial on how to import MP4 video files to animated GIF layers in your Figma file with one click using the Convertify Figma plugin.
To get started, all we need to do is open up a new Figma file or your existing Figma file, go down to the little toolbar down here, and click on the actions icon. Then you just want to search for Convertify. Under the plugins tab, you’ll see the Convertify item pop up. Just go ahead and click on that item.
What you want to do next is come down here, and you’ll see a button that says “Save.” If you click on Save, it’ll save it to your plugins list automatically. I’ve already saved it to mine, so that’s why it says “Remove” there. If you’ve saved it, you can go ahead and click on this “Run” button here. Or you can actually just right-click anywhere, go down to Plugins, go down to Saved Plugins, and then click on the Convertify item. That’s just going to run the Figma plugin that we saved a second ago.
Today we’re going to be showing how to import a video as a GIF layer in your Figma file. By default, this option here is going to be set to “Export Figma to Sketch.” All you need to do when you run the Figma plugin for the first time is just click on the little dropdown item here, go down to the “Import to Figma” section, and find the “Import Video as GIF to Figma” option.
You can see here it’s allowing us to drag and drop an MP4 video file. I’ve already grabbed a couple of MP4 video files from this site called Pixabay. It just has some free video files that you can download. You just pick a video, go down here to the download option, and you probably want to select the lower resolution one just to make the import a little bit faster and smaller. I’ve selected the 720p one, and you can see I’ve got that on my computer here.
We’re just going to go back to Figma, and I’m going to drag and drop that MP4 file from my computer into this little window here. If you let that go, you can see here that it’s going to start importing that video to a GIF. It’s basically converting every single frame from the video and converting each of those frames into a GIF frame. Once it finishes, it’s going to insert that GIF automatically into our Figma page.
I’ll just speed this bit up so we can get through it much more quickly. You can see it’s just finished converting the GIF. You’ll notice here on our page, if we go to the fill, it says GIF over here. If we open that up, you can see it’s loaded up the little preview window of the Figma fill. Because it’s a GIF, we can click this play button here to see the GIF play back directly inside of Figma.
It’s essentially converted, as I mentioned, every single frame of the video into a GIF. Now this Figma layer here is actually just a GIF layer. It’s used the file name as the image name. You can see there’s a little play icon there showing that it’s a GIF video, and you can now use that in your Figma layers however you like. You can obviously resize that if you need to. You can just treat it as a normal Figma layer.
I’ll just show you a couple more examples. I’ll drag and drop another MP4 file in here, and you can see there’s a little live preview of exactly which frame it’s up to. You get a sense of how far the progress is, if you’re familiar with the video. In this case, I’ll just preview the video file as well. If we open up this folder here, you can see in the live preview this is the original MP4, and you can see the preview of that video in the Figma plugin as it’s converting it. That just gives you a bit of a sense of where the video is being converted.
Once it’s finished, it’s going to add it to your Figma file automatically. Again, we can open up the Figma fill, and you can see down here with the play icon, we can just see what that looks like in there. The GIF is playing back as expected.
That’s basically it. I’ll just do one very last example to show this example of this jellyfish one. The reason I wanted to import that is just to call out another small thing to note. If I just drag that in, you’ll notice here that it says this feature supports a maximum video length of 60 seconds. That’s just something to be mindful of.
This is designed for much shorter clips. These are about 15 seconds long, but ideally, you want to keep them pretty short. As mentioned, you can basically import MP4 files up to 60 seconds in length. If they go longer than that, the GIFs are just going to be really, really, really big, and it’s going to slow down your Figma file. You want to ideally keep those pretty short—between, you know, five to fifteen seconds would be ideal. But as it says, you can go up to 60 seconds if you don’t care about the enormous file size that might result from that.
Again, we can preview this one in Figma. I’ll just click on play, and that’s going to load the MP4 video we just converted to an animated GIF. There we go. We’ve got three different MP4 video files that we’ve now imported as animated GIF layers in your Figma file, and you can use these basically however you like. You can use them in Figma prototypes, you can use them with certain plugins that support GIF exports, or a variety of other uses that you might have for implementing animated GIFs created from MP4 videos in your designs.
I hope that’s helpful if you’ve been wondering how to get MP4 video files into your Figma files but as animated GIFs rather than videos. This is a really easy way to go about it, where you can just do it in one step rather than having to convert the video file to GIF outside of Figma and then import that GIF into Figma. You can just do it all in one step using the Convertify Figma plugin.
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