How to export HTML emails from Figma to Mailjet using Emailify

Video Transcript

Today I’m going to be showing you how to export your HTML email designs directly up into the Mailjet email platform. If you’re a user of Mailjet and you want to automatically upload your HTML templates into Mailjet directly from Figma, this Figma tutorial is going to go through that right now.

The first thing we need to do to get started is if you go to the “Resources” icon in your Figma header toolbar and click on that, and if you search in the search bar for the word “Emailify”, you’ll see Emailify pop up. If you haven’t already done so, you can install the Figma plugin by clicking on this little icon here with the three dots which says “More options”, and if you click on that, and click on “Install”, that’s going to install the Figma plugin to make it easy to access again later.

If you’ve already installed the Figma plugin you can run the plugin by clicking on “Run”, or if you’ve already run the Figma plugin once in the file, you’ll see a little shortcut pop up on the right hand side here. I’m just going to run the Figma plugin by clicking on that, and that’s just going to run the Emailify Figma plugin we just installed a second ago.

If you’re new to the Figma plugin, we have some other Figma tutorials on the YouTube channel to show how to actually go about designing these emails. I’ve already got a really basic one designed just using some of the pre-built components in the Figma plugin, but you can customize these and build these out any way you want to get the design right before you export it; in this case we’re just going to be focusing on exporting an existing Figma email design to Mailjet.

To export a Figma email design that you’ve already got created to Mailjet, you can first verify the HTML output by clicking on the “Preview” button; click on “Preview” and that’s just going to load up a really quick HTML email preview that gives you a real sense of what the email is going to look like when it is uploaded into Mailjet from Figma. I’m quite happy with that the HTML looks good it’s matching up with my Figma design.

I’m going to go ahead and export this to Mailjet now, and we do that by clicking on the “Export HTML” button; I’m going to click on that now, and by default it’ll select the “HTML Email” export option, which basically just downloads the HTML email to a zip file, but for today we want to export this directly to our Mailjet account. I’m going to scroll down the export options and click on the “Mailjet” option and this is going to change these inputs below to input our API key. There’s a link here in the description of the Figma plugin where it will ask you to import your key and secret from Mailjet, and that’s just going to take you to a page in your Mailjet account where you can get these details. For example, in my version, I’ve got my “API Key Management” screen up which is from the link that was in the Figma plugin, and what you want to do is basically go down here to the “Primary API Key” and you want to click on this little toggle visibility icon to get your API key. You can copy that, and when you generate your API key originally it’ll give you a secret key that you should have copied somewhere else; hopefully you’ve got that handy. If you’ve forgotten it, or if you need to reset it, you can do that by clicking on the little settings icon over here and resetting that secret key, but if you do have it stored somewhere just get that file out or get that document open, and we’ll copy that secret key as well.

Once you’ve done that, you can paste the API key and the secret into these two text fields here, and once you’ve done that all you need to do is select the emails that you want to upload to Mailjet. In this case, I’ve just got one selected, and then click on the “Upload to Mailjet” button; this is now generating the production ready HTML from your Figma designs and uploading the template into Mailjet. It’s quite quick, it’s already been uploaded, and you can see here it’s telling us that our Mailjet templates have been uploaded. We can view them in the Mailjet marketing templates page once we’ve logged into Mailjet.

I’m already logged into my Mailjet account, so I’m going to go back to the browser and open up the link that was just in the confirmation message in the Figma plugin. This is going to basically take us to the template section and the marketing templates; you can see up here it’s in the “Marketing” tab and you can see here that this was updated half a minute ago, so this is definitely the email that we just uploaded from Figma into Mailjet, and we can view it just by clicking on the “Preview” link on the thumbnail and that will take us to the preview page for the email.

You can see here that it has uploaded the HTML exactly the way that we saw it in our Figma preview, which is really good, but we can also go ahead and edit that as well if we need to. If you click on the little settings icon and click on “Edit”, that’s going to also take us into the Mailjet code editor as well. If you did need to make any code changes, ideally you would have done it beforehand in Figma because it’s just much easier to do that without kind of rummaging through the code, but if you do need to do that, you can jump in here and actually edit the template in the Mailjet HTML editor as well. Once again, you can preview that or send a test email to yourself, too.

That’s it, that’s basically the whole process; as I said, this video is not going to cover the design process or how to use components, or customize those. If you’re interested in that part of the Figma plugin, please feel free to check out some of the other videos on the YouTube channel, there’s a few in the Emailify playlist that goes into quite a lot of detail about how to actually design these emails before you upload them or export them to HTML; those would be worth checking out, but if you’re already using Emailify or you were just interested to see how to automate getting an HTML template out of Figma into your Mailjet account automatically, this is definitely going to be the quickest way to go about it.

I hope you found that useful if you are a Mailjet user and a Figma user; feel free to try it with your team, and hopefully it improves your workflow not having to manually upload these templates every single time, so it should be much quicker this way. Thank you as always for watching, and we’ll be back soon with more Figma tutorials just like this one very soon.