How to export HTML emails from Figma to MailerLite using Emailify

Today, I’m going to be showing you a quick tutorial on how to export HTML emails from Figma to The MailerLite email marketing platform.

To get started, all we need to do is go to our Figma file. Click on the little “Resources” icon up the top here. And if you search for “Emailify,” under the “Plugins” tab, if you click on the Emailify item 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’ll allow us to run it from our Figma plugins list. I’ve already clicked on the little 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 the Emailify item 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 and export to production-ready responsive HTML automatically. So for this example, I’m just going to create a basic frame and I’m not going to go through all the design features in the Figma plugin today. If you’re interested in those, there’s a couple of other tutorials on the YouTube channel and in the documentation that I’d recommend checking out. But for today, I’m just going to be assuming that you’ve already added your Emailify components, designed out your emails and you just want to upload this to the MailerLite platform.

So you can see here, I’m just adding a few components. I’m not going to make this a very complicated email. The important thing to note is that you will need to add a MailerLite footer. So if you go to the footer tab in your Figma plugin and scroll down to the letter M, you’ll see a MailerLite footer option. So just go ahead and click on that and that will automatically pre-populate these links down here with the MailerLite unsubscribe tag and the MailerLite View and browser tag so that will automatically render the correct links. You can style the footer as you like but those links will automatically be pre-populated. So just make sure you’ve got that footer added otherwise you may run into some issues later.

Now that we’ve got our email, we can preview that in the Figma plugin by clicking on the preview button here. So if you click on preview that will give you a quick HTML preview of what the code is going to look like when it’s rendered as HTML and you can check that out on mobile and desktop. You can add mobile overrides if you want to add any of those styles. Again, I’m not going to go through all these features today but assuming you’ve got all these set up the way that you want and you’re happy with the preview, you can go ahead and close that off and then click on the export HTML button in the Figma plugin.

And then just change this HTML export option and scroll down to MailerLite. So click on the MailerLite option and just select the email you want to export. You can optionally add a subject line and preheader text. I would add the preheader text here so add the preheader text in the Figma plugin. You can also add your subject line directly in this input here but just be mindful that you will have to add that subject line manually again once it’s uploaded into MailerLite in a moment. So I’m going to add this in now just to add it into the plugin version which is still going to populate it in the title tag. So that will show up if you use the viewing browser link down here and you open up a new browser tab this subject line that you add in the plugin will get shown as the title in the tab of the browser tab. So you can still add it in here but you will have to add that subject line in a moment.

Now that we’ve got those added, we can just go ahead and click on the export for MailerLite button. This is going to automatically export and generate the HTML code automatically from Figma for MailerLite. Now that the export is completed, we can just go ahead and click on the download your zip file button, and we can save that anywhere on our computer. I’m just going to save that to the desktop.

I’m just going to double click on that zip file, open up the folder, and you can see here we’ve got our exported files. It comes with a previews page, so if you want to add a preview link to share with your stakeholders or clients, you can send them a copy of this and upload it somewhere, and they’ll be able to preview that real HTML on mobile and desktop.

But the file that we’re really looking for today to upload into MailerLite is this index.html file inside of the folder with whatever you’ve named your frame. So you’ll see a folder in the zip file with an index.html file inside that. What you want to do is open up that HTML file either in a code editor or just in the browser. What you can do is you can copy that code by just right-clicking anywhere, going down to view page source, and then just select all and copy. So, copy all of the content of the HTML file into your clipboard.

Then what you want to do is log into your MailerLite account. So I’ve just logged into MailerLite.com, and I’m just on the dashboard. What we want to do is click on the campaigns menu item in the left-hand side here, and when that loads, we’re going to select create new campaign. So go ahead and click on the create new campaign button there.

Click on the “Regular Campaign” option. Just click on that option there. Once that loads, you can then fill out your content for the campaign. So I’m just going to call this test campaign, and you can add in some subject line here, as I said. You can add in things like Dynamic content as well into the subject. I’m not going to go too crazy with that for now. I’m just going to be showing you what that looks like. The preheader, you can leave blank if you’ve already added in the Figma plugin. Otherwise, it may double up in the code. And then just select your recipients. So select the list you want to send it to and click on select. Once you’ve filled out all those details, just go ahead and click on this next button down here.

Then we want to click on the custom HTML editor option. So we don’t want any of these first two. We want to go down to the bottom where it says custom HTML editor and click on continue. Once that loads, you will be able to import the HTML that we just copied from our index.html file. You can see down here there’s a button that says import HTML. Go ahead and click on import HTML. Then click on the import code from file option. It says here you can import it from URL or paste your HTML. Just go ahead and click on the paste your HTML option. You can see it gives you this code window here that we can paste our code into. So I’m going to paste that in there now. You can see that immediately it loads up the preview based on the HTML that we copied from our index.html file. That’s all looking really good. We can see that the HTML is all being loaded. The image content is also being loaded in. That’s looking really good now.

You can then preview and test this if you want. You can either send yourself a test email or go into preview mode which will do something similar to the preview we were just looking at a minute ago where you can toggle it between desktop and mobile width to see what that looks like in here. You’ve got the option to do that as well. Once you’re happy with that, you can just close it off and then click on done editing. Click on the done editing button and that will bring you back to your campaign. You can see here that the campaign is now ready to go. We’ve got our review and schedule page. We’ve got all our details that we added in the previous pages. All you would have to do now is select when you want to send that campaign based on the list that you selected and based on the other details that you added. That’s basically it. If you want to, as a last step, you can also add a plain text version. So if you want to add a plain text version of the email, you’ve got the option by clicking on this little edit button here.

If you click on that Edit button, it tries to add a plain text version automatically. But if you want to use the one that’s exported from the Figma plugin, you can do that by opening up this plain text version.txt file included in the zip file from Emailify. Open that up and just copy-paste all of the content from there into this window here. You can basically paste all that in there, and it will automatically include any links that you’ve added next to the copy that you’ve added the links to, and it will do a few more details like that just to make it a bit easier to read if you don’t have the full version loaded up. This is the plain text version. If you’re happy with that, just go ahead and click on save, and that will save the plain text version of the email as well.

That’s basically it. I just wanted to show you how to get your HTML emails exported from Figma and save those out to be imported into the MailerLite platform if you’re using that for your HTML marketing. I’ll leave it there for today. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.