How to add video embeds to Figma banner exports using Bannerify

Video Transcript

Today I’m going to be showing you how to add videos to your Figma banner designs and then export those out to HTML, GIF, or MP4 videos.

To get started we’re just going to go to the Figma Community and we’re going to search for “Bannerify”, and under the “Plugins” tab you’ll see “Bannerify” pop up. Just go ahead and click on the “Install” button on the right hand side and then you’ll be ready to go.

I’m just going to jump back into my Figma file now, and I’ve just got two frames set up and these just contain a bunch of layers that I want to use in my banners. To run the Figma plugin that we just installed I’m going to right click anywhere, go down to “Plugins” and then click on “Bannerify” and that’s just going to run the Figma plugin we just installed a minute ago. As I mentioned it’s going to pick up on those two frames because that’s what it counts as banners; we’ve got a portrait and landscape, and I’m just going to load both of them in by clicking on the “Load Selected Banners” button.

That’s just loaded up our banners and you can see here that it’s reflecting all the layers in our banner frames in Figma. This Figma tutorial won’t be going through how to design and animate all these layers, this Figma tutorial is really just going to be focusing on how to then enhance those banners by embedding videos into any of the layers, then they can be included in the banner exports. As I mentioned, we’ve got a really simple animation which you can play through just by clicking on the play button, and I’ve got that mirrored in both of my banners. I’ve gone ahead and added these simple animations beforehand just to give us a starting point; now that we’ve got this static background I actually want to make that into a video background to make this banner a little bit more dynamic.

To do that we can just go to our web browser, and for this example I’m just going to be using a video from this testvideos.co.uk website, but you can also go to other websites like pixabay.com, which have a whole bunch of free stock videos that you’ll be able to use as well; I can show you what that looks like in a moment. For example, if we wanted to just drop in our first test video, all we need to do is go down to whichever resolution you’re after, I’ve already picked one out, so I’m just going to use this one. You can see here this is what the video looks like in its full form; I’m just going to grab that URL and I’m going to copy and paste it into Figma. I’ve just highlighted that URL for the MP4, and it’s important that the URL is actually an .mp4 video or a .webm video; make sure that it’s an .mp4 and then jump back into Figma, having copied that link, and then just go to your video placeholder layer or any layer you want to add a video on, and click on the settings icon. Once you’ve clicked on the settings icon, just down here at the bottom you’ll see a little embed icon, all you need to do is click on the text box and then just paste in the link that we just copied.

I’ve just pasted that in and now I’m just going to close off the settings panel and you’ll see here that our placeholder image has now been swapped out with the video that we just copied. If I play through the timeline you can see that the video is actually syncing up with wherever I jump to; we can get a real-time preview of what that looks like alongside all of our other animations, and if I just hit play, you’ll see that the animation, or the video rather, is playing back in our timeline along with our other animations.

I can also apply this to my other banner just by doing the same thing. Another easy way to do this for multiple banners, for multiple layers in multiple banners, is just to click on the banners that you want to add the video to; for example, if I click on the placeholder one and then click on the other placeholder, and then all I need to do is go down to here in this little media embed column and just click on the input again and paste that in there and click on the “Apply Embed” button, and you can see that’s applied the video to the two layers that we just selected. That’s just a really quick way of doing it if you’ve got a bunch of layers you want to apply videos to. Another way that you can select those really quickly is just going to the “Quick Select” menu up here and just clicking on the layer that you want to add the video to; click on that, and that will automatically select those two layers for you. That can be really helpful if you’ve got a bunch of banners with the same name layer that you want to apply the video to.

As I mentioned, you can use this with any video files, any .mp4 files; for example, if we go back to our stock video website, et’s grab this one, just click on that and you want to click on “Free Download”, just select a lower resolution and click on “View” and that’s going to open up the .mp4 URL in our browser. I’m going to copy that link the same way I just did with our other one, jump back into Figma, and I’m just going to go down to my settings again; you can just click on the import logo or on this settings icon, either will work, and for this case I’m just going to replace it as a bit of a test. I’m just going to paste in our new stock video, close off the settings, and again you can see it’s swapped in the Figma video background embed as we’d expect. That’s what it looks like, I’m just going to swap back to our other video just for the purposes of this Figma tutorial and give you a little bit of a preview of how that looks when we export it; I’m just going to drop that back in there.

Now we’ve got them both synced up and I’m actually going to get rid of the fade-in animation; I’m just going to remove the animation on those videos just so it doesn’t have to fade in each time. That’s what that looks like, and now if we want to export those out we can do it to multiple formats. The first format I’m going to do is just Figma to HTML; I’m going to click on “Export to HTML” and I’m just going to leave all these settings default, you can go ahead and change these if you need to, but I’m just going to leave them as defaults, and I’m going to click “Export Banners” and this is just going to export those banners out to HTML for me. I’m going to save them to my desktop, I’m going to open up the zip file by double double clicking on it, opening up the folder, and now if I go to my index.html page, which is just a preview page, I’m going to go ahead and open that up in my browser and you can see here that the videos are playing back as a video background as we’d expect. Those are looking pretty good. Again, I can just replay that and you can see the animations are coming in over the top; that’s looking really nice.

Then the other thing that we’ve got in our banner folder, if we just open it up is you’ll see here that there’s also a .jpg included, which is our fallback placeholder image; the placeholder image automatically gets exported. In the HTML, you’ll see that if you open up that HTML file, you can just do that here, and then we can just view the source; we’ll click “View Source” and if we search for our video, you’ll see here that the “poster” attribute is actually being set to the .jpg; if for whatever reason the video doesn’t load in the browser, it will fall back to whatever you set the poster as in Figma. That just relates to the video placeholder layers that we’ve got in here which are these ones; that’s just worth noting in case you’re wondering what that file’s doing in there.

Now that we’ve exported HTML, I’m going to do one last export and to show you what it looks like to export this out from Figma to a video file. Again, I’m going to click on the “Export to GIF/Video” button instead, and this time I’m just going to click on “Export to WebM”; this is going to export our banners from Figma to video instead of Figma to HTML, and this is really handy for things like social media ads, or any format where an HTML banner just isn’t going to work and you want to use a video, or if a certain platform requires video, this is probably the better way to export it. You can also export to GIF, and you can also export to MP4 video as well, but in this case I’m just going to show you what it looks like with a WebM video.

It’s just finished zipping up our banners; I’m going to click on that “Download” button again, I’m going to save that to my desktop, double click on the zip file, double click on the folder, and if I drag that index file into my browser this is just going to load up a preview page of my banners. You can see here that instead of them being exported as HTML banners, these are now video files; these are being played back just on the HTML page, they’ve been embedded as videos, so these are ready to go if you want to upload them to a social platform, or convert them to a different video format, you can do that as well; you just have to open up the videos folder. If we jump back to our desktop open up the videos folder you can see here that these two here are the actual video files; if we were to drop that into the browser, too, you can see that this is a proper video that we can skip through, and that’s what it looks like.

That’s that’s basically the whole Figma tutorial; these are the formats you can export to, and as I mentioned, you can also export these banners from Figma to GIF or Figma MP4, but for today I just wanted to keep it really simple and just show you the example of exporting from Figma to HTML, and Figma to video in WebM. I think that’ll do it for today, I hope you found this useful if you’ve been wondering how to add video embeds into your Figma banners using the Bannerify Figma plugin; this has been requested for a little while, so I’m glad to finally be able to reveal this and show off how it works. I hope you can unlock some more creativity that you weren’t able to access before with this new video feature, so I hope you and your team have fun playing around with it. Until next time, thank you as always for watching, and we’ll be back soon with more Figma tutorials just like this one.