Export animated HTML banners from Figma to Google Drive with Zapier using Bannerify

Video Transcript

Today I’m going to be showing you a quick tutorial on how to export your animated HTML banners from Figma to a Google Drive using the Zapier integration inside the Bannerify Figma plugin.

To get started, all we’re going to do is go to our Figma file. Just click down here on the little actions icon, and if you search for Bannerify, you can run the Figma plugin by either clicking on this run button down here or, I’d recommend clicking on the save icon next to that. That’s going to let you run the Figma plugin from your saved Figma plugins list.

I’ve already clicked on the save icon here, so I’m just going to go back to my Figma canvas, right click anywhere, go down to Figma plugins, then go down to saved Figma plugins and click on the Bannerify item. That’s just going to run the Figma plugin that we saved a second ago.

If you’re new to the Figma plugin, the way that it works is it basically takes any Figma frames on your page and treats those as banners. In this case, I’ve got a bunch of different frame sizes. I’m just going to load all of those in by clicking on the load all banners button down here.

Once those load in, you’ll notice that it takes each of the content layers inside of the frame and allows you to animate those inside of the Figma plugin. You can see here when I do a bit of a playback, I’ve already got some animations applied to those layers. But you can obviously design those layers and animate them however you like.

I’m not going to be going into detail about all of the animation features today. There’s a bunch of other video tutorials on the channel if you’re interested in learning more about that. Basically you can just go through them, select the animation styles you want, and adjust the timings, and you’ll end up with something that looks a little bit like this.

Today, the main purpose of the tutorial is to take these finished animations, export them out to HTML, and automatically upload those into a Google Drive folder using the Zapier platform. I’ll show you how to do that now.

We’re going to go back to our Bannerify Figma plugin. We’re going to click on the export to HTML button in the top right corner here. What you want to do is go down here to where it says upload preview page and make sure that toggle is enabled. By default, it’s going to select the Netlify platform. We’re not going to be using Netlify today. That is the other platform you can upload your banners to. We’re going to change this Netlify option to Zapier instead.

I’m going to click on the Zapier option, and that’s going to give us a new input field to paste in a Zapier web hook. If you don’t know what that is, I’m going to show you what that looks like right now, so don’t worry about that.

We can go back to our browser. What you want to do is create or log into your Zapier account at Zapier.com. Once you’ve logged into there, go down to the start from scratch section down here and click on the zap button. You can also go up to the create button up here and do it through there as well.

In this case, I’ll just click on create. I’m going to click on zaps, which is an automated workflow. That’s going to bring you to the Zapier workflow editor for creating these zaps, which is what they call the automations.

What we want to do first is set up the trigger. I’m just going to click on the trigger box here. Once that loads up, we can go over to the popular built in tools. In our case, we’re going to select the web hooks option. If I click on the web hook option now, that’s going to add that to my editor here.

What a web hook is, is basically a URL that you can post things to. In this case, we’re going to post our banners to the web hook, and Zapier is going to receive that post or that content, and then we can go ahead and do something with that content, which we’ll get to in a moment.

What we want to do is go over here, click on the trigger event, and click on the catch hook button. We want to check that the trigger event is set to catch hook. We’re going to save that and then click on continue.

We can leave this field blank for the time being, then click on the continue button again. Where it says test here, it’ll give you this web hook URL. You can see here I’ve now got a web hook URL. We can click on the copy button here, and that’s going to copy it to our clipboard.

We just need to go back to our Bannerify Figma plugin, and in the field down here where it says paste in your Zapier web hook URL, I’m going to paste that in right there. You can see here it’s telling us that our banners zip file will be uploaded to Zapier. I’m not going to click that just yet because we haven’t finished setting up the Zapier automation.

Now that we’ve got the web hook trigger set up, the next thing we need to do is say what we want that to do once it receives the trigger. I’m going to go down here where it says action. This is selecting the event for the Zap to run when this trigger fires. I’m going to click on action.

In today’s example, we’re going to use Google Drive as a basic example. You’ll notice there’s over 7,000 different apps that you can integrate with. Uh, if you wanted to upload your banners into a Slack channel or do something like that, you could use a different integration. I’m going to keep it simple today and use the Google Drive integration.

We’re going to click on the action event dropdown. I’m going to click on the choose event dropdown, then scroll down under the create section and go to where it says upload file. We’re going to click on that upload file option.

Under the account section, you want to connect your Google Drive. This is going to ask you to sign in with your Google account. I’m going to go ahead and do that now. Once you sign in, you’ll get a prompt that says Zapier wants to access your Google account and your Google Drive to create files. In this case, I know we’re setting up that integration, so I’m going to agree to the permissions and click on the continue button.

Once that authenticates, you’ll notice the account down here changes and populates with your Gmail address or Google account that you’ve signed in with. That’s looking good. I’m going to click on the continue button.

We can now customize where this file is going to get uploaded. I can choose the drive. In this case, I’m just going to select my Google Drive. Because this is a fresh Google Drive, I’m going to create a brand new folder. I’m going to click on new, then click new folder. I’m going to name this one Bannerify uploads and then click on create.

You’ll notice in a second that should pop up. We’ve got a brand new folder here in our Google Drive. I’m going to go back to Zapier, and under folder, click on the choose a value selector. We should now see our Bannerify uploads folder available. I’m going to click on Bannerify uploads. That’s looking good.

At this point, we need to complete the web hook step to figure out what fields we’re going to be sending from the Figma plugin. If you don’t know what’s going on here, just keep following along and we’ll get there in a moment.

What we’re going to do is send a test trigger from the Bannerify Figma plugin into the web hook in Zapier. I’m going to click on the export button here. That’s going to export our HTML banners from Figma. Once it finishes, it’s going to post that zip file to our Zapier web hook because we’ve got that enabled.

Because this is the first time we’re doing it, Zapier is listening for the request. Once it’s received, we’ll be able to see what fields and data are coming through. You can see that the Zapier upload was completed and the HTML files were exported.

I’m going to click on the test trigger. When I click on the test trigger button, it’s found the post that we just did. This is the request we just made from the Figma plugin. Because we posted the data from the Figma plugin, the Zapier integration has found that.

If we click on the request over here, you can see we’ve got our file that was uploaded and the file content as well. I’m going to click on continue with selected record after selecting that test request.

Now that we’ve got that data captured and Zapier knows what kind of data to expect, we can link that up with our Google Drive configuration. I’m going to click on continue again since we’ve already set up authentication.

Now we can map where the file is going to be coming from. To point the file we want to upload into Google Drive, all we need to do is click on this file input and press the slash button on your keyboard. That will give you suggestions of what field we want to map it to.

In this case, we want to map it to the file. You can see there’s a field called file under the web hook notifications. I’m going to click on that file option. That’s going to map the file to be uploaded into Google Drive.

I’m going to leave that as is. I’m not going to select convert to document. I’m going to leave that set to false. Under file name, we’re going to do the same thing. Press slash, then pick file name. We’re mapping the file name to the file name coming from the Figma plugin.

For file extension, I’m going to leave that blank because we’re already passing the file name, which includes the .zip extension. There’s no need to include it here.

I’m going to click on continue. You can see it’s loading the test data. It’s got the file content, the file name we mapped, and it’s not converting it to a document.

Now I’m going to test this as well. I’m going to test the Google Drive integration step by clicking on the test step button. That will test the integration using the test data sent to the web hook. You can see we’ve got a check mark, which means it worked as expected.

If we go back to our Google Drive and open the Bannerify uploads folder, you can see the file that we uploaded from the Figma plugin through the Zapier web hook has been sent to Zapier, passed into the Google Drive step, and uploaded into our folder. We’ve got it there exactly as expected.

I can download it to my computer or share it with other people on my team. I don’t need to manually upload it from my desktop. I can upload it directly into my Google Drive using the Zapier integration.

As mentioned, I wanted to keep this simple to show you how to set up the web hook and how to create the event that takes the data captured by Zapier whenever it’s posted from the Figma plugin. You can then use that data to do whatever you like.

In this case, I’ve just got it uploading to a simple Google Drive folder. Of course you could do other things with that using the many integrations that Zapier offers.

I hope that’s been helpful. As you might have seen, this was just running the test step to make sure the integration works. Once you’re happy with it, you can publish it.

I’m going to remove this extra step here and leave it as a simple two step process, uploading into Google Drive. Once you’re ready, you can click on publish. From then on, it will listen for any posts or requests sent to this URL from the Figma plugin.

Every time the export process happens from Bannerify with this web hook inserted and the toggle enabled, it will trigger that event and take the uploaded file and do whatever you’ve set it to do, in this case uploading it to Google Drive.

There’s a lot of opportunity for automation here. I wanted to run through all of this in case you’re new to Zapier or new to web hooks and automations. Hopefully this has been a good starting point or crash course on how you can post zip files or banners from the Bannerify Figma plugin to your Zapier account and then put them into Google Drive or any other automation you’re interested in.

Thank you for bearing with me if you’re new to this, and thank you as always for watching. We’ll be back soon with more Figma tutorials like this one.