How to export HTML emails from Figma to ActiveCampaign using Emailify

Video Transcript

Today I’m going to be showing you how to upload your HTML emails out of Figma into your ActiveCampaign account.

The first thing we need to do to get started is jump into Figma and go to the Figma Community, search for the word “Emailify”, and under the “Plugins” tab you’ll see “Emailify” pop-up. All you need to do is click on this “Install” button on the right-hand side, and you’ll be ready to go. Now we can jump back into our Figma file, right click anywhere, go down to “Plugins” and then click on the Emailify Figma plugin, and that’s just going to run the Figma plugin that we just installed in this tutorial.

I’ve already created an email design 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 goes through this in detail, but for today’s Figma tutorial I’m just going to assume you’ve already got your email designed using the Emailify Figma plugin, and we’re just going to be exporting that out into our ActiveCampaign account.

To get started doing that, we just click on the “Export” button in the Figma plugin header. and by default it’s going to download a package of HTML files to your computer, but for today we want to upload this to ActiveCampaign, which is an email service provider. Instead of doing HTML, I’m going to click on the drop down, scroll down to the “Upload To Platform” group, and today I’m going to click on the “ActiveCampaign” option. I’ve just clicked on “ActiveCampaign” and you can see down here it’s just changed to show these two input fields. There’s a little link over here that takes you to the page on how to get your ActiveCampaign URL and API key, but I’ll show you how to do that in this video now as well.

All I’ve done is I’ve gone to my browser and logged into my ActiveCampaign account; you can log into your account and once you are logged in all you need to do is click on the “Settings” button down here, and then after you’ve clicked settings, you want to scroll down to this “Developer” menu item on the left hand side here and click on that. When that page loads you’ll see this “Developer” page with a box called “API Access”. These are the two fields that we need to copy; I’m going to grab my URL, so I’m going to highlight that ActiveCampaign URL which has my account name, and I’m copying that going back to my Figma plugin and pasting that on the left hand side here in the URL input.

Jump back into ActiveCampaign, and I’m also going to grab my API key. I’m going to highlight that entire API key, copy that, jump back into Figma, and I’m going to paste that one into the right hand side, which is the API key input. I’m going to paste that, and now we’re good to go. We’ve got our ActiveCampaign URL and we’ve got our ActiveCampaign API key, and these are going to be unique to your account, so just make sure you grab them from your “Developer” page under the “Settings” menu item.

Okay, we’ve got those two things in there now, and all we need to do is make sure we’re happy with our email. I’ve just got the one email for today I’m happy with my subject line and the design, so I’m ready to go; all I need to do is click on this “Upload to ActiveCampaign” button. I’m going to click that now; this is now exporting the HTML, it’s generating all the HTML automatically, it’s exporting all of the images from the email, it’s going to upload all of those, and then when it’s done it’s going to send that email up to our ActiveCampaign account.

It’s done now, it’s telling us that our ActiveCampaign templates have been uploaded and we can look at them by logging into our ActiveCampaign account, clicking on “Campaigns” and then clicking on “Manage Templates”. Let’s do that now; I’m just going to swap back into my ActiveCampaign account, on the left hand side here I’m going to go all the way down to “Campaigns”, this little menu icon with the envelope on it. I’ve clicked on “Campaigns” and now I’m going to go to the left hand side and click on “Manage Templates”, and I’m just waiting for the page to refresh again; there we go.

I’m under “Campaigns” now; and now I just want to click on the “Manage Templates” menu item on the left hand side here. I’m going to click on that, and once that loads we should see our email. There we go, this is the email that we just uploaded a moment ago from Figma. I can actually go ahead and click on that, I just click on this little “Edit” button, and that should take me to my email that’s just been uploaded.

We should have a look at it in the preview; it’s just loading up, and there we go, we can see on the left hand side, here is all of our HTML. This is what was generated and then uploaded via the Emailify Figma plugin; we sent it directly from Figma over to ActiveCampaign and this is all the code on the left here. Then on the right hand side, we’ve also got our preview; this is all the rendered HTML from the left hand side getting rendered. It’s looking great, it’s looking as we’d expect, and all of our images are there, all of our links, all of our rich text and everything’s looking really good. You can make changes to that if you wanted to on the left hand side here, but for today I’m just going to leave it because it’s looking exactly how I wanted it from my original Figma design over here.

That’s basically it; you can you can either save that if you’ve made changes or just jump back to the the the “Campaign” panel. I’m just going to click on “Previous” there, and that’s just one template; if you have more in your design or in your Figma file, you can select multiple designs and upload them, and that will actually upload multiple custom templates as well. It gives them a little time stamp, just so you can see which which email template was uploaded when. If you want to create multiple versions, or if you want to update them, this will just let you know which one was uploaded at what time and what date.

You can get rid of those by clicking on the little “Settings” icon here and clicking on the “Delete” button if you want to remove one. You can just delete that template if you want to, and there we go; but as I said, you can basically keep exporting these emails as many times as you want with the Figma plugin, and it’ll just upload them one after the other, as you’d expect.

That’s it for today; that’s the entire Figma tutorial of how to get your HTML emails out of Figma to ActiveCampaign directly, if you’re using ActiveCampaign as your email service provider. This should just make it a lot easier to streamline that template creation process rather than having to manually copy and paste things, upload images, swap out image URLs, and import the template manually; you can do it all with one click directly from Figma to ActiveCampaign. Thank you as always for watching. and we’ll be back very soon with more Figma tutorials just like this one.