How to export HTML emails from Figma to SARE using Emailify

Video Transcript

Today I’m going to be showing you a quick tutorial on how to export your HTML emails from Figma to the SARE email marketing platform using the Emailify Figma plugin.

To get started, all we’re going to do is go to our Figma file. If you click on the little actions icon down here at the bottom toolbar, just go ahead and click on that. If you search for Emailify, and then click on the Plugins tab, you’ll be able to load up the Emailify Figma plugin here.

To run the Figma plugin, all you need to do is either click on the little Run button down here, or you can click on the Save icon here, which I’ve already gone ahead and done. If you click on that Save icon, you can run the Figma plugin by going back to your Figma canvas, just right-clicking anywhere, going down to Plugins, then going down to Saved plugins, and clicking on the Emailify item. And 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 helps you to design HTML emails in Figma, which you can then export to production-ready code in one click. I’m not going to go through all of the design features in this tutorial today. If you’re interested in those, we do have a few more tutorials on the channel and in the documentation that will help you do that.

Today I’m just using one that’s already been designed, which I’ve taken from the templates. If you go to the new email section and browse the Emailify Figma templates, you’ll find a bunch of free templates here that you can clone into your own Figma account for free. I’ve just grabbed one of the PlayStation templates.

We can preview that by just going to the Preview button in the Figma plugin. That’s going to run the HTML preview and allow us to preview the real HTML inside of the Figma plugin before we actually upload it. I’m pretty happy with this. As I said, it’s already been designed and everything’s looking really good.

What I want to do now is export it and upload it to the SARE email platform. I’m going to do that by going to the Export HTML button in the Figma plugin. I’m just going to click on that now.

We’re going to change the default HTML option from HTML email here. We’re just going to go to the platform integration section down here and scroll all the way down to the letter S, and you’ll see the SARE option come up when you click on that. We’ve just got that selected now.

You can add things like subject line and preview text. At the moment, I’m just going to leave those blank just to keep things simple, but feel free to populate those as you need. Then I’m just going to click on the Export for SARE button here.

That’s going to automatically download all of the images and generate the HTML code for the email, and then we’re going to be able to download that to our computer. You can see that the email code for SARE is ready to download.

I’m just going to go ahead and click on the Download your zip file button here, and I’m going to save that to my desktop. If you just go ahead and click on Save and then unzip that file, basically just double-click on the zip file on your computer, you’ll end up with this folder here.

You can see I’ve got a previews page, which we can load up in the browser. For example, if I wanted to open that up, I can just drag and drop that into the browser. You can see I’ve got this nice preview page, which is going to show how it looks on mobile and desktop. That’s all looking really good.

To get it into the SARE platform, you’ll notice at the bottom here it’s basically telling us to please upload the zip file inside of the zips folder, which also has “for upload to SARE” in brackets. If we open up the unzipped folder that we just downloaded from the Figma plugin, you can see that folder here. It just says _zips for upload to SARE. If we open up that folder, you can see that the Emailify template zip file is in there, just named from the Figma frame in our file.

All we need to do now is log into the SARE platform. You just want to log into your own SARE account, then you just need to go down to Mailing. Open up the Mailing option here, then click on New.

We can now go over to the Import mailing template option, which allows us to import our own HTML code. I’m just going to click on that one. I’m going to give this a template name of Emailify template.

Now what we can do is upload the zip file that we just had a look at in our folder. I’m going to browse for that file. I’m going to go to my folder, go into that zips folder where it says for upload to SARE, find my email template zip, then I’m just going to click on the Open button. That’s basically going to select that zip file.

Once you’ve selected the zip file, just go ahead and click on Import. This is going to upload the HTML email template into the SARE platform, and in a moment we’ll be able to view that in the platform.

You can see here that now under the My templates section, under Mailing, My templates, it’s just added a brand new template called Emailify template. We can now check that out by clicking on this preview icon over here. That should load up the template as expected.

You can see we’ve got our HTML content in there as you’d expect, and all of the images are loading up. We can also check that out on mobile as well. You can see that it’s very nice and responsive and everything’s looking really good.

That’s basically it. I just wanted to show you a quick tutorial on how you can get your custom HTML email templates that you’ve exported from the Emailify Figma plugin into the SARE email marketing platform. You can now go ahead and use that custom HTML email template however you like, and that’s going to be looking really good.

The only small thing to note is that the SARE platform only allows email templates that are under 10 megabytes in total. In this case, we’ve got a really compact one. It’s just under 500 kilobytes. If you’re using heavy images or using a lot of things like GIFs, animated GIFs that are quite heavy, it may block you from uploading the email. Just make sure that the total size of all the images is under 10 megabytes, and then you should be good to go.

I hope that’s been helpful. If you are using the SARE email marketing platform to send out your email marketing newsletters, this is going to be a really easy way of getting your custom HTML emails designed in Figma and then exported to production-ready code to send out with one click.

Thank you for watching the tutorial, and we’ll be back with more Figma tutorials like this one very soon.