Video transcript
10-minute video ·
Today I’m going to be showing you a quick tutorial on how you can automatically batch export any Figma motion layers from your Figma file out to compressed GIFs or MP4 videos using the TinyImage Figma plugin. To get started, all we need to do is go to our Figma file. If you go down to the actions icon down here and click on that, if you search for TinyImage, under the Figma plugins tab, if you click on the TinyImage item, 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 button. That’ll let you run the Figma plugin from your Figma plugins list. I’ve already clicked on the save icon there, so I’m just going to go to my Figma canvas, right-click anywhere, then go down to plugins, go down to saved plugins, and click on the TinyImage compressor item. That’s just going to load the Figma plugin that we saved a second ago.
If you’re new to the Figma plugin, it has a bunch of different features. By default, it will allow you to export any of your Figma layers with exportable image settings on them out to different formats like JPEG, PNG, SVG, PDF, that sort of stuff. But today we’re just going to be focusing on exporting our Figma motion layers to GIFs and MP4 videos. If you’re new to Figma Motion, it’s a new feature in Figma that allows you to natively apply animations to your Figma layers. You can basically open up the motion timeline, add animations on any of your Figma layers like these ones here, and then we’re going to use that animation to export GIFs and MP4s from the Figma plugin based on whatever you’ve added to your Figma motion layers.
To do that, all we need to do is go to the Figma plugin and then click on the GIF tab at the top here. What we want to do is navigate to the Figma motion export option down here. This secondary tab over here, we just want to click that. Once you click on that, we’re then going to be able to load in our frames into the Figma plugin. By default, it will try and automatically look up those frames. If you’ve added any more to the page since you loaded that tab, you can refresh it at any time by just clicking on the refresh icon over there. That’ll allow you to do that. In the meantime, I’m just going to close off the panel to get a bit more space down here and refresh those again. You can see that we’ve got three layers. We have three different motion layers, and these are all the same animation with different background colors. I wanted to show you this because it allows us to select which layers we want to export from the file. I can either select all three or just one or two. It’s totally up to you.
You can see down here that I’ve got a bunch of export settings for my format. I’ve got this currently set to animated GIF, which is why it’s allowing me to set some things like the number of colors. It’s going to allow us to select the compression and optionally set file size targets and things like that, and also the number of times it will loop. We can either loop it forever or just have it play once, and either of those are totally fine. We can also set the scale. If we want to scale up the exports by 200% of their Figma size, we can do that. We’ve also got control over the frames per second as well. We can select either 30 frames per second and have it really smooth or set it to something like 15 frames a second and have it less smooth but with a smaller file size. I’m just going to leave these as the defaults for now. Then we’re going to go ahead and select all three of these layers. I’m just going to click on the export three GIF files button up here. That is basically going to open up the rendering tab and render out all three of our GIFs from those three Figma motion layers. You can see that it’s just finished saving all three of those, and the Figma plugin has now zipped up all of those three GIF files automatically. It’s prompted us to save it to the computer. I’m just going to click on the save button here and save it to my desktop.
If I go ahead and open up that zip file, I can unpack the folder. You can see that in that folder, we’ve got these three GIF files. These are each of the files that we just exported from the Figma plugin. You can see that each of them is rendering the animations nicely as GIFs with those settings that we exported a minute ago. That’s looking really good. We can now close off the export tab here and go back to the Figma plugin. Again, we can now either change those settings. If we wanted a smoother animation, you could change that to 30 fps, or if you wanted a smaller size target, you could put that in, and the Figma plugin will automatically handle trying to get the size down to what you need. If you want to export to a different format, it supports a few different formats like MP4 video, for example. We could select MP4 video, and instead of exporting it to GIF, we can do it for video. We’ve got options down here to do 30 fps or 60 fps. I’m just going to do 30 for now. Again, you’ve got options to scale it. If you want to double the size or half the size of the layers when they get exported to video, you can do that. You’ve also got an option for the quality of the video. If you want a really high-quality video with a larger file size, you can set it to high. If you need a smaller size, you can set the quality to low. In this case, I’m just going to leave it set to high. Then I’m going to click on the export three MP4 files button up here. That is going to open up this rendering tab and process that queue of layers. In this case, again, we’ve got three layers queued up, and that’s going to let us automatically export those out and then package them up into a new zip file. I’m just going to call this one video just so we know what it is and click save.
Again, I’m just going to double-click on my zip file, open up that folder, and then we’ll see that we’ve got three video files. Now we can see we’ve got three MP4 files, and I can open those up in the Mac preview here. We can control that because it’s a real MP4 video. We can scroll that back and forth and see that those are real videos compared to the GIFs that we just exported a minute ago, which don’t have those controls. That’s roughly what it looks like. I just wanted to show you that you can do this for bigger frames as well. We’ve got this other Figma file that’s taken from the Figma community. You can see this is quite a big one. This is 2000x2000 pixels. I’m just going to rerun the Figma plugin in this file as well. We’re going to automatically get set to the Figma Motion export tab because that’s what we just ran it through in here. The Figma plugin will automatically save the last active tab you used, so we didn’t have to reselect that. You can see it’s gone ahead and found that Figma motion layer automatically. This is quite a complex animation. If we open up the timeline, you can see there are many layers, and the animation is quite complicated, but this Figma plugin will allow you to export it as well.
I’m just going to close off that timeline and go back to the Figma plugin. You’ll notice that there’s a little tip down here, which is essentially just flagging that if you’re on a starter plan in Figma, the motion exports are limited to 1920x1080 and capped at 30 frames a second. Just be mindful of that. Because you can see here that this one is 2000 pixels, which exceeds that, I’m going to show you how the Figma plugin will automatically handle that limitation, and it will automatically cap the size and make sure that the layer still exports. If we go to the video format, I can do that here and just set that to 30 frames a second, then click on export MP4. You’ll notice that when we open this up, it’s going to render it out. You can see that it’s been capped at 1080x1080. The video’s just finished rendering, so I’m just going to save that directly to my desktop as a single video file. If we open that up, you can see here that we’ve got the video playing back nicely as an MP4 file. That’s looking really good. Just like before, we’ve got the video controls here, so you can see that all playing back really nicely as a video.
That’s looking really good. As I mentioned, you can see here that the size was capped to 1080x1080. If you’re on a plan that has paid Figma Motion support, that will let you uncap that to larger sizes and larger frame rates. The feature in the Figma plugin is that it will automatically handle that for you. You can see here that it will say that Figma’s free plan has export limits. The TinyImage Figma plugin has essentially scaled down the export to 1080x1080 and capped it at 30 fps while leaving the original frame unchanged. That’s just to help you avoid any headaches or roadblocks if you’re sharing the Figma file with an account that doesn’t have those paid enhancements. The Figma plugin will automatically do that for you. If you are running on a plan that supports those higher resolutions and higher frame rates, then the Figma plugin will export at those higher frame rates as well. I just wanted to give you a small heads up in case you run into this later.
That’s essentially it. If you’re using the Figma Motion tools to animate your layers and you want to quickly and easily bulk export those layers or just want more fine-grain control over some of those settings, being able to do things like change the size targets, this is a really nice interface for doing that in bulk. It’s going to make it just a little bit smoother for you and your team to export these Figma motion designs out of the Figma file in the way that you and your team or your clients need. As always, thank you for watching, and we’ll be back with more Figma tutorials like this one very soon.
Pro Bundle