How to export HTML emails from Figma to HubSpot using Emailify

Video Transcript

Today I’m going to be showing you how to export your HTML emails directly from Figma into your HubSpot account and we’re going to be doing this by installing a Figma plugin called Emailify.

If you haven’t already done so, you can go to the Figma Community, search for the word “Emailify”; and under the “Plugins” tab you’ll see “Emailify” pop-up. You just need to click on the “Install” button on the right-hand side, and then we can jump back into our Figma file.

To run the Figma plugin you just right-click anywhere, go down to “Plugins” and then click on “Emailify”, and that’ll run the Figma plugin that we just installed. I’ve already got a design that I came up with using the Emailify Figma plugin, so if you haven’t already done that we have another Figma tutorial on our YouTube channel that will show you how to design the email using the Emailify Figma plugin, but for this Figma tutorial I’m just going to assume that you’ve already designed your email and just want to go ahead and export it from Figma to HubSpot.

I’m going to do that now by starting to click on the “Export” button; I’m just going to click on the “Export” button in the Figma plugin header, and by default it’s going to try to export the emails as an HTML package that are going to get downloaded to your computer; that’s normally fine, but today we want to get them into HubSpot automatically. What we have to do is click on this select box, and instead of downloading to our computer, we want to upload it to a platform; and for today’s Figma tutorial we’re going to use HubSpot. I’m just going to click on the “HubSpot Marketing Hub” option, and you can see here it’s just changed this little drop down here to say that it needs the HubSpot API key.

If you click on that link it’ll show you how to get that key, but I’m already logged into HubSpot, so I’ll show you how to get to it from HubSpot in the browser. If you login to HubSpot and go to your settings page just by clicking the little “Settings” icon up here, and you want to go down to “Integrations”; this little drop down you want to expand “Integrations”, and click on “API Key” and that will load up the HubSpot API key page. I’ve already got a API key active, so if you can see that in yours you just want to click on the “Show” link here, and then prove that you’re not a robot, which I’m not, not as far as I know.

That will show the API key for HubSpot, and now that that’s revealed, you just want to go ahead and click on the “Copy” link which will copy it to our clipboard. Okay, that’s just copied our HubSpot API key to the clipboard; now we can jump back into Figma and in the API key input we’re just going to paste that by pushing Command + V on the keyboard (or Control + V if you’re using windows). I’ve just pasted in my HubSpot API key down there.

The other important thing to know is that for the footer we basically need to include a HubSpot footer for this to be considered a valid email. If you haven’t already done so, I’ll just close this off for one second, and under the “Footer” category for the components, you’ll see that we’ve got a HubSpot specific footer template. If you don’t already have one of those, and you want to make sure that you’ve got all the right links and all the right tags in there that HubSpot wants, just go ahead and select your email, go to the “Footer” tab and then click on the HubSpot platform specific footer. That’s just going to add that in there; if we just really quickly open that up we can see here if we open up the Figma plugin settings, it’s automatically added the HubSpot unsubscribe and web links, and it’s got our company tags which HubSpot also wants when you create emails in HubSpot. That’s just a really quick but important note just to make sure you do have those tags in there, otherwise HubSpot may not show your template when you go to upload it.

Okay, now that we’ve got our HubSpot footer in there we just want to go back to the export panel by clicking on export again and it’s kept my API key in there that we just pasted in we’ve got HubSpot marketing hub selected; everything’s perfect ready to go, so all we need to do now is click on the “Upload to HubSpot” button. I’m going to click that now, this is going to generate all of the HTML for my email automatically, it’s going to export all of the image content, it’s going to upload those, and then once that’s done it’s going to send that template automatically into HubSpot.

It’s confirming that our HubSpot template’s been uploaded and to view it we just need to log into our HubSpot account and then it’s telling us to click on the “Marketing” menu item and we’ll do that now; we’ll click on “Marketing”, go down to “Email”, and then it’s saying to go to the “Create email” button and then click on the “Regular” email type; I’m just going to do that now, and then if we click on the “Custom” tab up here you’ll see that our email that we just uploaded is now in HubSpot. We can preview that by clicking on the “Preview” button, and this is just loading up a HTML preview of the email that we just uploaded; all the image contents in there, all of the images that we added and that’s looking good, we can see our view view in the browser links in there, we’ve got everything that we wanted set up.

That’s in there now, and that’s pretty much good to go. You can now use that as a email, so if I want to call this “Sushi Email” for the “Jiro Sushi Restaurant” that we’ve made up, and now there we go, you can see that we’ve got our brand new email campaign with the custom template that we just uploaded from Figma into HubSpot, and that’s looking really good. You can send yourself a test email, you can schedule that send, assign it to a list, and things like that, but basically that’s gonna take the template that we just uploaded from Figma and send that out when you’re ready to save it. I’m just going to save that; I’m not going to send it out for now, I just wanted to show you how to upload it.

Just as a further step to see where that’s actually coming from, what you can do is go down to the “Marketing” menu again, go down to “Files and templates”, and then click on the “Design Tools” link; I’m going to do that now, and you can see here on the left hand side, this is our files and folders for the design tools files and folders. You can see that there’s a new folder in here called “emailify”, that automatically gets created when you upload the template from Figma into HubSpot, and we can see here that there’s an HTML file in there; that’s actually the HTML file that was just uploaded from Figma into HubSpot just a few moments ago; that’s actually where the file’s coming from.

You can see in here it’s got a template type of “email”; because it’s got that tag in the HTML, which the Emailify Figma plugin automatically adds in, that’s why it’s showing up in your email templates; because it’s got that little tag in there and it’s sitting in this files panel, the emails page basically just automatically picks that up as a custom template and that’s how it’s getting added.

You can actually go ahead and make changes to this file if you wanted to if you really wanted to do it in HubSpot, you can edit the HTML in here after it’s been uploaded, and that’s totally fine if you want to do that. I just thought I’d mention where those files are actually getting sent to in case you wanted to either remove them, or clone them, or rename them, or do anything; create a new email from them, all that sort of good stuff.

That’s that’s really it; that’s the whole process of exporting the email templates from your Figma designs into HubSpot. It’s much quicker than manually uploading all the images, manually modifying all the HTML to make sure it’s compliant with HubSpot’s templating language; they have some strict requirements with the way the template needs to be structured and all that sort of stuff, so the Figma plugin the Emailify Figma plugin basically injects a bunch of those required tags in automatically.

Then as I said, you basically want to go ahead and add the HubSpot template, the HubSpot footer template that’s underneath the “Footer” category in the email components, and that’s going to automatically inject those links that we really want. If those aren’t in there, HubSpot will get a bit angry, and it won’t actually let you view or send the template; it definitely needs the “unsubscribe” link and it needs these “company” details as well; like your company address and all that sort of stuff. These will actually get dynamically swapped out in HubSpot based on the information that you’ve got in your HubSpot accounts profile, so that’s just something to be mindful of.

If you are seeing a blank template page, where there’s nothing on the template, it’s possible that you haven’t included the HubSpot footer. Just go ahead and click on that and that will just add that in there; but other than that, that’s pretty much all you need to know. You’ve got that integration built in now, so as long as you’ve got your HubSpot API key, that’s all you need; you just paste the API key in, select the “HubSpot” item and then click “Upload To HubSpot”, and you can upload as many templates as you need to. If you have multiple frames, this will automatically upload multiple frames as well, so it just speeds up the whole workflow if you are a HubSpot user and want to be integrating this with Figma.

We’ll leave it there for today, it’s a fairly brief Figma tutorial just so you can go through those steps visually, as I know it’s a bit tricky to figure out where the API keys are and where the files are getting sent to. I just wanted to cover that in detail, and that’s all there is to know. Thank you as always for watching, and we’ll be back soon with more Figma tutorials just like this one very soon.