How to export HTML emails from Figma to Resend using Emailify

Video Transcript

Today I’m going to be showing you a quick tutorial on how you can automatically upload your HTML templates into the Resend platform. That’s the resend.com email sending platform. We’re going to do that using the Emailify Figma plugin. To get started, all we need to do is go to our Figma file. If you click on the little actions icon down here at the bottom and then search for Emailify,. Under the Figma plugins tab, if you click on the email item, you can run that Figma plugin by either clicking on this run button down here or I’d recommend clicking on the save icon next to that, and that’ll let you run the Figma plugin from your Figma plugins list.

I’ve already clicked on the save icon, so I’m just going to go to my canvas and right-click anywhere. Then go down to plugins, go down to saved plugins, and then click on the email 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 basically allows you to design production-ready HTML emails in Figma and then automatically export those out to production-ready responsive HTML from the Figma plugin. I’ve already got this one designed, which was just taken from the email templates. There are a bunch of different free Figma email templates that you can use as a starting point, or of course, you can design your own and completely customize it to your brand. I’m not going to be covering that in this tutorial. There are some other tutorials and docs if you want to learn more about how to design the emails.

But today, I’m just going to be assuming you’ve already got your email designed and you’re happy with the HTML. You can open up the preview in the Figma plugin and get a full HTML preview and just make sure it’s ready to go and you’re all happy with it. You’ll notice there are a few different issues down here which are just purely related to some of the links not having any links yet, such as social icons and stuff like that, which you can easily do through the Figma plugin. You can add those in the settings panel, for example. But for today, this is just a pretty blank template with no real calls to action links or anything like that.

Once you’re happy with your email, you can export it by going to the export HTML button in the top header of the Figma plugin. By default, that’s just going to download the HTML email to your computer. In this case, we’re logged into resend.com. I’ve opened up my resend.com page in the browser over here. What we need to do is just change this option in the Figma plugin. Scroll down to the platform integration section and go down to the letter R, and you will find the resend option down here. All you need to do is grab your resend API key. You can do that by going to your API keys page in the platform and just clicking on create API key, then give it a name. In this case, you might just call it email, and you can choose the permission that you’ve got here. I’m just going to give it full access because I want to add some templates. I’m also just going to leave this as all domains and then click on the add button.

You can see here that it’s generated the API key, and it’s only going to show you this once. You probably want to save this into some sort of password manager as well. In this case, I’m just going to copy that to my clipboard by clicking on the copy icon here. Then I’m just going to go back to my email Figma plugin and paste that directly in the API key field here. You’ve got the option of whether you want to publish this template in your resend account or if you turn it off, which is the default option. That’s just going to publish the template as a draft, which you can make changes to. In this case, I am going to say I want to publish the template, so I’m going to enable publish template. If you do also want to add a subject line and preheader text, you can add that in here. In this case, I’m just going to leave that blank as far as the preheader text goes. For the subject line, I’m just going to call this Miro survey and add that in.

Then I’m going to click on the upload to resend button. That’s going to export the template, upload the images, and also upload the template itself to resend. You can see here that it said your resend template has been uploaded. You can also download that zip to your computer if you wanted to as well. Now, if we go back to resend and go to our templates page, I’m going to jump back there and then hit refresh. You can see that we’ve got our email that’s now just been uploaded. If I click on that result in the resend platform, that’ll let me open up the template in their editor. You can see we’ve got our HTML email uploaded directly into resend. That’s really good. That means we can basically jump in here and see all the HTML that’s been uploaded. Of course, you can edit that if you wanted to as well.

This is in resend. They’ve got an editor system, and you can also see that our subject line has been carried over as well. The subject line that we added in our export options down here, which was just Miro survey, has been carried over to the subject line field in the template itself as well. That’s pre-populated. It pre-populated all of the template. It means that we can automatically insert that into our resend account templates with one click directly from Figma using the API integration. That’s working really well. That’s basically it. If you want to, you can now use this template for your broadcasts and other emails in resend. That’s how you go about doing it. As I mentioned, this is just one example with a really simple template. There are many other templates you can use for either inspiration or just some layout structure to see how the templates are set up.

Feel free to check out the Emailify documentation and also some of the other tutorials on the YouTube channel if you want to know how to get more in-depth with the designs. If you’re already using Emailify and you want to upload your emails directly into resend.com, using the API method is a really easy way of doing that. Hopefully, that will help you and your team get your emails out of Figma and directly into resend. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.