How to export HTML emails from Figma to Postmark using Emailify

Video Transcript

Today I’m going to be showing you how to upload your HTML emails out of Figma into Postmark automatically using the Emailify Figma plugin.

To get started, we can just jump into Figma, and we’ll just need to install the Emailify Figma plugin by going to the Figma Community, searching for the word “Emailify”, and if you click on the “Plugins” tab you’ll see Emailify pop up; and all you need to do is click on the “Install” button on the right hand side here and then you’ll be ready to go.

To run the Figma plugin we just right-click anywhere on our Figma file, go down to “Plugins”, click on “Emailify”, and that will run the Figma plugin we just installed. I’ve already designed an email using the Emailify Figma plugin; if you haven’t already done that you might want to check out one of our other YouTube videos which covers this in detail, and it’ll show you how to design your own emails using the Emailify Figma plugin. For today, I’m just going to be assuming that you’ve already designed your email and you just want to get it out of Figma and into Postmark.

To do that we just go ahead and click on the “Export” button in the header of the Figma plugin, and by default you’ll notice that it’s set to “HTML” as an export option. We basically want to change that option by clicking on the drop down and instead of downloading it to our computer as an HTML package, we actually want to click on one of these “Upload to platform” options, and for today’s Figma tutorial we’re just going to be uploading into Postmark. If you go ahead and click on the “Postmark” option and you’ll notice that reveals a new input field down here, and that’s basically asking for your Postmark API key.

If you click on that link, that will show you how to get to that page, but I’ve already logged in to Postmark. In the browser, after you log into Postmark and just click on your “Servers” tab, and you’ve probably got a few servers or maybe just one; I’ll just click on mine which is just one. I’ll click on my server and then that’s going to bring me to my Postmark server page, the individual server, and all you need to do is click on the “API Tokens” tab up here; click on that, and you should already have an API token in there. You can just click on that token and that will copy it to your clipboard. You can also generate a new one if you need to, but today I’m just going to be using the one that’s already there and copying that.

I’ve definitely copied that, and now I’m jumping back into my Figma file, going back to the Emailify Figma plugin clicking on this input field, and just pasting that in there using Command + V (but you can use Control + V if you’re on windows). I’ve just pasted in my Postmark API key into the API key field in the Figma plugin and that’s ready to go now. That’s all you need to do to authenticate it.

Now I’ve got my emails ready to go, I’m happy with my subject line and all that sort of stuff, so I’m just going to be uploading one and now that I’ve got my API key in there, all I need to do is click on this “Upload to Postmark” button. I’ll go ahead and click on that now, and this is going to generate all of the HTML for me automatically, it’s going to export the image assets and upload them, and then it’s going to automatically send that HTML directly to my Postmark account.

It’s just finished, it’s telling us that our Postmark template has been uploaded and we can view that by logging into our Postmark account, clicking on “Server” then clicking on the “Templates” tab. I’m already logged in, soI’m just going to jump back into my browser, go back to my Postmark account, it told us we have to click on our “Server” tab, click on the server that we got the API key from, and then it said to click on the “Templates” tab; I’m going to go ahead and do that, and there we go. You can see that’s our template; that’s just been uploaded from the Figma plugin, it’s just been uploaded into our Postmark templates list.

If I go ahead and click on that template, you can see here that it’s got our subject line that we included, it’s got all of our HTML; this is all been inlined you don’t need to worry about running it through any extra CSS processor or inliner or anything like that, all the code is there, ready to go. Then we can click on the “Preview” tab to get an actual HTML preview up, and we can see here it’s exported everything the way that we designed it in Figma; this is all real HTML text and the images which have been uploaded and all of that sort of stuff.

That’s basically it; that’s how you can really easily upload your HTML email templates from Figma into Postmark using the Emailify plugin, and if you have multiple emails in your design, it’ll upload any of the emails that you check; you can you can upload a few at a time if you’ve got some different email designs that you want to get into Postmark, they’ll just show up in your templates list.

The other thing worth noting is that if I do upload the email again, it’s just going to create a new version of it. You’ll see a new version pop-up and it’ll probably have a “dash 1” at the end of this little url name down here; and the reason for that is it doesn’t actually override the template each time because you can actually make changes if you wanted to make some manual edits in the HTML here and save that. We don’t want to override that by accident by re-uploading the the template, so basically it will create a new version. If you’ve got multiple versions in there, you can remove them just by clicking on the “Delete” button if you don’t want to keep them all in there, or you can just leave them, but you can go ahead and delete those as well if you just want to tidy it up.

That’s basically it; it’s very simple, much easier than manually going through that process of uploading your HTML emails from Figma to Postmark after they’ve been exported. If you’re a Postmark user, definitely check out this Figma integration, it should hopefully save you a bunch of time if you’re in the habit of uploading emails regularly; I hope you get some benefit from it with you or your team using Figma and Postmark. Thank you as always for watching, and we’ll be back soon with more Figma tutorials just like this one very soon.