How to export HTML emails from Figma to Mailgun Inspect using Emailify

Video Transcript

Today I’m going to be showing you a quick tutorial on how you can automatically export your HTML email designs from Figma to the Mailgun Inspect platform using the Emailify Figma plugin. This is going to allow us to preview the HTML in real devices and real email clients like Outlook or different devices like iPhone and Android. It will let you review what the HTML is going to look like on those real devices before you send out the email.

To get started, all we need to do is go to our Figma file. If you click on the little resources or actions icon down here at the bottom of the file and search for Emailify, under the Figma plugins tab, you can run the Figma plugin by either clicking on this little run button down here or I’d recommend clicking on the save icon next to that. Then you can run the Figma plugin from your Figma plugins list. I’ve already clicked on the save icon, so I’m just going to go to my Figma canvas and right-click anywhere. Then go down to plugins, go down to saved plugins, and click on the Emailify item. 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 design HTML emails in Figma using the design tools and features in the Figma plugin. You can customize those to your brand and content, and then finally export that to production-ready responsive HTML with one click using the Figma plugin features. In this case, I’m not going to be going through all of the design process; I’m going to go through just the upload process. If you’re new to it, feel free to check out the other tutorials. But in this case, I’m going to assume you’ve already got your design ready. You’ve previewed it in the Figma plugin to check out what the HTML looks like. This is the real HTML that’s going to be exported, and you can preview it on different device sizes. This will show you what it’s going to look like on different devices like iPhone models and things like that. However, it doesn’t replicate the real devices or real clients; you can only do that using a tool like Mailgun Inspect, for example.

In this case, we’re going to close out the preview because I’m happy with the design. I’m just going to click on the export HTML button in the Figma plugin, and we’re going to change the default HTML email option. We’ll scroll all the way down past the platforms list down to the upload for testing category. We’re just going to click on the Mailgun Inspect option. By default, this isn’t going to have an API key populated, so you’ll have to create one. You can do that by clicking on the private API key link in the Figma plugin tip here. Provided that you’re logged into your Mailgun account, that’s going to automatically navigate you to the API keys page in Mailgun. From there, you can create a brand new API key. All you need to do for that is click on the create key button in Mailgun. You can give it a name; in this case, you might want to call it Emailify for Figma. Then you can just go ahead and click on the create key. That’s going to give you a brand new API key, and it’s only going to let you see that once. Make sure that you store it somewhere safe, like a password manager or something like that.

You want to go ahead and click on the copy to clipboard button. That’s going to copy the key to your clipboard. Now we can go back to the Figma plugin, go to the API key field here under Mailgun Inspect, and just paste that in. Finally, just triple-check the region. You’re probably in the US region, but if you’re using an EU-based account in Mailgun, you just want to change it to EU. I’m just going to leave it as US. Then I’m just going to go ahead and click on the send to Mailgun Inspect button. What that’s going to do is generate the HTML code, upload all the images, and then upload the template itself to the Mailgun Inspect platform. This will save you from manually copy-pasting the test into the platform; it’s just going to let you automatically do it.

You can see here that it’s saying our Mailgun Inspect tests have been uploaded. All we need to do is go back to our Mailgun account. I’m going to do that now. I’m going to go to the inspect menu over here and click on email testing. You’ll notice here that we’ve just got a brand new test that’s come through. It’s saying no subject line set because we didn’t actually set a subject line. If you want to do that, you can easily do that by just populating this field down here. You can paste in your subject line and preheader text for any email, and that’s a good thing to do. You should probably do that. In this case, I just wanted to do a blank test to show you how it works. I’m just going to click on the no subject line message here since we didn’t set one.

Then you’ll be able to see that all of the renders are now in Mailgun. It’s basically taken the HTML template that we uploaded from Figma via the Figma plugin and created a test for each of those renders inside the Mailgun Inspect platform. If we want to see how the HTML looks on an iPhone 16, for example, we just click on the iPhone 16 render. You can see here this is a real snapshot of how it actually rendered on the device itself. This is a real hardware device that’s being captured; it’s not a simulation or anything like that. It gives you a true sense of what that’s going to look like. You can do that for all different clients. You can see we’ve got Microsoft Outlook 365 on Windows 11, Outlook 2021 on Windows 11, in dark mode, in light mode, and of course all of the web clients as well. You can get a real snapshot of what that looks like and easily check all those devices and clients.

That’s basically it. I just wanted to show you a quick example of how you can automatically upload your HTML email designs from Figma that you’ve created with the Emailify Figma plugin and how to get those tests automatically sent over to your Mailgun Inspect account. It’s worth noting that Mailgun actually acquired one of the other tools that’s supported, which is Email on Acid. I think they’re going to be shutting down Email on Acid. I thought it’d be worth getting you up to speed on Mailgun Inspect in case you’ve had to transition away from Email on Acid and now go over to the Mailgun Inspect platform. This is going to be the best way to do it.

I just want to give you a heads-up, and hopefully that’s helpful. If you’ve been wanting to test out your HTML emails in all different clients and devices, real devices, this is going to be a really good way of going about it using the Mailgun Inspect platform. We’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.