How to export HTML emails from Figma to MailChimp using Emailify

Video Transcript

Today I’m going to be showing you how to export your HTML emails directly from Figma into your MailChimp email templates page under your MailChimp account.

The way we’re going to be doing this is using the Emailify Figma plugin, and to install that you can just go to the Figma Community, search for the word “Emailify” and under the “Plugins” tab you’ll see Emailify pop-up. If you just click on the “Install” button then you’ll be ready to go.

I’m just going to jump into my Figma file and run the Figma plugin by right-clicking anywhere, going down to “Plugins”, clicking on “Emailify” and that’s just going to open the Figma plugin we just installed.

It’s worth noting that I’ve already designed my email using the Emailify Figma plugin, so if you haven’t done this before and you’re interested to know how to do that, there’s another video on our YouTube channel that will help you do that; it’s a really in-depth tutorial, so check that one out first if you haven’t. If you’ve already got a design and you just want to export it, that’s what this tutorial is going to be going through today.

To export our email from Figma into MailChimp, we just get started by clicking on the “Export” button in the Figma plugin, and that’s just going to bring up the export options. By default, it will export an HTML package, or HTML packages to your desktop or your download folder, and instead of downloading it to our computer today, we actually want to be uploading it to a platform; and in this case we want to be doing it to MailChimp. We just click on the export options drop down, go down to “MailChimp” and select that, and that’s just going to change the options down here to ask for your MailChimp API key. You can get the API key by clicking on the “MailChimp API Key” link, and then going into your browser which will open up.

As long as you’re already logged in you’ll see your API keys page load up; once the page loads up you just have to go down to the bottom and click on the “Create a key” button. I’m going to click on that now, that’s just going to refresh the page and tell me that I’ve got a new API key that I can use. If I scroll down you can see down here that it’s just created a brand new one; I’m just going to label that “Emailify” just so I know what it is in the future. Over in the “API key” column you’re just going to click on that input box which will select the text from the API key that it’s just generated, and you just want to copy that; either Command + C (or Control + C if you’re on a Windows machine).

Once you’ve copied the MailChimp API key, jump back into Figma, jump back into the Figma plugin, and in the input field next to the “MailChimp API key” label you just want to go ahead and paste that key in, and that’s just going to paste that straight into there. You can see that’s that’s worked really well, and once that’s done just make sure that you’ve selected the emails you want to upload and make sure they’ve got a subject line and pre-header, because that will also get included. You can change that, so I can just remove that and just change that subject line and then once that’s ready to go all you need to do now is click on the “Upload to MailChimp” button, click on that now, and now that’s going to actually generate our HTML automatically, it’s going to export all the images, upload all of those images, and then upload the template itself into MailChimp.

That’s all done now; you can see we’ve got a confirmation saying that our MailChimp template has been uploaded, and if we go ahead and click on the “MailChimp templates” link, so I’m going to do that now which is going to open up that page again, you can see here it’s changed from being a blank screen with no templates to this template that’s just been uploaded directly from the Figma plugin. We can open that up just by clicking on the title, and I’ll just move this over so we can see what’s going on here, and there’s our email. That’s all HTML you can see, the actual code has been uploaded directly into MailChimp here, so that’s all of the HTML and CSS, and it’s all inlined; you don’t have to do any crazy inlining with the CSS or anything like that, it’s automatically taken care of.

This is our preview over here, and you can see it’s looking really nice; the images are all loaded, all the contents are loaded, and we can actually preview that in different devices. We can change it from desktop to mobile and see what it looks like, it’s looking pretty good on there as well. That’s our email, all uploaded into MailChimp, we didn’t have to go through the somewhat painful process of uploading the template manually by zipping up the images folder, zipping up the HTML, dragging that in, creating the new template; especially if you’ve got multiple ones, that can take a little while. The good thing about this is if you have multiple emails, it’ll also export those multiple emails all at the same time as new templates in your MailChimp templates from the Figma plugin.

One thing to be mindful of is if you’re re-uploading this template and you’ve made some changes and you want to re-upload it; by default, it will just create a new template in your MailChimp templates page, so it’s not going to override the template that’s already been uploaded. The reason for that is because you can actually go ahead and make manual changes in MailChimp; you can actually edit the HTML in MailChimp, so if you’ve made a bunch of changes manually and we’re happy with those in MailChimp, we don’t want to go ahead and override those automatically and assume that we want to override that. It’ll just create a brand new version and that way you can get rid of any other versions or go back to other versions in your templates list if you want to do that. Otherwise you can just manually update it and don’t worry about re-uploading from Figma if that’s the last version you’re going to use. That’s what that looks like there.

That’s basically it; this is just a much more streamlined way of getting your HTML out of Figma into MailChimp automatically without having to manually copy and paste that HTML and zip up images and things like that. Hopefully that’s helpful if you’re a MailChimp user and you’re an Emailify user; I know a lot of you have been wondering when these integrations might be shipping, so we’re just starting to ship them out now and there will be some more platforms coming soon. Thank you as always for watching, and as I said, we’ll be back very soon with some more Figma tutorials just like this one in the near future, so stay tuned.