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

Video Transcript

Today, I’m going to be showing you how to automatically test your HTML emails exported from Figma in Gmail on desktop and mobile using the Emailify Figma plugin and the Litmus.com platform.

All we need to do to get started is just go to your Figma file and click on the little “Resources” icon up here. If you search for “Emailify” under the “Plugins” tab, click on the Emailify item. You can run the Figma plugin by either clicking on this “run” button here, or I’d recommend clicking on this little “more options” icon here and clicking save. That’s going to let you run the Figma plugin easily from your Figma plugins list later. I’ve already gone ahead and done that, so I’m going to go to my canvas and just right-click anywhere, go down to “Plugins”, go down to “Saved plugins”, and then just 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 design HTML emails in Figma that you can customize and style however you like. It provides a bunch of different design tools and starter components that you can use to do that. I’m not going to be going through all of those things in this tutorial. If you’re new to the Figma plugin and want to get familiar with all the design tools and things like that, I’d recommend checking out the other videos on the YouTube channel.

For today, I’m just going to be assuming you’ve already got your design ready to go the way that you want, and now you just want to test that HTML in Gmail. So, we’re going to do that now, and I’m going to start by exporting this email I’ve got designed to HTML. I’m going to click on “Export HTML” in the Figma plugin, then I’m just going to make sure that the “upload hosted images” option is selected, and then I’m going to click on the “export HTML” button up here. That’s just going to generate this design into HTML that we can download.

I’m just going to click on the “download JavaScript file” button down here and download that to my desktop. If you open up this file and open up the folder, you’ll see here that we’ve got our test email folder, which is the same name as our frame in Figma, and we’ve got our HTML file here, which is the one we’re going to be testing in Gmail.

To open that up, you can just go to your code editor or you can open up that file in a browser and view the source. But either way, you basically want to copy all of the HTML in that exported file, and you want to put it into Litmus.com.

Litmus.com is a platform that allows you to test your HTML emails in all different kinds of email clients, including Gmail, which is what we’re going to be focusing on today. So, in Litmus.com, if you go to the “test” tab up here and then click on the “create new” button over here, you can click on “create new.” I’m just going to call this one “test Gmail example,” and make sure that you click on this “test” button here. So, you’ve got an option of either “build” or “test.” We’re going to click on “test,” and then we’re going to click on “bring in your email,” and that’s going to allow us to enter our HTML that we just copied from the code editor.

You can basically go down here and click on “view more ways to create an email,” and that’s going to give you this text box here to paste your HTML. So, paste your HTML in this bottom text box here, and then you can just give it a subject line. So, I’m just going to say “test” again.

You do also have the option of sending the HTML to Litmus. So, if you’ve already got your HTML template from Figma in MailChimp or a platform like that, you can actually copy this email address here and send a test email to Litmus from your platform. But for today, I’m just going to be keeping it really simple and assume that you’re basically going to be testing the email directly from the Figma export.

Now I’ve got our HTML pasted in there, I’m just going to click on “done,” and that’s going to upload this HTML block into Litmus. It’s going to allow us to view that HTML on all different email clients to see how it renders. In particular, I’m going to be focusing on Gmail for today.

You can see here it’s starting to load up some of the previews. By default, Litmus pre-selects a bunch of different popular email clients or a broad range of email clients that it recommends testing on. So, you’re basically going to get this set of default clients the first time you run the test.

But we can go ahead and actually customize that for our use case today, which is really doubling down on testing it in Gmail. If you go ahead and click on this “choose email clients” button up here, what we’re going to do is basically clear all these. So, I’m just going to click “clear all.” I’m going to collapse these and just click “clear all” on all of them. That’s just going to reset all of the selected email clients.

Now we can go through and actually pick which ones we want to test it on. So, in this case, I’m really just interested in testing our HTML in Gmail. So, what we can do is just select the Gmail option. I can do the Gmail app. I can do Gmail with IMAP. I can do Gmail on Android 8. I can do Gmail on Android 10. I can also do dark mode. So, we can basically select all the Gmail options that we want to use. In this case, I’m just going to select those ones for Android on mobile.

Then you can also go down to the iOS options. So, iOS, you can also do Gmail. So, I’m just going to do Gmail app on light and dark. So, I’ve got those two selected. And then what you can do finally is go down to web-based clients. If you click on “web-based” and then scroll down to Gmail and G Suite, so we can select Gmail in Chrome. We can select it on Edge, Firefox. We can do the same thing for G Suite. So, we can select those.

Once you’ve got those selected, you can basically click on the “run previews” button down here. That’s going to take the HTML that we already uploaded, and it’s going to rerun that HTML through all of those Gmail options that we just selected. It’s going to render the real Gmail apps and the real Gmail web clients as they are. So, these aren’t emulations. These are real computers that are running these behind the scenes on the Litmus.com servers. And it’s going to give us an accurate look at what our HTML that we exported from Figma is going to look like when it actually gets sent to a Gmail device or a Gmail application.

You can see it’s basically loading up all of these now. It can take a little while just to load them all because it is quite an intensive process behind the scenes. But once it loads, it’s going to give you the option of viewing these in a larger modal. So, if we click on one of these options, so I’m just going to click this IMAP option down here, or maybe we can go to dark mode one first. If we click on Gmail for dark mode, so this is just running on Android 10, and you can see now that the preview is loaded, we can basically go through and scroll through this.

This is running on, as I said, Android 10 in the Gmail app with the system in dark mode. This is going to give you an accurate preview of what the content is actually going to look like when it’s rendered on dark mode. So, you can get a sense of what that looks like here. And then if we go back, we can also see what it looks like in the web clients. So, we can basically go down to Gmail for web. So, we can run it in Chrome, and we can see here what that now looks like. This is just running in Gmail on a Chrome device or a Chrome browser, rather. And you can see here it’s rendering the content as we’d expect. So, we’ve got our nice border radii there, all the text is looking really good, images looking good. So, that’s overall looking really good in Gmail.

Again, you can go through G Suite, you can go through all the different browsers, you can go through all the different mobile apps. So, we can see what it looks like on iOS, on Android, in light and dark mode, etc. So, yeah, we can just open up the iOS one, see how that looks. So, we can see on iOS, it’s looking quite good as well. It’s just stacking all the content as we’d expect. And you’ll notice that the fonts are rendering on iOS Gmail. So, they’re looking really good. I think we’ve got Inter selected in that case. Some clients won’t support that. So, ironically, the Gmail web version doesn’t actually support Google fonts, but the Gmail app on iOS does actually support Google fonts, custom Google fonts. So, make of that what you will. But the fonts are looking really nice on iOS.

That’s basically it. I’m not going to go through every single Gmail app instance and Gmail web client in the Litmus results. You can feel free to do that yourself in your own time. But I really just wanted to give you an example of how you can customize the Litmus test to just focus on Gmail if you’re testing for Gmail, which is obviously a very popular email client. So, you really want to know what your HTML emails are going to look like across all of the Gmail clients on desktop and mobile. Then this is going to be a really easy way of doing it, just narrowing down all the Litmus clients as we went through before. And you’ll be able to see what your HTML emails that were exported from Figma are going to look like on all of those different Gmail clients when the HTML finally ends up in their inbox.

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.