Video transcript
9-minute video ·
Today, I’m going to show you a quick tutorial on how to export your HTML emails from Figma into the Mailmodo 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 little resources icon up here, and search for “Emailify” under the plugins tab. If you click on the Emailify result, you can run that Figma plugin by either clicking on the “Run” button here or, as I’d recommend, clicking on the little save icon here. That will allow us to run the Figma plugin from our plugins list.
I’ve already clicked on the little save icon, so I’m just going to go to my canvas, right-click anywhere, go down to “Plugins,” then to “Saved Plugins,” and click on the Emailify item. That will run the Figma plugin we saved a moment ago. If you’re new to the Figma plugin, the way it works is that it helps you design HTML emails that you can then automatically export to production-ready code directly from the Figma plugin when you’re ready.
For example, if we create a new template, I’m just going to call this “Template Example,” click on “Add New Emailify Container,” and that will allow us to design our custom HTML email in Figma using the design tools provided in the plugin. I won’t be going through all the different ways you can design the email in Figma. If you’re new to the Figma plugin and interested in learning more about how to do that, there are a bunch of really good tutorials on the YouTube channel or in our documentation site. That will help you get started quickly with figuring out how to customize some of these details and designs to match your brand.
As a quick overview, you can customize the layers with things like mobile override. If you want to change the font size or padding on mobile for any of these components, you can go through those layers by clicking on them when you’ve got your settings panel open. That will allow you to customize the design. You can then click on the preview button in the Figma plugin to preview that on desktop and mobile. This is a real HTML preview of the email itself, so we can see here that this is real code, and this is what it’s going to look like when we export it to production-ready HTML.
Once you’re happy with your design, we can then go ahead and export it from the Figma plugin. It’s also worth noting that if you’re new to the Figma plugin, if you go back to the new email screen and click on “Browse Emailify Figma Templates,” you can also clone a free Figma template directly from the Figma plugin. For example, we’ve got one over here from the Airbnb template, which is included in the Figma plugin up here. That will allow you to duplicate a production-ready Emailify-designed template that you can then use as a starting point or customize or grab some of the components as well. I just wanted to mention that in case you’re new and wanted to get a sense of how the templates can be designed.
With that being said, if we close this off and then click on the “Export HTML” button in the Figma plugin up here, that will allow us to export the code to HTML. What we can do is change the default export option from HTML email, and if we go down to the platform integration section down here and scroll down to the letter “M,” we want to click on the Mailmodo option. If you click on Mailmodo, we can then populate the subject line and the preview text. The preview text gets shown underneath or next to the subject line in your email client. If you’re in Gmail or Outlook, you’ll notice there’s usually a bit of text underneath or next to the subject line itself. This is what that populates there. You can paste that in there with the subject line, and that will add it to your title tag in the HTML export. If you’re viewing the email in your web browser, for example, that will also populate the title tag. Just a note: we will have to add this subject line manually in Mailmodo in a moment.
I’m just going to export that now. If I click on the “Export for Mailmodo” button, that will generate all the HTML code, automatically upload all the images, and give us this ZIP file to download. Now that that’s ready to go, I’m just going to click on the “Download your .zip file” button and save that to my desktop. You can save it wherever you like. Then, if I open up my desktop and unzip that file by double-clicking on it, we can see once we expand the folder that it just unzipped. We’ve got this folder in here, which is named the same as our Figma frame, and this index.html file is the one we’re going to be using in a moment.
What we now want to do is go back to our Mailmodo dashboard. If you log into your Mailmodo account and then go to the templates page, click on “Templates” in the left-hand side column, and under the “Your Templates” tab, go down here where it says “Create New Email Template.” Click on the little arrow on the right here and then click on “Upload Template.” I’m going to click on the “Upload Template” option, and you can see here it’s going to allow us to drag and drop an HTML file. The one we want to be using is the one inside of that folder, not the previews.html file. We want the index.html file, and we’re going to drag and drop that index.html file directly into this little drop zone area here in Mailmodo. That will allow us to upload the index.html file.
Once that’s finished uploading, go ahead and click on “Add Name and Email Type.” You can give this one a name. I’m just going to call this “Example Template,” and under “Select Email Type,” you can choose whatever you like. I’m just going to use “Promotional” in this case and then click on “Save and Upload.” That will save the template and upload it into our Mailmodo account. You can see here on the preview page, this is looking really good. This is exactly what we saw in our Figma preview as well. This is the real HTML, so we can see this on mobile, very similar to what we just saw in the Figma plugin preview.
Once you’re happy with that, you can go ahead and use that however you like. For example, you can click on the little more options icon here, click on “Use in a Campaign,” and that will allow you to automatically spin up a new campaign with the template pre-selected. For example, I’m just going to click on “Use in Campaign,” click on the “Bulk” option, and that will allow us to spin up a brand new campaign directly from the template we just uploaded. You can call this whatever you like. We can call this “Campaign Name.” Again, you need to pre-populate the subject line one more time. If we paste that in the subject line here and again, preheader text, you can leave it empty if you’ve already pre-populated it in the export options. If you’ve already put in your preheader text in the plugin here, you don’t need to populate it again here; otherwise, that will double it up. But again, if you’ve already populated the subject line in the Figma plugin, you do still need to duplicate that subject line here as well for the reasons I mentioned earlier.
What you can do is send a test yourself. If you want to click on the “From Name” and the “Reply To Address,” you can populate those, and what we can then do is just go ahead and click on “Next,” select your list, click on “Next,” and then you can do things like send a test campaign. If you wanted to send a test to yourself before you actually send out the full campaign to your real list, that’s probably a good idea. You can go ahead and click on this “Send Test Campaign” button, and that will allow you to review the email by sending a test email to your own email address first.
That’s basically it. I just wanted to run through that really quickly to show you how you can upload a custom HTML email that was exported from Figma using the Emailify Figma plugin into your Mailmodo account using the HTML export option. Unfortunately, they don’t have an API option at the moment to automatically upload it, so you do have to manually drag and drop that index.html file as per their documentation site here. You can see in their own documentation, they basically recommend uploading it manually via the HTML file.
The other really weird quirk that they mention is that if you’re using a custom HTML template, you can’t use a custom unsubscribe link. I thought that was quite strange; usually, you’re allowed to use your own unsubscribe link. I actually tried using an unsubscribe link that they recommended, and it basically just gets stripped out. Essentially, at the moment, it seems like if you are using a custom HTML template with Mailmodo, they will automatically inject an unsubscribe link at the very bottom of the email. That’s a bit of a shame because you normally would want to add your own unsubscribe link with your own design, but it seems like at the moment, they just strip that out. If you add that in as per their documentation here, the custom unsubscribe link I’ve tried adding into the custom HTML template links and design, it basically just gets stripped out and doesn’t work. It seems to always add its own custom HTML unsubscribe link to the bottom of the email regardless.
I just wanted to flag that in case you’re wondering why there’s no custom unsubscribe link. It seems like this is just the way they do it at the moment. Hopefully, that’ll change in the future, but I just wanted to quickly cover that now in case you’re wondering about it. We’ll leave it there for today. I just wanted to run through that really quickly, and hopefully, if you’re a Mailmodo user, this is a helpful tutorial just to show you the end-to-end process of creating, exporting, and uploading your custom HTML templates from Figma to the Mailmodo platform using the Emailify Figma plugin. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.
Pro Bundle