How to add audio to Figma animated MP4 video exports using TinyImage

Video Transcript

Today I’m going to be showing you how to add audio to your MP4 video exports from any Figma layers using the TinyImage Figma plugin.

To get started we just need to go to the “Resources” icon in the top of your Figma file and search for the word “TinyImage”, and under the “Plugins” tab you’ll see the TinyImage Figma plugin pop up. To run it, all you need to do is either click on this “Run” button here or you can save the plugin to your Figma plugins list for later by clicking on the “More options” icon here and clicking on the “Save Figma plugin” icon that pops up. I’ve already got it saved to my Figma plugins list, so I’m going to go to my canvas, just right click anywhere, go down to “Plugins” go down to “Saved plugins”, and then just click on the TinyImage link; that’s going to run the Figma plugin that we just set up a second ago.

You can see here that we’ve got a really simple Figma file, I’ve got a bunch of images that I want to export into an MP4 video from Figma, and I want to add some audio sound to that video as well. I could use this for a social media post or share it around as a video on any kind of service that supports video, and to do that we just need to start by selecting the Figma layers that we want to include in this video. I’m just going to select all of these Figma layers, I’ve got seven layers selected, and then in the TinyImage Figma plugin you just want to click on the top button here that says “Create GIF/MP4”, so we’re going to click on that button now, and because we’ve got those layers selected when we click the button it’s going to automatically load those seven layers into this little timeline.

By default, it’s going to arrange the images just by the order that they’re laid out on the canvas, but you can change that automatically by changing this option here. If you want to sort the images from right to left, for example, visually you can do that and it’ll automatically rearrange it. If you’ve got the layers organized in a different way on the page you can sort them by rows, if you’ve named them in order you can sort them by their layer name, if you’ve numbered them it’ll automatically sort them by layer name, or you can just use the layer order as well, or if you want to use the order that they appear on the layer sidebar, you can do that; for today, I’m just going to be using the left to right sorting.

It’s also worth mentioning that you can also customize that manually, if you want to drag any of these frames into a custom order, just click on the little thumbnail and drag and drop those into a different order; but again, I’m just going to rearrange those to be left to right.

You can see here we’ve got a little preview of what the video is going to look like once we export it. You can change the delay per frame, this little slider will basically change the duration of how long each image shows up in your video. We can extend that out to seconds or we can make it really short so it goes much faster. I’m just going to leave it at the one second mark for now and you can also override the delay for any particular frame; if you wanted one to go faster or to go slower you can actually change that directly in these little inputs and that will automatically change the duration of the frame when it gets exported in the playback.

The next thing we need to do now that we’ve got our ordering set up and delay setup is just click on this little “Animated GIF” option and that’s going to open up the select box that will let us change the format to MP4. I’m going to change the format to “MP4 Video” and select that, and you can see down here that after we’ve selected it, it’s giving us a new option to add an MP3 audio track to the Figma MP4 video export. If you don’t already have an MP3 audio sound track you can get this pretty much anywhere on the internet by going to a site like Pixabay, which gives you access to a bunch of royalty-free MP3s; you can use these songs in commercial or non-commercial applications.

You can basically just filter the kind of music that you want and preview it; if we were to preview some of these tracks, I’ll just go through a couple really quickly for now. You can basically just go through them and preview them and if you want to download one to use as sound in this MP4 video export from Figma, you can just click that “Download” button and save it to your computer. I’ve already done that; I’ve got this “Jazzy Abstract Beat” saved to my desktop, you can see it up here. Now that I’ve got that saved to my computer, I’m basically going to go back into Figma and I’m going to take that sound file that we downloaded and I’m going to drag and drop that MP3 directly into this little footer area here, then I’m going to let go of that and you can see that it’s changed to showing the little file name and a little tick to say that it’s been dragged In successfully.

This audio is now going to be added to our video export when we export it from Figma, so let’s do that right now. I’m going to click on the “Export MP4” button and that’s going to take the Figma frames that we just set up, take all the timings we just set up, and it’s going to include the MP3 audio sound that we just included by dragging and dropping it. I’m going to click on “Save” and save that video to my desktop, you can see here that it’s saved a new MP4 file and I’m just going to open that right now.

I’m going to double click on that MP4 video with audio exported from Figma, and if we move that over here and click “Play” this should include the audio as sound that we just included in the Figma MP4 video export. I’m going to play that now, so that’s basically what it looks like we’ve got our audio sound included over the top of the MP4 video that we exported from Figma using all the images that we already had in Figma. You can imagine this basically being a enhanced version of a GIF, and you can obviously export this to a GIF as well if you wanted to, but using the MP4 option does give you the option of having the MP3 included as sound for the MP4 video from Figma as well, which is pretty cool.

These can be really handy, as I said, for social media posts if you need to include a really simple social media post just going through a bunch of images. You can obviously add text to these frames, you can add anything you want that you can normally do in Figma to each of these frames; the way you would do that is just by adding these into frames themselves and then adding some text layers onto the top. You could just basically include all of the text that you need, if we were to put that text in there, let’s make that a little bit bigger and then if you would now to select the frame layer as well. I’m just going to do a few layers, click on the little “Refresh” button and you’ll see here that we’ve got our text inside of the image. That’s just a really easy way of customizing your frames if you wanted to add different text or different things into those frames, you don’t have to just use single images, you can also just create frame lockups as well.

That’s basically it for today, I just wanted to show you a really quick tutorial of how to create and export MP4 videos from Figma with audio sound included; MP3 music, or you could do narration as well if you wanted to do voice-overs, or a combination of the two. As long as you’ve saved that MP3 file to your computer you can basically use whatever you want and drag that into the Figma plugin to include that audio in your MP4 video exports from Figma. Thank you as always for watching, and we’ll be back soon with more Figma tutorials like this one very soon.