How to export animated MP4 videos from Figma using TinyImage

Video Transcript

Today I’m going to be showing you how to export animated MP4 videos from any Figma layers in your designs using the TinyImage Figma plugin.

To get started we just need to install the Figma plugin or run it by going to your header bar in Figma, then click on the little icon that says “Resources” and if you go to the “Plugins” tab and search for the word “TinyImage” and you’ll see the TinyImage Figma plugin pop up. If you click on that you’ll be able to run that Figma plugin by either clicking on the “Run” button here or you can save the Figma plugin for later by clicking on this “More options” icon and clicking on the “Save Figma plugin” button that’s underneath that; once you’ve already installed the Figma plugin you can run it as I said by clicking on the “Run” button or you can just right click anywhere, go down to “Plugins” and then go to “Saved plugins” and click on the TinyImage Figma plugin, and that’s just going to run the Figma plugin that we just set up a second ago.

You can see here in my design I’ve got a really simple design with a handful of different images in it, and I basically want to create a animated MP4 video from these images and export that from Figma. I’m going to do that by selecting all of the image layers that I want to include; I’m just going to select all of those, and you can see they’ve been selected on the canvas, and then in our Figma plugin we’re going to click on the “Create GIF/MP4” button in the header here. I’m going to click on that button with these layers selected and that’s just going to load up a little preview of what this animated export is going to look like.

You can see by default it’s setting a 500 millisecond delay between each of these frames, and you can see we’ve got all the frames here each of them is going for half a second we can actually change that; if you wanted to make that a bit slower we can change it to be one second per frame or you can even override each frame with its own special override. If we wanted to just make a couple of them quicker we can easily just add those overrides in here and when it gets to those frames it’ll skip over those quicker because we’ve specified that to be a bit shorter. I’m just going to leave a couple of those like that, and I’m going to leave the other ones at just one second because I think that’s a pretty good speed for the animation we want to export today.

The other thing you can do is you can also set if you want the images to cover or contain the size of the image; for example, this is currently set to “Cover” if we change that to “Contain” it will automatically fit the entirety of the image into the frame and basically it uses the first frame in our selection here as the default width and height, but you can go ahead and change that if you wanted to, or you can scale that up or down proportionally. If you wanted to make that double the size you can see that it’s going to export it at a much higher resolution, but for today I’m just going to leave it at “1x” and I’m going to set that to “Cover” because I want the images to fill up all the available space and not have any empty space or black lines or anything around the image.

Once you’re happy with your animation, all you need to do is change it from the default export format of a “GIF” and you want to click on that little select icon and instead click on the “MP4 Video” option; I’m going to click on “MP4 Video” and we’ve got our animation set up the way we like it. If we wanted to we could also rearrange these frames; if you wanted to sort the frames in a different order you can sort them visually we could change it so the frames are automatically ordered from right to left, for example, that would reverse the order. You can also drag and drop these around if you want to manually change the order of some of these frames, you can totally do that as well, but for today I’m just going to leave it as sorting it by the default order of left to right, so it matches what’s on our canvas already.

Okay, I’m all done and I’m ready to export the frames from Figma to MP4 video; now all I have to do is click on the “Export MP4” button and that’s going to take those Figma frames and generate an MP4 video from Figma and allow me to save it anywhere on my computer. I’m just going to save it on my desktop, and you can see it’s just saved, and now if I click on that video on my desktop and double click it, it’s going to open up the MP4 video file. You can see we’ve got the “.mp4” extension and now I’m just going to hit “play” and you can see here it’s exported our animated MP4 video from Figma the same way that we designed it in the Figma plugin.

If we replay that one more time you’ll be able to see that most of these frames go for a second and then we’ve got those two frames that also go for half a second; this one and this one are a little bit quicker, but that’s basically what it looks like. It’s exactly what we exported, and exactly what we designed in Figma has now been exported as an animated MP4 video really quickly, so you don’t have to use any other video editing tools or any complex software just to get these images from Figma into an animated MP4 video; you can just click one button once you’ve designed it in the TinyImage Figma plugin and export it instantly to a usable MP4 video. You can post it on social media or anything you want really, you can just share that video file around that’s now on your computer.

That’s basically it for today, I just want to keep it really simple to show you how to take any layers in your Figma file and turn those into an animated MP4 video from Figma; this is the way to do it, if you want to do it really quickly. Feel free to give the TinyImage Figma plugin a go and hopefully it improves your workflow. I’m going to 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.