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

Video Transcript

Today, I'm going to be showing you how to automatically test your HTML emails across different email clients using the Emailify Figma plugin and the Litmus platform.

To get started, all we need to do is go to your Figma file and click on the little "Resources" icon at the top here. If you click on that and search for "Emailify" under the "Plugins" tab, just click on the Emailify result. You can run the Figma plugin by either clicking this run button here, or I'd recommend clicking on this little more options icon here and clicking save. That's going to 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, go down to "Plugins", then go down to "Saved plugins", and click on the Emailify item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to this Figma plugin, the way that it works is it basically helps you design HTML emails directly in Figma, which you can then export out to production-ready HTML automatically. That's what we're going to be focusing on today. I'm going to assume that you've already got your email designed using the Figma plugin and customized it in Figma. If you are new to the Figma plugin, you might want to check out a couple of other tutorials first. But for today, I'm just going to be assuming that you've already got your email set up the way that you want.

For example, you might have some more content, so I'm just going to throw this little image block in there. Now, we can basically export this to HTML to test in Litmus. I'm just going to click on the "Export HTML" button up in the Figma plugin. Then, I'm just going to make sure that "Upload hosted image URLs" is enabled. That's going to automatically upload the images for me. Then, I'm just going to click on "Export to HTML," and that's going to automatically generate the HTML from our design and export it into an HTML email that we're going to be able to test.

I'm just going to click on "Download your zip file." Then, I'm going to click on "Save" to save that to my desktop. If I open up that zip file, you can see here that I've got my HTML email in this folder here.

What I basically want to do is take that HTML, and I'm going to be pasting that into the Litmus platform. Litmus.com is a platform that allows you to automatically test your HTML emails across different email clients and see how they render in different clients like Outlook, Gmail, and other mobile devices.

All I need to do is basically go to my folder, take my HTML file, and get the HTML out of there. I'm just going to open up my code editor and drag and drop that HTML file in there. Then, I'm going to select all and copy that to my clipboard. In Litmus, I'm just going to click on this "Create New" button. I'm going to call this test email from Figma. Then, I'm going to select this "Tests" option up here and click on the "Bring in your email" button.

There are a couple of ways that you can bring in the email. As I mentioned, we're going to be doing it by pasting in the HTML. But the other way you can do it, if you're sending this test from an email service provider, is they give you an email address that you can send an email to with your HTML email in it, and this will automatically get captured here. But for today, we're just going to do it a simpler way and click on this "More ways to create an email" button.

At the very bottom, just click on that, and that will allow you to paste in your HTML. I'm just going to paste in my HTML to the code block here. I'm just going to paste that, and you can see all of our code that we just copied is now in here. Then, you can also just put in a subject line. We're just going to call this one "Test." Click on "Done."

After you click "Done," it's basically going to upload the HTML email that we just exported from Figma into Litmus as a brand new test. It's going to go to this "Previews and QA" tab, and this is going to allow you to view the HTML email in a bunch of different email clients and test how they render across all these different clients.

You can see here it's slowly loading in all the previews. These are real previews of the emails rendering in real email clients. So, it gives you an accurate view of what this is actually going to look like on certain applications that you might not have on your computer.

We've got things like Outlook 2016 on Mac, Outlook 2016 on Windows, Office 365, dark mode Outlook, and also some mobile clients as well. We've got Outlook on iOS, the iOS mail apps, and then also some web-based apps as well. If we click on any of these previews, we can get a larger version of that screenshot. Again, these are being rendered in the real email clients, so these aren't emulated. These are actually tests that Litmus does behind the scenes to a real machine or a real computer using some of these apps or web platforms. It basically gives you a really accurate way of seeing how the email is going to look in all of these platforms.

It does sometimes take a little while to load up because it is quite intensive. I think to run all these tests, but if we open up one of these tasks and load up the full version, we should be able to see what they look like. So, in this case, we're just looking at a full screenshot of Outlook 2016 on macOS. We can scroll down here, see the whole email, everything that we designed in Figma over here has now been rendered, and we can see that it looks the same as it did in Figma on macOS in Outlook 2016, which is really good.

If we go back, we might want to open up that same email on Outlook 2016 for Windows. So, we can do that if you just click on the result, it's going to load up the screenshot again. In this case, we're looking at the full screenshot of Outlook 2016 on Windows 10. You'll notice it still looks really good, but there are obviously a few small differences. For example, Outlook doesn't support border radius, so you can see that the border radius on the button, which was working on the Mac Outlook version, isn't going to be rendered on the Outlook version for Windows. That's just one thing to keep in mind. Of course, there'll be a few other minor things that Outlook doesn't support. Obviously, Outlook is notoriously bad for emails in general. But this is at least going to give you a bit of an idea of what it's going to look like, and you can make any enhancements or changes based on that.

Again, we can see Office 365 in Chrome. If we scroll down on this screenshot, we can see that Office 365 is rendering it a bit better. We've got our border radius included this time, I guess because this is a browser-based application rather than the older sort of desktop application from 2016. So, it's going to support a few more of those more modern things.

This is basically what you want to be doing. You just want to go through these and check out what's looking good, what's not looking good. By default, all of the components that are designed from Emailify, all of these components here that are available, have been tested in Outlook and the other email clients in Litmus already. So, those should all be looking really good anyway. But it's always worth testing it in Litmus or a platform like Litmus anyway just to be 100% sure of what it's going to look like when it does get delivered. I'd always recommend running through that as well.

You can also change the email clients that you use. So, if you wanted to choose different email clients, you can select different specific versions of Outlook. You can break this down into other categories and select very specific versions of these different clients as well. Then, you just select those and click "Run Previews" again, and that will automatically rerun the HTML previews for those clients that you've selected.

That's basically it. I'll leave it there for today. I just wanted to show you a quick tutorial of how to get your HTML from Figma into Litmus to test your HTML emails on a bunch of different email clients automatically in a way that's going to be very accurate to see how they're going to render. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.