Video transcript
9-minute video ·
Today, I’m going to be showing you how to automatically test your HTML emails exported from Figma in dark mode 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, you can search for the word “Emailify”. Under the “Plugins” tab, you’ll see the Emailify item pop-up. All you need to do to run it is just click on that item and either click on this “run” button down here or you can click on this “more options” icon here, which I’d recommend. Just click on the save icon here, and that’ll allow you to save it to your Figma plugins list for easy access later.
I’ve already done that. I’m going to go to my canvas and just 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 the Figma plugin, the way that it works is it basically helps you to design HTML emails inside of Figma that you can then customize the content and design of in Figma using the normal Figma styling tools you’re used to.
Once you’ve done that, you can then export that to production-ready HTML from the Figma plugin, which we’ll do in a second. We’ll be able to test what that looks like in dark mode on some different email clients.
I’m going to assume that you’ve already got your design set up as you want. I’m not going to go through all the design tools in this tutorial. If you want to go through those or if you’re new to the Figma plugin, I’d recommend checking out some of the tutorials on the YouTube channel.
But for today, we’re just going to be exporting this HTML email from Figma and testing it out in dark mode using Litmus. So, I’m going to do that now. I’m just going to click on this export HTML button up here. Then I’m just going to make sure the upload hosted image URLs toggle is enabled here, and then I’m going to click on export to HTML.
Once that finishes generating the HTML for us, we’re going to be able to download that to our desktop. We can do that by clicking on the little “download your zip file” button. So, I’m going to click that now and I’m going to download that to my desktop.
I’m going to open up the zip file. If you open up that folder, you’ll see you’ve got this little test email folder. That’s just exported the email from here. So, we can see the test email frame that we’ve got in Figma. That’s created this folder here.
What we want to do is take this index.html file inside that folder, and we basically want to open that up inside of a code editor. So, I’m just going to drag this into VS Code. You can also open that up in the browser and view source that way, but for today, I’m just going to be copying the code straight from this editor here.
I’m going to copy-paste all of that HTML code. Then I’m going to go to my browser and I’m going to go to Litmus.com. I’m going to use that service to test out this HTML in dark mode.
What I can do is I can go down here under the test tab. If you click on “test” in Litmus, and then click on the “create new” button down here. You basically just want to give this a name. So, I’m just going to call it “dark mode test”. Make sure you’ve got the test option selected down here. Instead of build, you want to click on test. Then click on “bring in your email”.
Once that loads up, there’s a couple of different ways it’s going to allow us to bring in our HTML. We can either send the HTML from a different platform to this special address here, and that will get loaded into Litmus. But for today, we’re also just going to be focusing on pasting in the HTML instead.
What you need to do is go down here where it says “view more ways to create an email”. You want to click on that little link. That’s going to let us paste our email that we just copied from our code editor into this little box down here. Click on that input and click paste. That’s going to paste in the HTML that we just copied. Then you can just put in whatever you want for the subject line and click on “done”.
Once you click “done”, it’s going to take all of that HTML that we just pasted in. It’s going to upload it to Litmus, and it’s going to allow us to run that HTML email against different email clients to show how it’s really going to render the HTML email once it lands in people’s inboxes.
By default, it’s going to pick a bunch of different email clients for you that it broadly selects. You’re going to get a bunch of different Outlook clients. You’re going to get some mobile clients and some web-based clients. But for today, we’re mostly interested in dark mode.
What we can actually do is customize the clients by clicking on this little “choose email clients” button. If you click on that, you can now go in and manually select all of these different items. We can select Apple Mail on dark mode and light mode. We can go down to Outlook and we can select the document options there too. We can do Outlook 2021 or Office 365. We can do those in dark mode, and you can select that on Mac and Windows. You can pick a bunch of different options there.
We can also go down to our mobile and tablet options. So, we might want to do Gmail. We’ll do the Gmail app on Android in light and dark mode just to compare them. Then we can also go down to our iOS options. We can do Gmail in dark mode and light mode, and also iOS mail. We can do iOS mail on iPhone 14. We’ll do it in dark mode and light mode.
I think that’s pretty good for now. It’s a pretty broad selection. So, let’s go ahead and run that. We can click on “run previews”. That’s basically going to take the HTML that we just uploaded and rerun those previews.
As I mentioned, these are real virtual machines or real computers that are being rendered. These aren’t emulated. So, you’re going to get a really accurate look at what these would look like if they’re going to be sent to somebody’s inbox that’s running these particular clients.
In this case, it’s going to be really handy for testing our HTML emails in dark mode. Dark mode is extremely difficult to design for based on the fact that these email clients all have their own way of handling it. They’ll basically inject their own CSS styles on top of your HTML, overriding anything that you’ve designed. They basically go and apply whatever styles they think are the best for your design, even if that’s often not necessarily the case.
Testing your HTML email in dark mode is really crucial if you want to understand how your HTML emails are going to get rendered in different email clients when they enable dark mode.
We can see here on the Gmail app, we’ll just open up that one on iOS. And you can see here that it’s looking good. They’ve changed the header, obviously, so it’s a slightly darker header with lighter links. But the text is looking good. They’ve just swapped that out to be lighter text on a darker background. So overall, this isn’t looking too bad.
If you have more complicated blocks with different color backgrounds and things like that, this can get really out there sometimes. These applications can really go to town on the styles that they inject. But because this is quite a simple design, it’s actually looking really good.
And I think that’s one of the key tips for designing with dark mode. You really want to kind of lean into the changes that these clients are going to make rather than trying to fight them. So, if you try to basically make it look exactly like this and keep those backgrounds and keep those text colors, it’s going to be extremely difficult because so few email clients actually support doing dark mode overrides. You can do those using Emailify. So, for example, if you click on one of these elements and click on the HTML and mobile settings button up here, you can actually drop in background colors and text colors to override those.
But it’s really important to know that only is supported in a handful of clients. So basically just Apple iOS mail on mobile and also the Mac OS mail app. They’re really the two big ones that’ll support these properties. But for the other clients, you’re pretty much going to be stuck with whatever they decide to do.
As I said, it’s really important to go through and see actually how these are going to get rendered. So, you can see down here we’ve got our Outlook one as well. So, we’ve got Outlook 2021 in dark mode, and that’s basically going to render it on the desktop version. Again, we can see it’s fairly similar to the Gmail version. It’s kind of knocked out this color at the back. It’s inverted this to a darker gray. So not as dark as the Gmail one, but it’s inverted the text here as well. Very similar to what Gmail did overall. We can also see what that looks like across other versions as well.
But if we also then go into the Office 365 dark mode, you can see that that’s also looking a little bit different too. If we load that up, you can see that the header is actually much darker. There’s barely any background color difference there at all. The background of the overall email is essentially the same as the body. So before, in the other preview that we just looked at, it was actually quite different between the two. But in this case, Office 365 is just basically taking all of that color out and making it all the same. And it’s changing this footer and header area down here to be a very, very slightly different color than the background.
Again, it can be very unpredictable to know what these clients are going to do. But again, all the more reason to test it in something like Litmus, as we’re doing now, just to see how that is actually going to look once it gets into some of these clients and see how they handle them.
I’ll leave it there for today. I just wanted to keep that really simple. You’re welcome to go through each of these in more detail in your own tests. I don’t think you’ll be too interested in me going through every single client. But this is a really good way of testing your emails from Figma or testing any HTML emails in dark mode using the Litmus.com platform and getting a really accurate look at how this is going to render across different clients when they’re in dark mode.
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.
Pro Bundle