How to export HTML email tests from Figma to Email on Acid using Emailify

Video Transcript

Today I’m going to be showing you how to upload your HTML emails from Figma into the Email on Acid platform, and this is going to allow you to test out your HTML emails on a bunch of different devices and email clients to see how they look across all those mobile and desktop clients.

The first thing we need to do is just install the Emailify Figma plugin by going to the Figma Community, searching for the word “Emailify”, and under the “Plugins” tab you’ll see “Emailify” pop-up, and all you need to do is click on the “Install” button and you’ll be ready to go.

If you jump back into your Figma canvas and just right-click anywhere, go down to “Plugins” and then go to Emailify that’s just going to open up the Figma plugin that we just installed a moment ago. You’ll notice that I’ve already got an email that I’ve designed using the Emailify Figma plugin, so if you haven’t already done that, we have another Figma tutorial on our YouTube channel that goes through that in detail; it might be worth checking that out first. For this Figma tutorial I’m going to assume that you’ve already designed an email using the Figma plugin and we just want to export it into our Email on Acid account to do some testing.

To do that, we just click on the “Export” button in the Figma plugin, and by default it’s going to come up with the “HTML” option, which is going to download the HTML to our computer, but for today we want to actually change that. I’m going to click on that select box, scroll down to the bottom where it says “Upload For Testing”, and just click on the “Email on Acid” option, and you can see here that it’s just changed so these two input boxes to come up.

That’s asking for our API key and our password. The “password” is actually the password that you use to log in to your Email on Acid account, and I’ve already got that copied, so I’m gonna paste that in there, but that’s the password you basically log into your Email on Acid account in the browser with. Then for the API key, if you click on this link here it will take you to your account page, which is this one, as long as you’re logged in and if you’re logged in and you click on that link you’ll see a label called API key; next to that label we’ve got our API key. I’m going to highlight that, I’m going to copy it to my clipboard by doing Command + C (or that’s Control + C if you’re on windows).

Once you’ve copied that API key from Email on Acid, just jump back into the Figma plugin and paste that key into the API key field. I’ve just pasted that in there and I’ve done that using Command + V (or you can use Control + V if you’re on windows), but that’s all good to go now. I’ve got my Email on Acid API key and my Email on Acid password; that’s all set up. I’ve got one email that I’m going to send, I’m happy with it, so all I need to do now is just click on the “Send To Email on Acid” button; I’ve clicked that, now it’s exporting and generating all the HTML for my email, it’s exporting all the images, and it’s going to upload them; then once that’s all done, it’s going to send it into our Email on Acid account.

It’s just finished, it’s telling us that our Email on Acid tests have been uploaded and we can view the tests by clicking on this link, as long as we’re logged into our account. If we jump back to that link, that’s going to take us to our “Projects” page. I’m just going to refresh that, and we can see now that it’s just popped up with our test. We can see that we’ve got our “Welcome to Jiro Sushi” email which we just sent from our Figma design, and I can click on that and get a bit of a sense of what it looks like in all different devices and email clients.

We’ve got our mobile devices here; we’ve got iPad Pro, iPhone, iPhone SE, iPhone 11; all these different devices, we’ve got our Gmail on mobile, and then we’ve got a whole bunch of desktop clients as well. We can just see a bunch of different Outlook clients which are usually notoriously strange, you can see there’s the the border radius doesn’t show up on Outlook; that’s one little thing we’ve seen, unfortunately that’s just the way it is; that’s fine. Then a bunch of web clients as well; we’ve got a bunch of web clients like Gmail, and you can see that on Chrome, on Edge, on Firefox etc. If you’re already using Email on Acid you probably already know all this, but for anyone who’s new to testing emails, this is what it looks like.

The cool part is we didn’t have to go through any extra steps in the web interface to get this test in there, this was sent directly from our Figma designs with one click straight into our Email on Acid account. As long as you’ve got your API key in there and as long as you’ve got your password in there, you can just keep sending tests over and over into Email on Acid from Figma; that’s just going to cut down the time to get your tests into Email on Acid rather than having to do it manually each time. It should be a fairly big boost to your workflow, it should help speed that up a little bit more and take a lot of that manual work out each time.

Then the neat thing is you can then re-export the email if you’re happy with your tests; it’s just as easy as changing the export platform from Email on Acid to your ideal email platform; if you’re uploading it to Klaviyo or MailChimp Postmark or HubSpot etc, you can just instantly change that, and then just straightaway upload it into MailChimp, or download it to your computer, or do whatever you want with it. It’s super easy just to switch between testing and rendering out the the version that you actually want to send.That should be that should be much easier, and take a lot of the manual effort out.

Okay, that’s the whole Figma tutorial; it’s not too complicated once you’ve got your keys sorted out. That’s that’s pretty much it, so thank you as always for watching, and I hope it’s helpful if you’re an Email on Acid user and you’ve been wanting to have an integration with Figma set up through the Emailify plugin. I’m been happy to let you know that that’s all shipped and available today, so I hope you enjoy using it, and as always, we’ll be back soon with more Figma tutorials just like this one very soon.