How to export HTML emails from Figma to EmailOctopus using Emailify

Video Transcript

Today, I’m going to be showing you a tutorial on how to export your HTML emails from Figma to the EmailOctopus 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 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, and that will allow you to run the Figma plugin from your Figma plugins list. I’ve already clicked on the save icon, so I’m going to go to my canvas, just right-click anywhere, go down to “Plugins,” and then go down to “Saved plugins” and click on Emailify, and that’s going to allow us to run the Figma plugin that we just saved a second AG go.

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 automatically export to production-ready responsive code, without needing to manually develop anything yourself. Today, I’m just going to keep it simple, and I’m going to create a template, just call it template example. You can also start with some preset templates if you want to get some inspiration on what can be designed with the Figma plugin, but for today, I’m just going to be creating a blank template, clicking on add new Emailify container. And as I mentioned, I’m not going to go through all of the design details today. If you want to check out how to design the emails, probably worth checking out some of the other video tutorials on the YouTube channel or going through the documentation.

Today, I’m just going to keep it really simple, adding a few different components without customizing them or changing any of the content. I just want to show you how to get this HTML template out of Figma and into the EmailOctopus marketing platform. So importantly, if you are designing your emails for EmailOctopus, you want to go down to the footer Tab and then click on the EmailOctopus footer option. So you’ve got this EmailOctopus footer that you can click, and that will automatically add a footer component to your design that pre-populates the correct unsubscribe links and viewing browser links. So you can see we’ve got our web version URL tag there, and we’ve got our unsubscribe URL tag there. There’s also the address tag here, which will automatically populate the address details from your sender account. So that will automatically get added as well.

Once you’re happy with your design, you can preview it in the Figma plugin by clicking on the preview button here, and that will automatically load up a real HTML preview of what the content’s going to look like when it gets exported to production-ready HTML. I’m fairly happy with the design. You can check it out on mobile as well and apply any mobile overrides if you prefer. So you can override things like text sizes or you can override padding on rows and things like that. Again, today I’m just going to keep it really simple and leave everything as default.

Now we can export this by closing off the preview, clicking on the export HTML button in the Figma plugin, changing the default HTML email export option, scrolling down to platforms, and finding the EmailOctopus item. So go ahead and click on the EmailOctopus item, and then we can fill out our subject line. So you can put in your subject here and your preheader text. So the preheader text will come after your subject line when it’s opened in Gmail or Outlook or anything like that. You will have to read the subject line in EmailOctopus, but the preheader text will automatically get included in the HTML. So it’s still worth adding the subject line because it will add it to your title tag. So if someone opens up the email using the viewing browser link, the tab of the browser will contain whatever subject line you put in this input here in the Figma plugin.

Now that we’ve got those added, I’m just going to click on the export for EmailOctopus button, and that’s going to automatically generate the HTML for us and export and upload all of the image assets. So once that’s finished, just go ahead and click on the download your zip file button, save that to anywhere on your computer. I’m just going to save it to my desktop. I’m going to double click on that zip file and open up the folder, and you can see here that we’ve got a previews HTML file and also this folder here with our index.html file. So the index.html file is actually the one that we want to upload to EmailOctopus. So I’ll show you how to do that now.

If you go to your EmailOctopus account, you want to go up to the templates option in the menu. So go to templates and click on that. And then to create a new template, we’re going to click on the create button in the top right here. And I’m just going to say skip for now with this brand prompt. So I’m not going to set up my brand. I’m just going to skip because we’ve already got our brand in the HTML that we exported. And then what you want to do is go over to the left-hand side and click on the code your own option. So click on that code your own menu item on the left there. And then you want to go ahead and click on this little tile here that says code your own. So it’s a little thumbnail. Just click on that, and that will open up a brand new fresh template that you can copy your own template code into.

I’m just going to call this custom HTML template from Figma. And then we want to basically go to this editor here, and we want to remove all of the default code that it adds. So we want to get rid of all of that. And we want to go back to our export. So if you open up your folder that you exported it from, go ahead and drag and drop the index.html file inside of your folder. So whatever you called the frame in Figma, that’s what the folder will be named. Just go ahead and drag and drop that index.html file into this editor window here, and that will automatically include all of the HTML from the file that we exported from Figma into your EmailOctopus template.

You can see here we’ve got all of our code, and we’ve also got the preview, which is reflecting what we saw in our Figma plugin as well. So this is all of the HTML getting rendered. We’ve got our links here. We’ve got our CTAs, and everything’s looking as we’d expect. So you can preview and test that. If you want to send a test to yourself, you can click on this send as a test, and that will let you send a test from EmailOctopus to your Gmail or your Outlook or whatever you prefer. And this is roughly what it’s going to look like. So they’re giving you this little preview, and you can check that out on mobile as well, just as we did in the Figma plugin too.

That’s basically it; once you’re happy, just click on the save button, and that will allow you to save the custom HTML template. It will take you back to your templates page, and you can see here we’ve got our custom HTML template that we just added ready to go. So you can now use that template in your sends from EmailOctopus, and that will be looking just as good as it did in the preview.

I just wanted to show you how to export your HTML email designs from Figma created with the Emailify Figma plugin and get those into your EmailOctopus account, which you can then use to send custom HTML responsive emails with your campaigns or any other method that the platform supports. So thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.