How to export HTML emails from Figma to SendPulse using Emailify

Video Transcript

Today, I’m going to be showing you how to automatically upload your HTML email designs from Figma into the SendPulse platform using the Emailify Figma plugin.

To get started, all we need to do is go to your Figma file. If you click on the little “Resources” icon and search for “Emailify” under the “Plugins” tab, if you just click on the Emailify item, you’ll be able to run the Figma plugin by either clicking on this run button here. Or, I’d recommend clicking on this little more options icon here and clicking save. That’s just going to save it to your Figma plugins list for easy access later. So, I’ve already done that.

Now, I’m going to go to my canvas, right-click anywhere, go down to “Plugins,” then go down to “Saved plugins,” and click on “Emailify.” 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 helps you design emails in Figma that you can then export to HTML automatically without having to do any coding or anything like that.

I’m just going to create a really quick email container. I’m just going to add that to my page, and I’m just going to add a couple of components just to really quickly spin up a new email. I’m not going to be going through all of the design features and all of the ways you can customize the emails in this Figma tutorial. If you want to get a bit more of a deep dive into that, you can follow along with some other Figma tutorials on the YouTube channel. But for today, I’m just going to keep it really simple and assume you’ve already got your template designed for uploading into SendPulse.

The last thing I’m going to do with this really quick template is just go to the “Footage” tab, and I’m just going to find the SendPulse item. So, there’s a “SendPulse” item down here. If you click on that, that will basically add a predefined footer that you can obviously customize, but it comes with the unsubscribe link already pre-filled. So, if we go to the link here, you can see that it’s got the unsubscribe tag. This is going to automatically populate that unsubscribe link in your email, which you’re going to want to have in there just to make it a valid email that can be sent out with the unsubscribe link.

Now that we’ve got our email designed, we can quickly preview that using the preview button here. That’s just going to give us a real HTML preview of what that’s going to look like. As I said, you can customize this further for mobile and desktop, but I won’t be covering that in this Figma tutorial.

Now that we’ve got our email the way that we want in HTML, we can now upload this automatically into SendPulse by clicking on the “Export HTML” button here and then changing the option here from HTML email and scrolling down to the platform Integrations grouping and finding the SendPulse option. So, I can see I’ve got SendPulse here. When you click on that, it changes some of the options down here. It’s basically asking for the API ID and secret from SendPulse.

If you just go ahead and click on that link there, if you’re already logged into your account, which I am, it’s going to open up this page here, which is the account settings page, and you’ll automatically be directed to this API tab. So, what you want to do is you want to click on the little copy icon here for the ID first. We’ll grab the ID from SendPulse and paste it into the ID field here in Emailify. Then, we’re going to do the same thing for the secret. I’m going to grab the secret, just click on the copy button, and jump back into Emailify and paste that in there as well. Once you’ve got those two pasted in there, you’ll see that the button becomes available to upload to SendPulse.

It’s also worth adding a subject line. So, you might want to add a new subject here. I’ll just do a new feature announcement as my subject. I’m just going to basically click on the “Upload to SendPulse” button now. If I go ahead and click on that, that’s going to generate all the HTML automatically for me. It’s going to upload the images, and then it’s going to upload that template automatically into my SendPulse templates.

Once it finishes, you can see that it’s saying that our SendPulse templates have been uploaded, and we can view them by going to this email templates page in our SendPulse account, provided that we’re logged in under the personal tab. I’ve already got that link open here, so I’m just going to refresh that page, and hopefully, we’ll see our template show up. So, there we go. We can see the template that we just uploaded. If we open that up a bit, you can see here the “Welcome to Jiro Hero” there, as we’d expect. That’s just been uploaded a moment ago from Figma directly into SendPulse in our email templates.

Now that you’ve got that HTML template automatically uploaded into your SendPulse account, you can basically use that however you want. So, you can go down here, you can do things like create a campaign from that template. That’s probably the most common thing you’re going to do. If you need to, you can also edit the template, make a copy of it, put it into a different folder. So, if we click on “Edit Template,” this should bring up an editor if you wanted to check out what the HTML actually looks like in here. So, you could do that. If you wanted to edit the content in line, you could obviously do that as well. You could change this to be “Welcome to our restaurant” instead or you could change any of this content here or any of these links and things like that. You can see here we’ve got our link unsubscribe URLs in there, as we’d expect. That’s basically what all of that looks like there.

That’s if you did want to make any changes in the template here. I’d recommend doing it in Figma ideally and then re-uploading the template if you need to make content or graphic changes, just so it’s a bit more reliable in case the SendPulse editor does something weird with the HTML. But that option is there if you wanted to edit the template after it’s sent to SendPulse.

That’s basically it; I just want to keep this really simple. If you are using the SendPulse email marketing platform and wanted to automatically get your HTML emails out of Figma that you’ve designed with Emailify up into your templates list and SendPulse, this is going to be a really quick way of going about it, just using the SendPulse API and the Emailify-SendPulse integration.

Yeah, I think we’ll leave it there for today and keep it a really short one. Hopefully, that helps you or your team. If you’re SendPulse users, feel free to give this new Emailify upload option a try. And as always, thank you for watching, and we’ll be back with more Figma tutorials like this one very soon.