How to test HTML emails in Outlook with exports from Figma using Emailify

Video Transcript

Today, I’m going to be showing you how to automatically test your HTML email exports from Figma in different versions of Microsoft Outlook using the Emailify Figma plugin and the Litmus.com platform.

The first thing we have to do is just go to your Figma file and click on the little “Resources” icon at the top. If you search for “Emailify” and under the “Plugins” tab, click on the Emailify item. You can run the Figma plugin by either clicking on the “Run” button here, or I’d recommend clicking on this little “More options” icon here and clicking save. That’ll save it to your Figma plugins list for easy access later.

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

If you’re new to the Figma plugin, the way that it works is it basically helps you to design HTML emails in Figma that you can customize and then export to production-ready HTML directly from the Figma plugin.

I’m just going to assume you’ve already got your design set up as you want. I’m not going to be going through that in this tutorial. But if you’re new to the Figma plugin, you might want to check out some other tutorials on the channel to go through all the design steps and customizations. I’m just going to assume you’ve already got the email ready to go and you just want to test the HTML in different versions of Microsoft Outlook.

Let’s go ahead and do that now. I’m just going to click on the export HTML button in the Figma plugin. I’m going to click on the export HTML button again, making sure that I’ve got the upload host image URLs selected. That’s just going to allow us to automatically have those images included in the HTML. So, I’m going to click on export to HTML.

Once this finishes exporting, I’m going to save this to my desktop. So, I’m going to click on the “Download your zip file” button, save it to my desktop. And if I now unzip that folder, we can see here that our email is inside this folder here with the same name as our frame.

Basically, I’m going to take this HTML file, which is our HTML email, and just drop it into a code editor. So, I’m just going to drop it into here. And that’s going to allow us to copy-paste the HTML into Litmus.

I’m just going to copy all of the content from my HTML file. And then I’m going to go to my browser. And I’m already logged into Litmus.com. And I’m basically going to click on the “Create new” button up here under the test tab.

Under the test tab, I’m going to click on “Create new”. And then, I’m just going to call this Outlook tests and click on the test selection here. Where it says “Build or test”, we want to click on “Test”. Then I’m going to click “Bring in your email”.

There’s a couple of ways to do this. Today, we’re just going to be pasting in the HTML. But you can also send an email to this special address if you’re sending it from an email service provider like MailChimp or something like that. If you want to send it from there, you definitely can. But for today, I’m just going to be doing a raw test just with the HTML that we exported from Figma by pasting it in.

I’m going to go down here and click on “View more ways to create an email”. And if you click on that, it’s going to give you this text area here that you can paste your code into. So, I’m going to paste that code that we copied from our clipboard. And here, I’m just going to call this test as the subject line. And then I’m going to click “Done”.

Once you click “Done”, it’s going to upload this HTML into Litmus.com. And it’s going to run your email through a bunch of different email clients to show you how it’s actually going to render on those email clients once that gets sent out.

These aren’t emulated previews. These are totally real previews that are being run on the Litmus.com servers behind the scenes. And they’re going to give you screenshots of what that actually looks like on all these different operating systems and on all these different versions of Microsoft Outlook.

You can see here it’s basically loading up a bunch of previews for different versions of Microsoft Outlook. We’ve got really old ones like 2007 and 2010, and also ones like 2016 on Mac and on Windows. And we’re also getting the dark mode version on 2021 and Outlook 2019. So, you can see that we’ve got a whole bunch of different versions here, but we’ve also got access to view more as well.

If you want to test this on more specific Outlook versions, you can basically click on this “Choose email clients” button up here. And that will bring up a bunch of options that you can choose under the Outlook category. So, let’s say we only want to test this on Outlook. We can basically clear all of the desktop clients. And just under the Outlook section here, we can either click this “Select all” button. And that’ll select literally every version of Outlook that’s available on Litmus. So, we can definitely do that. Or you can also go down here and select some web-based ones. So, if you want to test this on web-based versions of Outlook, you can do that as well. You can test it on Office 365. You can test it on Outlook.com. So, we can select those. And then, we can also test the mobile version. So, if you want to do mobile versions of Outlook, you can select those in here. You can do Outlook on iOS. We can unselect the Apple Mail ones in this case. And that’ll basically give us a full suite of Outlook clients on desktop and mobile that we can check.

Now we can click on “Run previews”. And this is going to take the HTML that we already uploaded a minute ago. And it’s going to rerun that through the additional Outlook clients that we just selected in Litmus. This might take a little while just because there are quite a lot of clients, and the rendering process can take some time for all of these different clients on Outlook using Litmus. But you’re basically going to get a full test suite of how your HTML that was exported from Figma is going to look across every version of Outlook that you can imagine or every version that’s supported in the Litmus platform.

You can see here we’ve got the Outlook.com and Office 365 web-based previews. So, these are the web client ones we can see what they look like. You can see here that the preview is loaded up, and we’ve got all of our content in here. We’ve got rounded corners, which are going to be a bit different from the older versions of Outlook, as we’ll see up here. You can see that these ones basically just have square corners because the Border radius property isn’t supported in older versions of Outlook. So, if we load up this preview here, you can see that the corner radius is just square because that’s what it falls back to. But the rest of the content is looking nice. So, you’re going to get that a few times if you’re wondering why the Border radius isn’t supported in Outlook and maybe a few other small things. That’s going to be why.

We can also see dark mode previews. We’ve got a bunch of different clients that do support dark mode on Outlook, so you can preview those as well. But yeah, this is basically the fundamental idea. You just take your HTML that was exported from Figma. You just open that up in either a code editor, or you can open it in the browser and just view source and copy that into the Litmus platform directly. And then, it’s basically up to you to pick which email clients for Microsoft Outlook you’re supporting or you’re interested in seeing how they render. And Litmus will take care of all of the heavy lifting and let you preview that HTML in Outlook, any version that you want.

I’ll leave it there for today. I hope that’s been helpful if you’ve been wondering how to test your HTML emails in different versions of Microsoft Outlook. Litmus is a really, really robust way of doing that. So, I hope it helps with your testing workflow and QA workflow for your HTML emails. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.