How to export HTML emails from Figma to SendGrid using Emailify

Video Transcript

Today I’m going to be showing you how to export your email designs from Figma out to HTML templates that will automatically be uploaded into your SendGrid account.

The first thing we need to do to get started is just go to the Figma Community and search for “Emailify”, and under the “Plugins” tab you’ll see Emailify pop up. 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.

Once you’ve installed the Figma plugin, just go back to your Figma file and right click anywhere, go down to “Plugins”, click on “Emailify” and that’s just going to run the Figma plugin that we just installed a moment ago. You’ll notice that I’ve already got a design in my Figma file and that’s because I’ve pre-designed it using some of the components from the Emailify Figma plugin categories; if you haven’t already done that and you’re new to the Figma plugin, we have another tutorial on the YouTube channel that goes into detail about how to actually design the emails and customize them, but in this Figma tutorial I’m just going to be focusing on how to actually upload it from Figma into our SendGrid account.

I’m going to do that now and I’m first just going to add a footer that’s specific to SendGrid; if you go to the “Footer” category and click on this “SendGrid” option, that’s just going to add in a SendGrid footer with a pre-filled unsubscribe link. You don’t have to worry about finding the correct link for that unsubscribe link because it’s already been pre-populated and that’ll be exported with our HTML template. Now we’ve got that in there we can start exporting it by clicking the “Export HTML” button and then down here under the select box, we’re going to change it from “HTML” and we’re going to change that to “SendGrid” under the “Upload to Platform” category; we’re going to click on “SendGrid” and now it’s going to ask for our SendGrid API key.

You can get this API key by logging into your SendGrid account, going down to the “Settings” sidebar, expanding that, and then clicking on the “API Keys” page, and you’ll land on this page here. All you need to do is click on the “Create API Key” button, and you want to give this a name; you can name it “Emailify”, and make sure you click on the “Full Access” radio button, and then just click “Create and View” down here, this button; I’ve just clicked that, and it’s generated a new API key that we can use/ All you need to do is click on the API key that it generated, which will copy it to your clipboard, and then go back to Figma. In the Figma plugin you just want to paste that API key into the input field here, and now that we’ve pasted that in, the “Upload to SendGrid” button is now enabled, and we’ve got our email selected, so we’re ready to go.

We can click on the “Upload to SendGrid” button and this is going to export the design to HTML and automatically upload it to our SendGrid design templates, because we put that API key in there. Now it’s just finished, it’s told us that our SendGrid template has been uploaded and we can view it by navigating to the design library page in our SendGrid account. You can also optionally download the zip file of the template that was uploaded if you just want a local reference for it as well, but that should be uploaded into our SendGrid email templates area now.

If we jump back into SendGrid in our browser and we go on the left hand side here, down to “Design Library”, this is going to open up our email template designs, and we should see the email that we just uploaded from Emailify. Here it is, we can see it here, it’s just been uploaded. We can click on that, we can go to “Edit”, and you can see here the email has been imported, and we can preview that to see what it looks like. This is all HTML, we’ve got our buttons, images, footer and everything in there as we’d expect. Here’s the mobile view, and that’s what it looks like.

It’s been successfully uploaded directly from Figma into our SendGrid account, and now we can go ahead and use this email or tweak it if need be in SendGrid, if you want to add some test data, you can do that and customize it a little bit more; but for now I’m just happy with the email being uploaded as it is. I’m just going to save that, and that’s it; you’ve got your email design uploaded directly from Figma into your SendGrid account without having to go to the trouble of doing any weird image uploading or HTML editing or anything like that, it’s just all taken care of automatically.

That’s it, that’s the whole process; if you do want to export multiple emails you can do that as well. If you’ve got multiple designs, just make sure you select multiple designs when you go to upload it, and it will upload all of those into SendGrid, it just depends on how many you have and which ones you want to upload.

That’ll do it for today; I hope you found this Figma tutorial helpful if you haven’t if you’ve been wondering how to get your email designs outside of Figma and upload it into SendGrid this is going to be the quickest way; thank you as always for watching and we’ll be back soon with more Figma tutorials like this one very soon.