How to add audio to Figma video banner exports using Bannerify

Video Transcript

Today I’m going to be showing you how to add audio or music to your animated banners that are exported from Figma as MP4 video files.

To get started all we need to do is install or run the Bannerify Figma plugin; and you can find that by going up to the top of your Figma file where it says “Resources”, click on that little icon and then you just want to search for the word “Bannerify” and you’ll see Bannerify pop up under the “Plugins”, tab all you need to do is click on that result, and you’ll see this little window pop up. If you haven’t already done so, you can install or save the Figma plugin by clicking on this little three dots “options” icon then clicking on the “Save Figma plugin” menu item that you’ll see. If you’ve already saved it, we can run the Figma plugin by either clicking on this “Run” button in the Figma plugin window, or you can just right click anywhere on your Figma page, go down to “Plugins”, go to “Saved plugins” and then click on “Bannerify”, and that’s just going to run the Figma plugin that we just saved a moment ago.

I’ve already got a bunch of banners designed, and each banner is treated as a Figma frame; every Figma frame you can see on the left here is an individual banner and each of those banners have layers in them which make up the banner timeline. I’m just going to select a couple of these banners that I’ve already designed, I’ve got a half page skyscraper and I’m also just going to select the medium rectangle and load those two banners by clicking this button here. That’s going to load up the timeline that I’ve already created and you can see here if I just click the “play” button, that gives you an example of what the animation looks like, it’s just a really simple four second timeline and that’s what it looks like.

In this video I’m not going to be going through how to actually design the banners and how to add the animations, if you’re interested in that and you’re new to the Figma plugin you can find some other Figma tutorials on the YouTube channel; just search for the “Bannerify” playlist and you’ll be able to find a bunch of those; today I’m just going to be assuming that you’ve already designed your banners and you’ve already animated them in a way that you are happy with, and all you want to do is now export those to MP4 with an audio track included.

This is a new feature, and to use it all we need to do is click on the “Export to GIF/Video” button up here in the header of the Figma plugin; I’m going to click on that and you’ll see down the bottom here we’ve got a bunch of export options. If you’ve used this Figma plugin before you can see that you can export it to a range of different formats and the one we’re going to be looking at today is the MP4 export. If you just click on the “Export MP4” button that’s going to render out the banners that you’ve animated in Figma to an MP4 video file, but it’s not going to have any sound whatsoever; these are just muted or banners with no audio on them, which can be handy for different applications, but if you want to add some audio or some music this new feature is going to allow you to do that.

It’s fairly straightforward, all you need to do is find an MP3 file that you want to use; I’d recommend just searching online, and there’s a link in the Figma plugin to a website where you can find free audio files. If you click on that link it’ll open up this website, the Pixabay website, where you can search for music and these are free to use for commercial use. You can find any of these songs or any of this audio and you can use this for commercial use for free, so we can browse the tracks and we can find one that we like; for example, I might click on the “Alternative Hip-Hop” filter and you can basically go down and preview different tracks. If you click on the play button that’s just going to give you a little preview, and once you find one that you like; for example this “Chill Hip-Hop” one, we might want that; all you need to do is either click on the “Download” button or just right click that link and click “Save link as”, and you can save that to your computer.

If you save the MP3 file to your computer, now we can jump back into Figma and in our Bannerify Figma plugin you’ll see down here that there’s an export setting for MP4 to click or drag and drop an MP3 audio file. I’m going to grab the one that we just downloaded a moment ago, so I’ve got the “Chill Hip-Hop” one here; I’m going to grab that from my desktop where I saved it and just drag and drop that MP3 file into this little drop zone area in the Bannerify export options. I’ve just let go and you can see there that it’s added the MP3 file from our computer into the Figma plugin, and that’s basically ready to go.

Now all we need to do is click on the “Export MP4” button and that’s going to render out our banners that we’ve already selected in the Figma plugin and it’s going to encode them to MP4 video files. but this time it’s going to be exporting them with that MP3 music track automatically inside of the MP4 videos, so these videos are going to have sound in them. Once the banners have finished exporting to MP4 all you need to do is click on the “Download your zip” file button and save that to your computer; then I’m just going to unzip the file by double clicking on it, and you can see here it’s going to give us a folder, and we can see in the folder we’ve got our videos folder which contains the MP4 files.

I’m just going to load up that HTML file in the browser just to give us a really quick preview of what’s actually in those video files. I’ve just dropped that into my browser and you can see here that the videos aren’t auto-playing, and the reason for that is because they have audio on them; you can’t force it to automatically play in the preview. All we need to do is click on the little “play” icon for the video and you can see there that we’ve got our video playing back with the audio track that we added to Figma automatically included in that MP4 video. The same goes for the other banner that we exported, it’s just playing the small one but the audio track will automatically get added to every banner that you export. For example if we play this larger banner, I’ll play that one now, and that has the exact same audio track, too.

You only need to drag in the file once and when you export the banners from Figma MP4 video, the audio is automatically again be included in all of them; you don’t need to do it one by one, you can just apply it to all of them in one go, so hopefully that speeds up the process a little bit.

That’s basically it; it’s fairly straightforward, it’s just a brand new field in the export settings that you’re already used to if you’ve been using the Bannerify Figma plugin before, this just gives you a little bit of extra flexibility to include audio to your Figma banners that are exported to MP4 videos. This can be really handy if you want to create more engaging social posts, for example, if you’re posting these on platforms like Instagram or other social platforms, adding a audio track whether that’s some music or if you’ve created a narration track, or mixed some music with your voice and you want to create a bit of a narration for your video. this is a really easy way to now include audio to your animated banner video exports from Figma.

That’s it; I’m going to leave it there for today, and I hope you have fun playing around with this new audio feature for your Figma exports to MP4 videos, and until the next time, thank you as always for watching, and we’ll be back soon with more Figma tutorials just like this one very soon.