How to export HTML emails from Figma to Mailgun using Emailify

Video Transcript

Today I’m going to be showing you how to automatically upload HTML emails from Figma into your Mailgun account using the Emailify Figma plugin.

To get started all you need to do is go up to the “Resources” icon at the top of your Figma file here, click on that, and then search for the word “Emailify”, and under the “Plugins” tab you’ll see Emailify pop up. If you just go ahead and click on that result, you can either run the Figma plugin by clicking on this “Run” button here or I’d recommend clicking on this “More options” icon here and clicking “Save to Figma plugins” and that will automatically save the Figma plugin to your list for later.

I’ve already gone ahead and done that, so I’m going to go back to my Figma canvas, I’m going to right click anywhere, I’m going to go down to “Plugins” I’m going to go down to “Saved plugins”, and then I’m just going to click on the Emailify Figma plugin and that’s just going to run the Figma plugin we just saved a second ago.

If you’re new to the Figma plugin, the way it works is that the Figma plugin helps you design emails in Figma that can then be exported out to HTML to various platforms. For example, I’ve just got this really simple email that I generated using some of the components in the Figma plugin, so you can go ahead and add those and customize them; we’ve got another tutorial on our YouTube channel that goes into depth on how to actually do that, so I’d recommend checking that out, but I’m going to assume that you’ve already got your email designed using the Emailify Figma plugin and now you just want to upload it to your Mailgun account.

To upload the HTML email from Figma to Mailgun, all you need to do is click on the “Export HTML” button in the Figma plugin and then you’ll notice here that it’s currently set to “HTML Email”, which is the default export, this will export it to a zip file on your computer, but today we obviously want to export it to Mailgun. We’re going to click on this little select box and we’re going to change it from “HTML Email” and scroll down to this “Platform Integrations” group and we’re just going to scroll down to the letter “M” and find “Mailgun”.

I’m going to go ahead and click on the Mailgun select item and that’s going to change the context down here to ask for two bits of information; it’s going to want our domain name and our private API key from Mailgun. There’s two links here that you can click if you’re already logged into Mailgun, as I am over here, you can go ahead and click on these two links. We can click on the domain link and this will load up the page in Mailgun with your domain names, at the moment I’ve just got this sandbox domain set up, but you might have a different one; I’m just going to click on that and highlight the domain and I’m just going to copy that to my clipboard and go back to Figma and paste that into the domain input field here.

I’m going to paste that in, and then I’m going to also click on this private API key link and click on that and that’s going to open up the window for the private API key in Mailgun. All you need to do is click on this little “eye” icon here to reveal the key, so I’m going to click on that now and I’m just going to copy my private API key, I’m going to copy that to my clipboard as well, and I’m just going to paste that into the key field inside of Emailify as well.

I’ve pasted that in and now you can see here that we’ve got the “Upload to Mailgun” button ready to go; I’m going to click on that now, I’m going to click on “Upload to Mailgun” and that’s basically going to generate the HTML automatically, it’s going to upload any images that are in the email and it’s going to send those templates to Mailgun; it’s telling us that we’ve got our Mailgun templates uploaded, so you can click on the Mailgun account link and then it says to go to the “Sending” menu link followed by the “Templates” link. If we look for that now, we can find that in the left hand column, we can see here we’ve got the “Sending” link here; click “Sending” and then once that’s expanded we can see the “Templates” link as well. We can now go ahead and click on “Templates”.

We’ve got our domain selected, you might have more domains that you’ve selected to upload to, but in this case I’ve just got this one; you can change it in here, and we can see here that the email we just uploaded from Emailify is now in here and we’ve got a little description letting us know that it is from Emailify. If we click into that, we can see here that it’s an HTML email, I’ve got the template name with a timestamp, this template name needs to be unique, so that’s why it has a timestamp built into it.

We can see down here that we’ve got some code snippets; we can see we’ve got Python, Java, Ruby, PHP, C#, Node; depending on your environment that you’re going to be sending the email from, you can basically go ahead and copy this code and that will be ready to go to send that email to whoever you’re going to be sending it to. With Mailgun, you’re obviously going to be integrating this into some sort of application, so you’ve obviously got some sort of custom application flow; maybe you’re sending a “thank you” email or sending a “welcome” email or something like that, that you’ve designed, and this code is now going to help you send out that HTML to whoever you want to send it to. You can see here we’ve got two address, you can obviously swap that out in your code you can change the subject line, but the important thing here is that the template is what’s going to be sent out. If you were to run this code, you would basically get the template that we just uploaded, the HTML template, sent to that address with whatever subject you want provided that the template is matching, the one that we just uploaded.

That’s basically it; that’s a really easy way of getting HTML templates from Figma directly into your Mailgun account automatically using the Mailgun API via the Emailify plugin. That’s basically the example, so I’ll leave it there for today, I just wanted to run through that with you really quickly, as this is a new integration with Mailgun in Emailify. I thought it’d be worth just recording a short video demonstrating how you can actually integrate your Mailgun account with Figma in that way.

I hope that’s been helpful if you’re a Mailgun user and a Figma user; this is going to be a really easy way to get your HTML emails out of Figma and into your Mailgun account without doing any copy and pasting or anything like that. Thank you as always for watching, and we’ll be back soon with more Figma tutorials like this one very soon.