How to send yourself tests of HTML emails from Figma with PutsMail using Emailify

Video Transcript

Today, I'm going to be showing you how to send yourself HTML email tests to your own email address using the Emailify Figma plugin and the PutsMail.com service.

To get started, all we need to do is go to your Figma file. If you click on the little resources icon up here and search for "Emailify," and if you go to the "Plugins" tab and click on the Emailify item, you can run the Figma plugin by clicking on this "Run" button here.

Or, I'd recommend clicking on this little "More options" icon here and clicking save. That's just going to make it really easy to run the Figma plugin from your saved Figma plugins list later. I've already done that, so I'm going to go to my Figma campus and right-click anywhere, just go down to "Plugins," and then go down to "Saved plugins." If you click on the Emailify item, that's just going to run the Figma plugin we 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, which you can then customize and change the content styles of before exporting it to production-ready HTML automatically.

I'm not going to be going through all of the design features today. I'm going to be assuming that you've already gotten yourself familiar with those, and you've got the email design the way that you want.

If you're new to the Figma plugin, you can check out some other Figma tutorials on the YouTube channel, which will go into depth about how to use the design tools and create and customize your emails the way that you want to.

For today, let's just assume that you've already got your email designed, and now you want to send a test email to yourself of the exported HTML. So, let's go ahead and do that, and we'll start by exporting the email from Figma to HTML.

I've got my email here. I'm just going to click on the export HTML button in the Figma plugin. And once you've clicked on that, just make sure the upload hosted images URL option is selected, and then click on the export to HTML button here. And once that finishes generating, we can download that to our computer.

Once it finishes uploading the images, you'll get a little button down here that says download your zip file. So, I'm going to click on that now. And if you save that to your desktop and just unzip that file, and then if you open up that folder, you'll see that you've got a folder called the same name as your Figma frame here. And inside of that folder, there'll be an index.html file, which is your HTML email.

I'm going to open that up in my code editor. I'm just going to drag and drop that into here. And this is basically all the exported, automatically generated HTML from our email. And I'm going to copy that to my clipboard for now. So, I'm just going to select all of that and copy it.

And then what I'm going to do is go to my browser, and I'm just going to go to PutsMail.com. So that's p u t s m a i l.com. And this is a service that's free. It allows you to send tests of your HTML emails to yourself so you can see what they look like in your own email inbox or on your mobile or on your desktop email client.

To get started, you just have to create a new account. It's totally free. You can just sign up for a PutsMail account. And once you've done that and you've signed in, you can then click on this create a new test email button. So, I'm going to click on that now.

And then once that page loads, you're going to be able to drop in your HTML, add a subject line, and select the email addresses or input the email addresses that you want to send the HTML test to.

First of all, I'm just going to drop in my HTML. So, I've just pasted that into the body there. I'm just going to make that subject line be "test" for my email. I'm just going to paste in my own email. So in this case, I'm just going to do one address. You can actually add more addresses if you want to send it to multiple people or multiple inboxes of your own. You can totally do that by clicking on this button here. But for today, I'm just going to be sending one HTML email to myself, which is going to be going to a Gmail account.

And then when you scroll down here, you want to make sure to not check this checkbox that says "move my CSS inline." Emailify automatically inlines all of the content. And what that means is that you can see down here that the table cells and the HTML elements themselves already have inline styles applied to them. So, you don't need to check that box. In fact, it'll probably cause issues if you do. So just leave that as is. And what that means is it's going to take exactly what's in our email here and it's going to send that directly to our email address without modifying it at all.

This is really helpful for troubleshooting, especially if you're using another email platform like MailChimp or Klaviyo or something like that. And if you're seeing issues with that platform, it's always good to run it through PutsMail.com as more of a double-check, just to make sure that it's not the email platform itself messing about with your HTML. PutsMail is going to make sure that your HTML is unmodified, so you get a really accurate view of how it should look.

Once you've done all that, just go ahead and click on the "I'm not a robot" thing just to make sure that it sends. And then once that's selected, just click on "send email," and it's going to shoot off that email, that HTML, to the address that you specified or addresses that you specified. And once it finishes, it'll give you a little success message, and it's saying your test is on its way.

Now what you want to do is just go back to your inbox. So log into your email client and switch into that. So, I've just switched into my Gmail inbox, and I can see that the test that we just sent ourselves is right here. You can see there's a test from Litmus PutsMail. So, if I click on that result, we can see here that it's basically loaded up the HTML as we'd expect.

This is all of the real HTML that we exported from Figma, and we're able to test this directly in our Gmail inbox using the Gmail web app. You could obviously test this in the Gmail mobile app as well if you're using that. Or if you're sending this to a totally different email service, you would obviously log into that platform. Or if it's the Outlook client or something like that, you could see exactly what this looks like. You can click on any of the buttons, make sure everything's working as you'd expect. And that's going to be a really nice way of just testing the email to make sure that it's looking good on your own client before you start testing around other clients as well, maybe using the Litmus.com platform to do some more robust testing.

This is a really, really easy way that I always do personally when I'm trying to test an email from Figma. So, if I'm exporting my emails from Figma to HTML using Emailify, I will send a test to myself sometimes for troubleshooting reasons, just using PutsMail, just to rule out any issues with email clients that might be mangling the code. So just using that as a really reliable way of sending unmodified HTML, I think, is a really good practice to get into if you are troubleshooting some weird issues with email platforms, just to rule out that the email platform isn't the cause of the problem to begin with. This is a really good way of validating that.

We'll leave it there for today. I just wanted to keep this really short and simple. If you've been wondering how to send yourself HTML email tests, using PutsMail is a really good way of doing that, a really quick way of getting your emails out of Figma into HTML and doing a really quick test just as a double-check to see what it looks like right out of the gate.

Hopefully, that's going to be helpful for your own workflows and also if you're troubleshooting, as I mentioned before. So yeah, 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.