How to export HTML emails from Figma to Drip using Emailify

Video Transcript

Today I’m going to be showing you a quick tutorial on how to upload your HTML email templates from Figma to the Drip email marketing platform using the Emailify Figma plugin. To get started, all we need to do is go to our Figma file, click on the “Resources” icon at the top, and then if you search for Emailify and under the Plugins tab, if you click on the Emailify item, you can run that by clicking on the “Run” button here, or I’d recommend clicking on this little “Save” icon here, and that will allow you to run the Figma plugin from your Figma plugins list later. I’ve already clicked on the save icon so I’m going to go to my canvas. I’m just going to right-click anywhere, go down to “Plugins”, then go down to “Saved plugins” and click on Emailify, and 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 helps you to design HTML emails in Figma which you can then customize to your own brand and then export to production-ready responsive HTML code automatically. So today I’m just going to be a really simple template. I’m just going to call this one template Drip example, and once we add that to our page we will then be able to start adding some preset components.

I’m not going to be going through all of these design features today. If you want to check those out, please feel free to check out some of the other YouTube tutorials on the channel or go to the Emailify documentation site and there’ll be heaps of resources there that will show you how to design your emails and customize them and basically do whatever you want to them for your own brand and content. So today I’m just going to be giving it really simple, spinning up a few components without customizing them at all.

Assuming that you’ve designed your HTML email in Figma using the Emailify Figma plugin, the last thing you want to do before we export this for the Drip platform is to go to the footer tab in the Figma plugin. Then, if you scroll down to the letter “D”, you’ll find a Drip footer preset. So you want to make sure that you click on the Drip footer there, and that’s going to automatically add this footer preset to your Emailify template which automatically prepopulates the required tag.

You’ve got the unsubscribe link which you can check out by clicking on the settings button in the Figma plugin with that link layer selected. So that will pre-populate the unsubscribed URL. It’s going to pre-populate the viewing browser URL, and it’s also going to give you the HTML postal address tag, which again, these are required in order for the custom HTML template to be accepted into the Drip platform.

If you don’t include this footer, you will get a message later saying that you basically need to have these tags. So it’s just easiest to go into the footer tab, click on the Drip item, and then you can add that to your template and customize the colors and styles as you like with those links already added.

Now that we’ve got our footer added, we can preview the HTML in the Figma plugin just by clicking on the preview button. And that’s going to allow us to see a live preview of what the HTML is going to look like when it gets exported. So we can check that out on mobile and desktop. So we can see what that looks like on larger screens. You can also override some of these styles for mobile.

For example, we’ve got our hero text here. If you click on the settings panel in the Figma plugin and then click on any of the Emailify layers, you can see here that you’ve got a bunch of options to override these styles for mobile-specific designs. And that’s going to allow you to do things like shrink font sizes or change paddings, change spacings, and all different kinds of things show and hide on mobile, etc.

So I’ll leave those to you to play around with. Today I’m just going to be leaving everything as default and I’m fairly happy with how it’s looking already. Assuming that you’re ready to go and you’re happy with your HTML preview, you can close that off now.

To get this into the Drip platform, all we need to do is go to our Figma plugin then click on the export HTML button in the top of the Figma plugin window. And then what you want to do is change this HTML email option, which is the default option, and scroll down to the platforms list and then find the Drip item. So you want to go ahead and click on the Drip select item. And that’s going to select the Drip platform for exporting.

And then you can go ahead and do things like add your subject line. So I’m just going to add my subject line here and preheader text. So the preheader text is what shows up after the subject line when someone’s opening up your email they’ll see it next to or under your subject line. So you can add that text in there, and just be mindful that you will need to read this subject line in Drip later.

The one that we’re adding in here is going to get automatically added to your HTML template itself. So for example, if you click on the viewing browser Link in the email and that opens up a new browser tab showing the email, it will use this line here, which gets added to your title tag as the title of that tab or the title of that window. So you can mirror the subject line in here but then also be mindful that you’ll have to upload that or read that subject line when we upload the template in a moment.

Now that we’ve got our subject line and preheader added, I’m just going to go ahead and click on the export for Drip button. So click on export for Drip, and this is going to automatically generate the HTML and upload all the images and get all that code packaged up for you in a zip file.

Now that we’ve finished the export, you can go ahead and click on the download your zip file button in the Figma plugin, and then just save that anywhere to your computer like your desktop. And then just double click on that zip file to unzip it, and then you’ll get a folder that looks like this. This folder contains the production-ready HTML code and it’s going to be inside of a folder that has the same name as your frame in Figma.

You can see we’ve called ours template Drip example and inside the zip file we just exported there’s a folder called template Drip example. So the file that you want is this index.html file, and this contains all of the code for our email that we can now add to Drip.

What we need to do is log into our Drip account. So I’m logged in over here and depending on what workflow you’re using, you can pick any of those today. I’m going to keep it simple and assume you’re using a single email campaign. So I’m going to click on the single email campaign item or you can also get to that from the campaigns list over here and clicking on the single email item. So I’m just going to click on that now.

Then just go ahead and click on the create button at the top of the page. And you want to make sure that you select the new text/html campaign option. So we don’t want the visual Builder we want the new text HTML Campaign which is going to allow us to add custom HTML. So I’m just going to click on the new text HTML campaign button and then give that a name.

We’re just going to call this new campaign Figma upload test and I’m going to create campaign by clicking on the create campaign button. And that’s going to spin up a new Drip campaign a blank Drip campaign and what we want to do is click on this switch to custom HTML button over here.

You can see on the right-hand side if I click that it’s going to say you know a warning do we want to switch to using custom HTML and we want to say yes I understand so just go ahead and click on I understand and that’s going to switch the editor from this wysiwyg style Editor to a proper code editor that we can actually drop proper HTML code into.

Now that we’ve got that set up, what you want to do is copy the code from this index.html file. In this case, the easiest way to do that would be to open up a new browser tab. Open up a new browser tab or a new window, drag and drop the index.html file in there, and you can see that it loads up the HTML. Then, just go ahead and right-click anywhere, go down to “View Page Source,” and you want to copy and paste all of that code to your clipboard. Copy every single thing from that “View Page Source” window that we just got to in our index.html file.

Then, go back into Drip and you want to highlight all of the code that’s already in the email editor and delete all of it. We’re just going to delete everything, so it’s completely blank, and then we’re going to paste in our code that we just copied from the index.html file. I’m just copying that in now, and that’s been copied in. You can see here that it’s now adding all of our content in here. We can switch to the preview tab to verify it. You can see it’s all in there now.

We can select all of that HTML. It’s looking the same as it did in our Figma preview. Don’t worry about this warning in my window over here; there’s a thing saying that the link is invalid because I didn’t add a link onto this button. I just left it as default. Yours won’t have that if you’ve got the correct links added everywhere. That just currently has a placeholder link, so it’s just giving a warning about that. But it recognizes the links down here. You can see that we’ve got our address, our unsubscribe link, our “viewing browser” link; those are all being recognized and populated by Drip, which is great. So, we’ve got those in there.

Again, you want to go ahead and change this email subject line to be whatever you want. For example, in our email, we had it as “subject test” or something like that. So, whatever you added in the Emailify subject line field, you basically want to do that in your email subject in Drip as well. You can customize that as you need to. But once you’ve added in your text, you can go ahead and click on the “save” button. That’s just going to save the email template for you. And you’ll notice there’s also an option here to autogenerate the plain text version. That’s on by default, and you’re welcome to leave that on if you’re happy with that. Alternatively, if you want to add your own, what you can do is go to the “pl text” tab over here. You can see here that we’ve got our plain text version .txt file over here. This is something that’s generated by Emailify automatically, and you’ll notice that it’s also got the content from our email rendered as plain text. I think Drip does a really good job of adding this automatically, so you probably don’t need to use the one exporter from the Figma plugin. But if you do want to customize that plain text, that tab is the way you can do it and feel free to play around with that as you like.

That’s basically it. That’s how you can get your custom HTML emails from Figma into the Drip email marketing platform and use those for your campaigns. And once you’re happy with your campaign setup, you can just go ahead and click on the “done editing” button in the top right, and that will bring you back to the campaigns list where you can then again preview this or add an audience and schedule it, and do everything that you would expect to be able to do with that custom HTML email.

We’ll leave it there for today. I hope that’s been helpful. If you’re a Drip user and you’ve been wanting to add custom HTML designs from Figma, in this case using the Emailify Figma plugin to design those, this is a really quick way of going about it, and hopefully, it improves your workflow if you are using the Drip campaign manager with Figma as well. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.