How to export HTML emails from Figma to Intercom using Emailify

Today I’m going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Intercom platform using the Emailify Figma plugin.

All we need to do is go to our Figma file, go down to the bottom toolbar here, and click on the Actions item. And if you click on that button, you can then search for Emailify. Under the Figma Plugins tab, you can run the Figma plugin by clicking on the Emailify item and then going down to this Run button down here. Or you can click on the Save button here, which will save it to your Figma plugins list. I’ve already clicked on that Save icon. I’m just going to go back to my Figma canvas, right-click anywhere, go down to Plugins, then go down to Saved Plugins, and click on the Emailify item. That’s 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 basically helps you to create HTML email designs in Figma, which will then automatically be exported to production-ready HTML from the Figma plugin. I’ve basically just grabbed one of the templates from the Templates tab over here just to show you a quick example. If you’re new to the Figma plugin, you can basically spin up a brand new template and customize that using Figma. You can go through and pick from a bunch of different components which can all be totally customized based on your own brand.

But again, today I’m focusing on uploading an existing template to the Intercom platform, and I’m going to assume that you’ve already designed the template in your own time. If you are curious about how to dive into all of the design features, feel free to check out some of the other YouTube tutorials and the documentation for Emailify. But again, today I’m assuming you’ve got your email template ready to go and we’re going to upload that into Intercom. Once you’ve got your template, you can preview it by clicking on the Preview button in the Figma plugin. That’s going to show you what the real HTML is going to look like when we upload it to Intercom in a moment. You can see I’ve got this HTML email here.

There are two things in the documentation from Intercom that we need to include. If you scroll down to this area here, you’ll see that we need these two different tags. One is the unsubscribe URL. That’s basically an unsubscribe link. The easiest way to add that is to go to the Figma Plugins Footer tab. If you click on Footer over here and then scroll down to the letter I, you’ll find an Intercom footer option that you can click on. That’s going to automatically include a navigation link that’s pre-populated with the required unsubscribe URL for Intercom. That’s the easiest way to include that into your template. Of course, you can customize the design and the content of the footer as well. That’s totally up to you.

For today, I’m leaving that as is just to show you what that looks like there. I’m going to close that off. And we’re now also including the second tag. The second tag that’s required is this content tag. Content will basically swap out whatever text you’ve got in your email with this content tag. For example, if we add this placeholder here, whatever content you later add in your Intercom templates or your Intercom messages will automatically get injected into this placeholder. They do mention that even if you don’t intend to customize the content of the email, you still need to include this tag.

What the Figma plugin does, if you decide you don’t want to include a dynamic content section of text in your template, like this for example, is remove that. The Figma plugin will automatically inject that content tag as a hidden tag that won’t show up anywhere, but it’ll still be included to make it a valid upload. Today I’m leaving that empty. I’m going to remove that layer, and we’re going to get that content tag automatically included when we upload the email. Let’s do that now.

I’m going to click on the Export HTML button in the Figma plugin, and we’re going to change the export option from HTML. We’re going to go down to Platform Integrations, go down to the letter I, and find Intercom. I’ve just selected the Intercom option. You can put in your subject line and pre-header text here. For example, we might include this subject line to match the heading. The pre-header text can be whatever you like. I’m adding this little bit of content there. Then we want to click on the Export for Intercom button. I’m clicking on that now.

That’s going to generate the HTML and upload any images. Once that’s done, click on the Download Your Zip File button. I’m clicking on Save and putting that on my desktop. Once you’ve done that, you want to double-click on that zip file, open up the folder, and you’ll see that there’s a folder that matches your email name. We’ve got Emailify Template as our frame name in Figma. That’s the folder we want to open. You’ll see this index.html file. That’s the one we want to use. I’m just going to drag and drop that into the browser. That’s going to load up our HTML. You can see we’ve got our unsubscribe link here, all of the HTML content ready to go.

Now that we’ve got that exported, I’ve opened up my Intercom dashboard. This is the first page I’m seeing after I log in to my Intercom account. Yours should look pretty similar. What you want to do is go down to the Settings tab down here on the left. Once that opens up, navigate to the Channels section and click on the Email option. I’m clicking on this Email button here.

Once that opens up, you want to click on the Email Settings tab at the top here. We’re going to scroll down a fair bit until we come across this Signatures and Templates section. We want to go down to the Email Templates for Outbound Email section. Under that section, there’s a button called Create or Manage Templates. I’m clicking on that now.

You want to click on the New Template button in the top right. It’s going to give you the option to click on Create from HTML. I’m clicking on Create from HTML. This gives us an HTML editor window. It’s got a placeholder HTML email in here that we’re going to remove. I’m getting rid of all that content and deleting it.

It’s asking us to enter our template HTML. What we need to do is go back to the index.html file we just exported from Figma, which we just opened up in the browser. The easiest way to get that code is to right-click anywhere, go down to View Page Source, and click on that. Then select all. I’m on a Mac, so I’m doing Command-A, and then I’m copying that to my clipboard. If you’re on Windows, it would be Control-A and Control-C to copy it to your clipboard.

I’m grabbing all of that content. I’m going back to my Intercom account and pasting it into the Template HTML field. I’m pasting that in. You can see here we’ve got our HTML loading up nicely. That’s looking really good. As I mentioned before, at the very bottom of the email, we’ve got that content snippet there. That’s being included in a hidden element. We can’t see that anywhere in the email, but it is being included just before the end of the email as a hidden element.

If we didn’t have that content tag in there that the Figma plugin automatically added, it would give us an error. And again, you can add that content tag to your email beforehand and then it won’t get added again. For example, you could basically add that here, and then later when you send out the email template from Intercom, any dynamic content or any dynamic message you add to your email will automatically get replaced into that little variable. I just wanted to flag that in case you’re wondering what was going on there.

That’s basically it. We’ve now got this added as an email template. We can customize the name of this. We can add the name of the email here. I’m popping that in. You can name that whatever you want. I’m calling that “Thanks for Trying Sketch” as my email template. Then I’m clicking on Save. That’s gone ahead and saved it.

We’ve got our new template saved into Intercom. If we want to actually use that, we can use that as an available template, which is now saved in our emails. If we go back down to Manage Templates here, you can see that we’ve got this new template saved. If we click on that, you can see what that looks like there.

That’s now in the Intercom platform. You can use this custom HTML email for custom outbound emails which can be sent from the Email Settings or the Email area for Intercom outbound messages. That’s going to let you brand those as custom HTML emails from your Figma designs. I hope that’s helpful if you’ve been wondering how to create or export HTML emails from Figma to use in the Intercom platform if you’re using that for any outbound emails. This is a really easy way to go about it without having to manually code those up.

The final thing I’ll mention is that you can also add dynamic variable content as well. For example, you can see there are some different elements here that are available to us. For example, you could add somebody’s name dynamically if you’re using that kind of content in your emails. We could add a fallback here, and that’s going to automatically add this in. It would basically say “Thanks for trying Sketch” and then the person’s first name. That would automatically swap out this placeholder with the person’s name from Intercom based on who you’re sending it out to. If that name doesn’t exist, you can add a fallback value. Not that you’d probably include this one, but that’s an example of what you can do with customization.

Feel free to grab any of these variables and add them as text in your Figma text layer and that will automatically get included in your HTML templates as well. A quick note with this: the Figma plugin automatically includes these data pre-mailer ignore tags and things like that. You don’t need to worry about doing that either. The Figma plugin tries to take care of as much as possible in terms of making it Intercom-ready. The only one you really have to worry about is including your unsubscribe link as we just went through. As long as that’s included, you’re going to be good to go.

Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.