How to export HTML emails from Figma to Zapier using Emailify

Video Transcript

Today I’m going to be showing you a quick tutorial on how to export your HTML emails from Figma to a Google Drive folder using Zapier with the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little actions icon down here, and then search for Emailify. Under the Plugins tab, if you click on the Emailify result, you can run the Figma plugin by clicking on this little Run button down here. Alternatively, I’d recommend clicking the Save icon next to that. Then we can run the Figma plugin from our Figma plugins list.

Because I’ve already clicked on the Save button, I’m just going to go back to my Figma canvas. I’ll right-click anywhere, go down to Plugins, then Saved plugins, and click on the Emailify item. That’s going to run the Figma plugin that we saved a second ago.

If you’re new to the Figma plugin, the way it works is that it helps you design HTML emails in Figma using some of the design tools in the plugin, which you can then automatically export to production-ready HTML code from this Export HTML button here. I’m not going to be going through all of the design features today. If you’re new to the Figma plugin, you can find some other tutorials on the YouTube channel for that, or you can spin up a template from the Browse Figma templates tab in here, which is what I’ve just done.

I basically duplicated one of these free Figma templates, which is Emailify-ready. You can see here, if I go to preview the email, I’m just going to click on Preview. This is going to load up an HTML preview of the email, so you can actually see what that’s going to look like in real HTML code.

Once we’re happy with that, we can export the code from the Figma plugin, which we’ll do right now. What you need to do is click on the Export HTML button in the Figma plugin. We want to change the default HTML email option, which just downloads a zip file to your computer. We want to change that option by scrolling all the way down to the bottom where it says Webhooks and changing the setting to Zapier.

If you click on the Zapier item here, that’s going to change the context over here and give us a new input field where we’ll be able to paste in a Zapier webhook. If you’re new to Zapier and webhooks, I’m going to show you exactly how to do that now.

What you want to do is go to zapier.com. If you create a free account there, or if you’ve already got an account, you can just log in. We want to create a new Zap, which is an automated workflow. You can go down here, or go up to the Create button and click on Create, then click on Zaps. That’s going to give you a new workflow builder that will allow us to set up this Zapier webhook, which we can then paste into the Emailify Figma plugin.

All you need to do first is click on the Trigger item. That’s going to be the webhook event that we’re setting up. The trigger is going to be the Webhooks option. Go over to the popular built-in tools and click on Webhooks. This sets up the trigger as a webhook, which allows us to send the content from our email exports in Figma over to Zapier. From there, we can trigger an action, which in our case will be uploading the zip file to a Google Drive folder.

We’re going to set the trigger event to Catch Hook. Select Catch Hook and click on Continue. You can leave the Pick child key field blank and click on Continue. Zapier will now give you a test tab where it generates the webhook URL. It says you’ll need to configure your application with this webhook URL.

Click on the Copy button in Zapier and copy that to your clipboard. Then go back to Figma and paste it in. You can see here that we’ve pasted it in and it’s saying it’s a valid webhook URL. We can click on the Upload to Zapier button to test the webhook.

Zapier is now listening for that webhook. What this does is generate the HTML email in the Figma plugin and upload the zip file to Zapier. You can see that it’s saying the Zapier upload has worked. If we go back to Zapier and click on Test trigger, it should find the record.

Down here, you can see it’s found the webhook request. The request we just made is showing up as Request A. You can click on that and see the contents of the request. You’ll see the file name and the file itself, which is the zip file. You can also download that zip file, and it will be an exact copy of what was sent to Zapier.

I’ve just unzipped that, and you can see we’ve got our HTML files in here, including the emails we just exported from Figma. The webhook is working perfectly. It’s capturing the file name and the file itself.

Now we can click on Continue with the selected record. That allows us to add the Google Drive step. I’m going to click on the Google Drive action.

After adding the Google Drive action, you’ll need to connect your Google Drive by signing into your Gmail account if you haven’t already done that. I’ve already connected mine, which is why it’s showing up here.

Now that Google Drive is connected, click on Choose an event. Scroll down to Upload File, which allows us to copy a file from another service into Google Drive. Click on Upload File and then Continue.

We can now specify the Google Drive settings. I’ll select my Google Drive. For the folder, I’m going to create a new folder in Google Drive called “Emailify template uploads.” This will be the folder where our uploads go.

Back in Zapier, click on the Folder field, choose a value, and select the Emailify template uploads folder. For the File field, press the slash key and select the File field coming from the webhook. That specifies the file being sent.

Set Convert to document to false. For File name, press the slash key again and select File name from the webhook data. That uses the file name coming from the Figma plugin. For File extension, you can leave it blank because the file name already includes .zip.

Click on Continue. You’ll now see the test step. Because we already sent test data from the Figma plugin, we can click on Test step. Zapier should now send that file to Google Drive.

You can see that it says a file was sent to Google Drive. If we go to Google Drive and open the folder we created, you’ll see the zip file from the Figma plugin sitting there. That means everything is working correctly.

We’ve exported a zip file from the Figma plugin, and it’s being automatically uploaded into our Google Drive folder via the Zapier webhook we just set up.

Now that the test is working, you can publish this automation in your Zapier account. You can rename it from “Untitled Zap” to something like “Emailify to Google Drive.” Once you hit Publish, the webhook goes live.

Back in your Figma file, with that webhook URL set up, anytime you export an email from the Emailify Figma plugin, it will be sent to Zapier and uploaded into your Google Drive folder automatically.

Zapier also supports many other integrations. You could, for example, send a message to Slack and attach the email zip file to notify your team or your client when a new email is exported from the Emailify plugin.

The Google Drive example is just an easy way to show the concept of catching zip file uploads from the Emailify plugin and doing something with them, in this case uploading them to a Google Drive folder.

I hope that’s been helpful. If you’ve been wondering how to use Zapier for your email workflows when exporting HTML emails from Figma with the Emailify Figma plugin, this is a really easy way to do it. Hopefully, it adds a bit of flexibility to your HTML email marketing workflows.

Thank you for watching, and we’ll be back with more Figma tutorials like this one very soon.