How to bulk export Figma banner variants from a spreadsheet to HTML or Video/GIF using Bannerify

Video Transcript

Today I’m going to be showing you a quick tutorial on how you can automatically export banner variants from your Figma files using data from a spreadsheet out to animated HTML banners or animated GIF or video banners using the Bannerify Figma plugin.

To get started, all we need to do is go to our Figma file and just click on the actions icon down here. Then search for Bannerify. Under the Figma plugins tab, if you click on the Bannerify item, you can run that Figma plugin by clicking on the run button down here. Or you can click on the save button next to that, and then we can run it from our Figma plugins list. I’m just going to do that now by going to my canvas and right-clicking anywhere, going down to Figma plugins, and then going down to saved Figma plugins and clicking on the Bannerify item. That’s just going to run the Figma plugin we saved a second ago.

If you’re new to the Figma plugin, the way that it works is it basically treats any parent level frames on your Figma page as potential banners, which you can then select here and load those banners into the Figma plugin timeline to animate the content layers inside of those and export them out to animated HTML or GIF or video banners. Today I’m not going to be going through all of the animation features in the Figma plugin. I’m going to assume that you’ve already got your design set up and you’ve got your animations all set up, and all you want to do is export multiple variations with different text or images automatically from a spreadsheet. You can basically just export batches of these banners with different copy and imagery from your initial banner set. I’m going to show you how to do that right now.

All we need to do is click on the variance button in the top menu of the Figma plugin. This is going to give us an area to load in a data source. In this case, we’re going to be using a spreadsheet just using a CSV file. Importantly, you’ll notice that I’ve matched up the header columns, the names of those columns with my Figma layers. For example, you can see this text layer here is named hashtitle, the same as this column here. Likewise with subtitle here, that’s also named the same. We’ve also got a character image layer, which has been mapped up to this row D here. We’ve also got a CTA text named as button as well. All of these layers are mapping to our Figma banner layer content layers in terms of their names.

Now that we’ve got all those set up, I’m going to show you how to include images locally as well. If you don’t need images, you don’t need to worry about this step, and you can just drag and drop the CSV file directly. In my case today, I just want to show you how you can also include images. The way to do that is you basically have your spreadsheet file. In this case, I’ve got this banners.csv file. What you want to do if you need to include images is just make sure that the image names you’ve used in the spreadsheet are named the same as your images here. Then you just want to go ahead and zip up the CSV or Excel spreadsheet file along with the image assets that you want to include. In this case, I’ve already done that here. If I unzip a copy of the zip file, you’ll see that inside of that zip file, we just have the same files, the CSV and then some PNG images.

Now, if I drag and drop this zip file into my Bannerify Figma plugin here, that should automatically load up a preview of the images and the content. Once I’ve dragged that in, you can see that it’s loading up those three rows. I’ve loaded up all my content exactly, and it’s also found those images and is loading a little preview there as well. Importantly, you can also customize the folder structure. If you want to use custom naming, you can check out the documentation if you click on that link there. That’s going to give you just a bit more detail about all the different variables you can use. But today, I’m just going to leave that default.

Now that we’ve got all of that set up, we just go ahead and click on the close variance panel option. You can see here that it’s picking up on that change. It’s telling us that we got three variant rows selected. Now all you need to do is just export the banners as you normally would. You can just go ahead and click on export to HTML, for example. Select the platform you want to export the HTML for. Today I’m just going to leave it basic, just HTML and CSS. Then I’m going to go ahead and click on the export banners button, and that’s going to load those 20 total variants and automatically swap out that content and the images as we’re exporting it. You don’t have to manually go through and update all of those content layers yourself.

Once it finishes, you can just go ahead and click on the download zip file button, save that anywhere to your computer, and then if you unzip that file, you’ll see that we should have all of our banners exported. If I open up my banners folder, we’ve got all of these different variants in there. We can preview those all at once just by opening up the index.html file. In this case, you can see here it’s loaded all those up. For each of the original designs, we’ve got all of these five banners here. For each of those, it’s including those three other variants as well. You can see we’ve got one here, one here, one here, and likewise for all of the other sizes as well. That’s looking really good. It’s basically just loaded in the content. You can see all the different content we added and the different images. It’s gone ahead and automatically swapped all of those layers out during that export process.

You can see that it’s done it in a non-destructive way in Figma. All of our original Figma layers have been maintained. It basically just makes a copy of those temporarily, swaps out all the content, and then exports it to the final format. Likewise, you can export them to GIF or video as well. If you want to use that option, you just go ahead and click on the export to GIF or video button, select the format you want. If you need a GIF or an MP4, you just go ahead and do that. Clicking on the export button again will automatically export all of those variants from your spreadsheet out into that other video format or GIF format as well. That’s basically what it looks like. It’s the same process. You can just control it all through the variance panel up here, and then you’ll be good to go.

Importantly, it’s worth noting that because there’s a file size limit on the data you can store in Figma, if you are running the Figma plugin and closing it off between sessions, you will just have to reimport that data back into the variance panel. For example, I’ve just reloaded the Figma plugin. Now, if I go to the variance panel, you’ll notice that it’s empty. Again, we just have to quickly drag and drop our asset back into there. It’s going to load up the content again, and then you’re ready to go. It’s got the number three for three rows, and you can see it’s linking up those bits of data here as well. That’s going to automatically get included when we export the banners.

You can also temporarily turn it off. If you’ve loaded it in but you just need to export a banner batch without those variants, you can temporarily just toggle that off, and that will just turn off the exports for the time being. You can see it’s disabled for export. Likewise, if you only want certain variants, you can just uncheck those, and that will automatically exclude or include any of the rows. If you have loaded in a spreadsheet and it’s got a thousand rows or something crazy, and you actually only need the first few, you can just uncheck all of them and check the ones you need, and it’ll tell you that two of the three are going to be included in the export.

As I said, there are a few more options that you can go through in the documentation. If you go ahead and open that up just using the link, you can see there’s a bunch of different options you can use for the naming. You can include things like the row number, the layer name, the width and height, and things like that. That’s going to give you really flexible naming. You can also use the forward slash character if you need to create folders as well. For example, you could have banners/row number or something like that, and that would automatically include those variables into your naming. It’s totally up to you however you want to kind of go ahead and name those folders or have them exported. By default, it’s just going to create its own kind of naming structure there.

That’s basically it. As I said, there are way more options. If you want to go into detail with what you can do, just check out the documentation. There are all kinds of things you can do in terms of styling and showing and hiding layers and things like that. Make sure you go through and check that out, and you’ll be able to figure out other things you can do with these settings. I’ll leave it there for today. I just wanted to give you a quick overview of using this feature. If you’ve been wanting to create variants of your banner exports from a spreadsheet, this is going to be a really easy way to go about it. At the moment, it’s just supporting CSV or Excel files, but Google Sheets and other platforms will be getting added in the future. You’ll be able to select a different data source in this Figma plugin, but for now, I just wanted to give you the basic fundamentals of using it. That will also apply in the future if you do get to choose a different option instead of the CSV or Excel local files. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.