How to export HTML emails from Figma to Aweber 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 the Aweber 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 here. If you search for Emailify and under the Plugins tab, if you click on the Emailify result, you can run the Figma plugin by either clicking on this “Run” button here, or I’d recommend clicking on this little “Save” icon here. It will allow you to run the Figma plugin from your saved Figma plugins list. So, I’ve already clicked that save icon, so I’m just going to go to my canvas, right-click anywhere, go down to “Plugins”, then go down to “Saved plugins” and click on Emailify. 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 export to production-ready responsive code automatically. So today, I’m going to be creating a really simple template. I’m just going to call this one Aweber template test, and I’m just going to click “Add new Emailify container.” This is going to allow me to start adding some components to my email design and customize the content as I need to.

In this Figma tutorial, I’m not going to be going through all of the design features in the Figma plugin. If you’re new to the Figma plugin and you’re interested in learning more about that, I’d highly recommend checking out some of the other videos on the channel or going through the Emailify documentation site, and that will have heaps of resources and information about how you can customize your design.

As I said today, I’m just going to be keeping it really simple and not customizing things too much. So assuming that you’ve got your design set up the way that you want and you’ve customized the content and everything, the last thing you want to do is go to the footer tab in the Figma plugin. So go ahead and click on the footer tab there, and the second result you’ll see is the Aweber footer. If you click on the Aweber footer, that will automatically add a footer preset to your design, which includes the unsubscribe link and the viewing browser link for the Aweber platform.

You can inspect that by just clicking on one of these little nav link layers here and clicking the settings button in the Figma plugin. You can see here it’s got the unsubscribe link tag and the viewing browser tag already pre-populated for Aweber. So if you’re using Aweber, it’s probably a good idea to add that to your footer; otherwise, it will add one for you, and it doesn’t look as good as the one that you could design in Figma.

Obviously you can customize this in Figma, change the text styles and background color and padding and things like that, but for today, I’m just going to keep it really simple. So once you finish your design, you can preview it in the Email Figma plugin by just clicking on the preview button. And that will give you a real-time HTML preview of what the content’s going to look like when it gets exported to HTML. You can check that out on larger screens as well, and of course, you can also add responsive overrides if you want to customize what it looks like on mobile.

You can click on any of your Emailify layers, click on the settings panel in the Figma plugin, and that will allow you to do things like change font sizes, padding, spacing, all kinds of different things, show and hide elements on mobile, desktop, etc. As I said, I’m not going to go through all those today, but do feel free to play around with those and check out some of the other resources I mentioned earlier.

Now that I’m happy with my design, I’m just going to close off the preview here, and we’re going to export this to get imported into Aweber now. So I’m going to click on the export HTML button in the Figma plugin, and then I’m just going to change the default export option from HTML email and scroll down to the platforms and find the Aweber option. So I’m going to click on Aweber, and now that I’ve got that selected, I can add my subject line. Just put your subject line in here, and you can also add preheader text.

The preheader text will automatically get added after your subject line in the email inbox. So sometimes when you see the subject line in your client and then you see some text underneath that or next to that, that’s what the preheader text is. So you can add that in there. You will also have to add your subject line again later in Aweber as well, but it’s still worth adding in here because that’s going to include it in your HTML title tag.

If someone clicks on the viewing browser link in your email when they open up that tab or window in the browser, this line of text here that you add is going to get used for that title tag in the tab. So it’s still worth adding there even though you have to add it later for the actual subject line. I’m going to export this to Aweber now just by clicking on the export for Aweber button. I’m going to click on that now, and that’s going to automatically generate all of the HTML for my design and upload all the images and give me a zip file that I can download to my computer.

I’m going to do that now by clicking on the “Download your zip file” button. Just save that anywhere to your desktop is fine, then double click on the zip file that it just saved, and you should get a folder that looks like this. So inside the folder, you can see there’s a folder inside of that with the same name as your Figma frame. So we’ve got Aweber template test, and you want to find that folder as well with the same name that you’ve given it in your own design. And the file that we’re interested in is this index.html file.

This contains all of the code for our design that we just exported. So we want to have that one handy in a second when we import that into our Aweber platform. So go ahead and log into your Aweber platform. So it’s just a Aweber.com login there, and this will be your home screen. The quickest way to import a custom HTML template to use in your messages is just to go to the messages tab on the left here and then click on the “Create a message” button in the top.

And when it drops down that list, just go ahead and click on the raw HTML editor option. So this is going to allow us to create a message using raw HTML. So that’s the one that we want. We’re going to click on that one, and this will load up the email editor screen inside of Aweber, but we have one more thing we need to change. There’s a little button up here at the top left called “Source”. So you want to go ahead and click on that source button to switch it into this code view here.

Clicking on that source button is going to give you access to this HTML editor. So we can now add our own HTML in place of this. So basically select all of that predefined content, just select all and delete it. So we want nothing in this Source window. And then what you can do is just drag and drop your index.html file into this window here, and that will automatically load up all of the content from the HTML that we just exported from Figma and insert that into your Aweber HTML email editor.

Now that we’ve got that added in there, you can go ahead and click on “Save”. Just click on the save button, and that will save your email message. Just to make sure we’ve got it, and then you can also preview it by clicking on this “Preview and test” button at the top right. So that’s just going to load up a very similar preview to the one that we saw in the Figma plugin. So you can see all the content been loaded in, all the images are there.

You’ll notice that in my case, I’ve got the unsubscribed links being added by Aweber. That’s just because this is on a free Aweber account. If you’re a paid Aweber customer, which you likely are, and you’ve added your unsubscribe link up here, you won’t get those added in automatically. Those should not show up if it detects the unsubscribe link in there. So that’s just something I wanted to call out.

Once you’re happy with your preview, just click on the “Back to editor” button, and then you can add your subject line in here. So as I said, you have to read add that in. So just add your subject line so you can add that in at the top, and then once you’re happy with that, just click on “Save and exit”. And that’s going to save the message for you with your custom HTML template ready to send.

You can see up here we’ve got our subject line here, message which is the one that we just added as a custom template. So you can now go ahead and schedule that by either clicking on this little schedule button here or you can click on that to go into more detail. So I’m just going to click on “Schedule”, and again, this is going to allow you to set your subject line, schedule it, select your list, do all that stuff that you would be used to if you’re already using the Aweber platform.

That’s basically it. You can also add them as email templates if you choose to. You can do that through this other option here called “Email template manager”. It’s basically the same process, but I’ll just run you through that as well. You can click on the “Design my own template” button, and then you want to select the “Import a template” option. So click on “Import a template”, and that’s going to load up this screen here, and again, it’s going to give you an option to paste in your HTML.

You can also give the template a name, so you can call this one “template from Figma” just for an example. And then you want to paste in your HTML into this box here. So again, you can drag and drop that index.html file, that will automatically drop in all of the code, you can see all of that in there. And then it’s going to give you this button “Pick Drop Zones”. So click on this “Pick Drop Zones” button, and you can basically just skip this.

Just go straight to “Template Builder”. Just click on this button down here, “Template Builder”, you don’t need to worry about this “Drop Zone” stuff, just skip that and click “Template Builder”. And that’s going to save your changes and take you to this screen here. You’ll notice that there’s a space at the top here, this is just the editor adding some space in if you preview the email. So you click on the “Preview” button up here, you’ll notice that the space from the editor disappears, and you can see your email content as you’d expect.

That’s just something to call out in case you’re wondering about that. And then you can just click on “Save and exit” once you’re happy with that, and that should save it as a new template inside of your Aweber account. So you can reuse that template on an ongoing basis. So that’s pretty much it. I’ll leave it there for today. I just wanted to show you a couple of options of how you can create custom HTML emails in Aweber using the exported code from the Emailify Figma plugin in Figma.

Hopefully, this will give you a little bit more flexibility if you’ve been wondering how to design HTML emails in Figma that can then be exported automatically out to HTML that will work with your Aweber account. This is going to be a really simple way of going about it. So thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.