How to export HTML emails from Figma to Amazon Simple Email Service (SES) using Emailify

Video Transcript

Today, I’m going to be showing you a really quick tutorial on how to export your HTML email designs from Figma to the Amazon SES (Simple Email Service) platform. We’re going to be doing that using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the “Resources” icon, and then search for Emailify. Under the “Plugins” tab, if you click on the Emailify item, you can run the Figma plugin by either clicking on this little “Run” button, or I’d recommend clicking on this “Save” icon. That will let you save the Figma plugin to your Figma plugins list. I’ve already clicked on the save icon, so I’m just going to go to my canvas, right-click anywhere, go down to “Plugins”, and then click on the “Emailify” Figma plugin. 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 customize using all of the normal Figma design tools and export to production-ready code automatically. I’m not going to be going through all of the design features today, but if you’re interested in those, I’d highly recommend checking out some of the other tutorials on the YouTube channel.

For today, I’m just going to be using a template from one of the Figma templates in the Figma plugin that you can download. You can clone these Figma files, and that will give you these components automatically pre-designed using Emailify. Again, if you want to deep dive into how to design the emails, I’d recommend checking out some of those other tutorials where you can see how to add these components, customize them in Figma, and then also preview them and add mobile overrides and things like that.

Just to give you an example of what the HTML will look like, we can preview the HTML just by clicking on the preview button in the Figma plugin. This is going to load up a real HTML preview of our design. These are all the Emailify components getting loaded into HTML, and we can see exactly what that’s going to look like on desktop and mobile. You can see the responsive options there. As I mentioned, you’ve got control over the mobile design as well. If you click on any of these layers, then click on the settings button, you can basically go through and customize these elements for mobile. You can do things like change the padding, change font sizes, and offsets for mobile.

Again, I’m not going to be going through all of those today, but I just wanted to give you a little preview of what that looks like in the Figma plugin. Once you’re happy with your HTML email and it’s looking really good in the preview, as I think we are here, you can close off that preview and then we can export this HTML by clicking on the export HTML button in the Figma plugin. I’m going to go ahead and click on that, and once that loads up, you’ll see that by default it’s going to export it to an HTML email zip package, which would just download the files to your computer. However, we’re going to go to this platform integrations group down here, and we’re going to scroll all the way down to the letter “S” to find SES (Simple Email Service). We want the SES (Simple Email Service), which is the simple email service option. In brackets, it says AWS, so we know it’s the right one.

You want to click on that SES (Simple Email Service) option, and you can see that it will reveal these new fields. We’ve got a few things here: we need to get our access key, secret key, and also specify the region for our AWS SES instance. We can find that by going to our Amazon account. If you log into your AWS account, you’ll notice in the top URL bar, you’ll see your region showing up. In this case, mine is us-west-1. You want to find your own region and make sure you add that to the Figma plugin. As you can see, I’ve already got that selected. I’ve got us-west-1 selected, which is the right region for me, but yours might be one of these other regions, so just make sure you select the right region.

Next, you need to create an Amazon access key and secret key. You can do that through the IAM menu. Just go into your AWS account, go to the IAM settings, create a new user with a role that matches having permissions to create SES (Simple Email Service) templates, and then click on create new access key. I’ve already clicked on the create access key button, and I’m going to copy this access key by just clicking on this little copy icon. We’ll drop that in the access key input here, which has the little key icon next to it. The secret access key can be revealed by clicking on show, and then click on the little copy icon again. This time, paste that secret access key into the secret key field here.

Once you’ve done that, you’ll see that the upload to SES button becomes active. Before we upload, let’s change a couple of other things. The first thing to note is that whatever the email name is in your Figma frame, your Emailify Figma frame, that’s going to be used as the name of the template when it gets uploaded into SES (Simple Email Service) from the Figma plugin. For example, you can see here that I uploaded one before called “Emailify Template,” and it put a little timestamp on there to avoid duplicating the name. In this case, it’s going to create one called “Apple Email Template.” That’s just something to note if you’re wondering where that name is being determined from.

The second thing is you want to set a subject line. When the template gets uploaded, it’s automatically going to pass this subject line into the API request when creating the SES (Simple Email Service) template. In this case, I’m just going to use the headline from the email and paste that into my subject line. You can also create preheader text, which is what shows up underneath or next to the subject line when your email gets sent out. I’m just going to paste some text in there as well. I definitely recommend populating the subject line, tweaking the template name, and optionally adding preheader text as well.

Once you’ve done that and double-checked your region and added your access keys, go ahead and click on the upload to SES (Simple Email Service) button. I’m just going to do that now. This is going to automatically generate the HTML code, upload all of the images, and upload our template to SES (Simple Email Service) using the credentials we just added. You can see here it’s just finished uploading those templates. It’s saying our AWS templates have been uploaded, and we can view them by clicking on this link. Make sure you’re logged into your AWS account, and you should be able to just click on this SES (Simple Email Service) templates link, and that should load up the correct templates page based on your region.

Based on the upload we just did, we can now see we’ve got three templates. Before, we had two, and now there’s a brand new one added at the bottom here, which is our “Apple Email Template.” You can see that the email template name has been taken from the Emailify frame in Figma—Apple Email Template—and it’s been added here. You might be wondering why the text is being lowercased and the spaces are being replaced with underscores. SES (Simple Email Service) has a strict naming convention policy where you basically can’t use any other characters except for alphanumeric and underscores or hyphens. If you’ve got any special characters or any non-alphanumeric characters, those are all going to get stripped out. This is to ensure that the upload has no issues when it’s creating the email. Otherwise, if we left it without the hyphens instead of spaces, it would just error out and wouldn’t create the template. That’s the reason why that looks a little bit different from the uppercase version here.

That’s basically it. You can see that it’s now in our templates list. Because Amazon SES (Simple Email Service) is entirely API-driven, what you need to do to use these templates is go to the documentation site. You can see here that in the message, it’s saying this page provides a list of all your existing templates. If you want to view the contents of a specific template, you’ll need to use the get email template operation in the Amazon SES (Simple Email Service) API. You can see here it links out to the docs for that. Depending on what programming language you’re using or what services you’re using to consume these templates, you’ll need to hit this API and send over the request including the template name, which you can see here. That’s why the template name is unique, and you want to pass in that template name into this get templates API request. That will allow you to consume it using whatever APIs or services you’re integrating with SES (Simple Email Service) to send out your emails.

That’s basically it. This is probably more of a technically focused tutorial. If you’re using Amazon SES (Simple Email Service), you’re probably a developer or integrating APIs with your application or something like that. Hopefully, SES (Simple Email Service) is quite familiar to you. I just wanted to show you how to get your HTML template out of Figma using the Emailify Figma plugin into the Amazon SES (Simple Email Service) platform and into your templates list without having to manually fire off an API request to do that.

I’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.