How to test HTML emails on mobile 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 different mobile devices on different mobile email clients using the Emailify Figma plugin and the Litmus.com platform.

To get started, all we need to do is go to our Figma file. If you click on the little “Resources” icon up here and just search for “Emailify,” and if you click on the “Plugins” tab, and then click on the Emailify item, you’ll be able to 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. And that’s just going to save it to your Figma plugins list for easy access later.

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

If you’re new to the Figma plugin, the way that it works is it basically allows you to design HTML emails in Figma and then customize the content and styles of those using the Figma app. And then, you’re basically able to export that to production-ready HTML directly from the Figma plugin. So, I’m not going to go through how to design the emails in this tutorial. If you’re interested in that or if you’re new to the Figma plugin, you can basically find a bunch of tutorials on the YouTube channel.

For today, I’m just going to be focusing on testing these emails in HTML in different mobile clients. So, see how they render on different email clients. So, to do that, we just need to export the email from Figma to HTML. So, I’m going to do that by clicking on the export HTML button in the Figma plugin. Then, I’m just going to make sure that the upload hosted image URLs option is selected. And then, I’m going to click on the export to HTML button here. And that’s going to generate the HTML from our design in a few seconds.

Once you’ve done that, you can just click on the download your zip file. And if you save that to your desktop, you can basically unzip that file, open up the folder, and inside the folder, you’ll see we’ve got our test email, which is the frame that we exported from Figma. And we’ve got our index.html file inside that folder.

What you want to do is you want to open up that index.html file. And you want to basically open that up in either a code editor or you can open it up in the browser and view source and copy-paste the HTML that way. I’m just going to open it up in my code editor. I’m just going to select all and copy all of that HTML to my clipboard.

Then, what I want to do is I want to go to my browser and go to Litmus.com. So, I’m going to go to Litmus.com and basically create a new email under the test tab. So, if you’ve got tests selected up here, you can then go down to the create new button down here. And then, you just want to put in a title. So, I’m just going to call this one “mobile email tests.” And then, I’m going to click on the test button down here.

Where it says, “Would you like to start with build or test?” Just click on test. And then, click bring in your email. So, there’s a couple of ways of doing this. One way you can get the HTML into Litmus is by sending the HTML to Litmus. So, it gives you this special email address here that you can copy. So, if you’re using MailChimp or something and you’ve already uploaded your template there, you can actually send it from MailChimp to Litmus. But for today, I’m just going to be using the raw HTML method.

I’m going to go down here and click on “view more ways to create an email”. And then, that’s going to allow us to paste in the HTML that we just copied a second ago from our code editor. So, I’m going to paste it in this bottom area here. And I’m just going to call this test. And then, I’m going to click done. And that’s going to take this HTML, upload it into Litmus, and Litmus is then going to run that HTML email across a bunch of different email clients to show you how it’s going to render when it actually lands in those inboxes.

These are real tests, these aren’t emulations or anything like that. These are running on real devices or real virtual machines on the Litmus servers. And it will allow you to see what the email is going to look like on a bunch of different email clients and mobile devices.

By default, it’s going to pick out a few that it thinks you’re going to be interested in. But we really want to drill down on testing the HTML on mobile devices and mobile clients today. So, I’m actually going to go up to the top here and click on choose email clients. And I’m going to basically clear all of the desktop ones. So, we don’t want any desktop ones. We don’t want any web-based ones. And I’m going to expand out this mobile and tablet section. And that’s going to allow us to break it down by different types of mobile devices and clients.

You can see we’ve got a category for Android phones. We’ve got a category for iOS devices that we can select. So, you can basically just go through and pick up the devices that are relevant to you. So, you can check it on iPads. You can check it on iPhones, different versions. You can do it in dark mode. You can do iPhone Pro or iPhone regular.

I’m basically just going to select all of the latest version of iPhone or iOS. So, iOS 16. And I’m going to preview that on regular iPhone 14s. And the iPhone 14 Pro Max. And I’m going to preview that in those different clients in a second.

Once you’ve selected all of the mobile clients that you want to preview it on, so we might add a couple of Android ones as well. So, let’s just do the Gmail app as well for Android 11. And once you’ve selected all the mobile devices and mobile email clients you want to test on, just go ahead and click on this run previews button. And that’s going to take the HTML that we just uploaded a second ago, and it’s going to rerun those previews on those different mobile devices.

We’re going to be able to see how our HTML that we exported from Figma is going to look on the different iOS and Android devices that we just selected a minute ago. You can see here that it’s starting to render some of those previews. So, we’ve got our iPhone 14 preview. We’ve got the Outlook iOS version also on iOS 14.

We can go ahead and blow some of these up to a larger size. So, if you click on any of them, just click on that link. And this is basically going to load up a preview. So, you can see here, in this case, we’re looking at the Outlook iOS app on iOS 14. And we can scroll through it, and we can see that it’s looking really good. It’s basically looking how we designed it in our Figma file. And we can jump back and see what it also looks like on Apple Mail.

We’ll do Apple Mail on an iPhone 14 Pro Max. So, if we open that up, you can see here, this is also looking really good. We’ve also got our custom Google fonts rendering nicely. Some of the email clients actually don’t support Google fonts, so it’ll fall back to a different font. But in this case, it’s supporting the Inter font that we’re using. So, we’re using Inter, which is a custom Google font. Ironically, the Gmail app actually doesn’t support Google fonts, which is strange. But if you’re running an iOS mail client, so iOS Apple Mail, it’s going to look really nice. And you’re going to get those custom Google fonts rendering as you’d expect.

That’s basically what it looks like there. As I said, we can also open it on Gmail for Android. So, if we open up the Gmail Android mobile app, we can see here that it’s going to load up that preview as well. Some of these previews can be a little bit slow to load in Litmus sometimes. I think that’s just because it’s quite intensive in the background to actually render these previews on a real device or a virtual machine. But that’s basically what it’s going to look like.

Aagain, we can see that our HTML that we exported from Figma is also looking quite good in the Gmail app on Android. So, this is Android 11. As I mentioned, it’s going to fall back to a different font. You can see this is looking slightly different to the Inter font that we selected, the Google font in Figma. So, I think it’s falling back to—I believe it’s Roboto, or Roboto, however you pronounce it—on the Gmail app for Android. I think that’s what it’ll fall back to if it doesn’t support the Google fonts that we’re using. But it’s still looking good overall, and the layout’s looking nice, and everything is there that we’d expect.

That’s basically an overview of how you can use Litmus.com to test out your HTML emails from Figma in all of these different mobile clients. So, you can do, as I said, Android, iOS, check it out on Outlook and Gmail. Those are going to be your main ones. And of course, Apple Mail, which is the default app for iOS as well. You can basically just go through and pick those out as you need.

As I mentioned, there’s a bunch of other runs that we didn’t look at, but you can go through those individually. There’s 47 of them. So, if you’re really diligent, you can inspect all of those manually. But I think if you select the more popular ones, you’re going to cover most of your bases for testing how those HTML emails are going to render across all those different mobile devices and applications.

We’ll leave it there for today. I just wanted to show you how to test your HTML emails on these mobile applications and mobile devices. So, hopefully, that’s been helpful if you’ve been wanting to incorporate this kind of QA process into your workflow. So, feel free to give it a try, and I hope it helps you on your team. Thank you, as always, for watching, and we’ll be back soon with more Figma tutorials like this one very soon.