How to export HTML emails from Figma to Constant Contact using Emailify

Video Transcript

Today, I’m going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Constant Contact email marketing platform, and we’re going to be doing that using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the “Resources” icon at the top, and then if you search for Emailify and under the plugins tab, if you click on the Emailify item, you can run the Figma plugin by clicking on this run button here. Or I’d recommend clicking on the little “Save” icon here, and that will let us run the Figma plugin from our saved Figma plugins list. So I’ve already clicked the save icon, so I’m going to go to my canvas, just right-click anywhere, go down to “Plugins,” and then go down to “Saved plugins,” and click on the Emailify item, and that’s just going to run the Figma plugin that we saved a second ago.

If you’re new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma, which you can then export automatically to production-ready responsive code automatically. Today, I’m just going to be creating a really simple template example. So, I’m just going to call this one a template example and create a new Emailify frame. And then I’m just going to start adding a few components from the Figma plugin. So, I’m not going to be going through all of the design features in detail today. If you want to check those out, feel free to check out some of the other YouTube Figma tutorials on the channel or check out the Emailify documentation site, which has a lot of information about how you can create and customize the HTML email designs in Figma for your own brand and styles.

Today, I’m just going to be creating a few components with no customizations or anything like that, just to show an example of how to export the HTML to Constant Contact. So once you’re happy with your design, the last thing we need to do is click on the footer tab in the Figma plugin. And then you just want to scroll down to the Constant Contact footer option down here and click on that. So if you click on the Constant Contact footer, that’s going to add this little footer component, which is prepopulated with an unsubscribed tag. So if you go down to your link layer, you can click on the settings button in the Figma plugin to check that out. And you can see here it’s pre-populated with the correct Constant Contact unsubscribe tag. So this is automatically going to get swapped out to the correct link for your audience members when you send out your email via the Constant Contact platform.

Now that we’ve got that all set up, we can quickly preview the HTML by clicking on the preview button in the Figma plugin. And that’s just going to load a real-time real HTML preview that we can inspect. And we can check that out on mobile as well to see how it looks. And you can also go through and apply mobile-specific overrides to any of these layers as well. So if you click on one of your Emailify layers and then click on the settings button, that will let you do things like override font sizes or padding or show and hide things on mobile, add links, all that sort of good stuff. So I’m going to leave this all as default today. I’m not going to customize it any further. I’m basically happy with this. So I’m going to close off my preview. And then we’re going to click on the export HTML button in the Figma plugin up here. And I’m going to change this from the default export Port HTML option and scroll down to platforms, and I’m going to select the Constant Contact item instead.

If you click on Constant Contact, then we can do things like populate our subject line. So you can add a subject here and a preheader text. So preheader text will get added automatically after your subject line when someone’s opening up your email in their email client. And it’s also worth being mindful that you will have to copy this subject line manually into your Constant Contact campaign later as well. But adding it here will just ensure it also gets included in your title tag. So now that we’re happy with our subject line and preheader, just go ahead and click on the export for Constant Contact button. And that will automatically generate all of the HTML and upload the images for you and package that up in a zip file. Go ahead and click on the download your zip file button in the Figma plugin and save that to your desktop. And then you can just double-click on that zip file, and that will open up this folder here, which contains your index.html file.

You can get to that by just expanding your template example folder or whatever you’ve called your Figma frame. So whatever you’ve named the frame, that’s what the folder will be called in here. So just go ahead and open that up. You’ll find the index.html file, which is the final HTML that we want. And you can load that up just by opening up a new browser tab and then dragging and dropping that index.html file into the browser. And you can see it all in here. So then you can just right-click anywhere, go down to view page source, and just copy all of that content to your clipboard. So all of the HTML content in the view Source tab, copy that to your clipboard.

And then what we can do is go to Constant Contact and go to the marketing Tab and click on the email item here. And that’s going to load up the email campaigns page. Then what you want to do is click on the create an email button up here. And then once that loads up, you want to find the use your own HTML tile down here. So there’s this use your own HTML tile. Go ahead and click on that and click on select. And once that loads up, you’ll see this screen here. So the other way you can get to this screen directly is if you click on the little link down here where it says create a new email template in Constant Contact, this will actually link you directly to this page provided that you’re logged into Constant Contact. But I just wanted to show you how to get to that manually in case you’ve already closed off that window.

Now that we’ve got all this placeholder content here, we want to select all of that and delete it. So I’m going to delete all of that content. And then I’m just going to paste in the HTML that we copied to our clipboard. So I’ve just pasted that in there. You can see that it’s adding the pixel tracking code at the bottom automatically. So that’s still being retained. And you can see here we’ve got our unsubscribe link also being added in at the bottom there. So to see a live preview of that, you can toggle on this live preview switch up here. And that will let you inspect the live HTML that’s being rendered from the code that we just added. So that’s basically looking the same as we just had it in Figma. So I think that’s looking really good.

Then what you can do if you want to send this out is you can just go ahead and click on the save button first just so you save the template. And then you can go ahead and click on the continue button. And if you click continue, that will just take you to the campaign steps where you can apply your audience settings. So determine who you want to send it out to and again add things like your subject line and other details like that just for your Constant Contact send. So that’s basically it for today. I just want to keep this super short to show you how to export your HTML email designs from Figma created with the Emailify Figma plugin and upload those to the Constant Contact platform if you’re using that for your email marketing send. This is going to be a really quick way to go about it and also give you a lot more design flexibility compared to using some of the templated or preset templates in the Constant Contact platform, which are a little bit more limited in terms of having a full brand experience that you’d normally expect from your assets.

I hope that’s been helpful if you’re using the Constant Contact platform and using Figma, hopefully that helps your workflow a little bit. And thank you as always for watching. We’ll be back soon with more Figma tutorials like this one.