How to export HTML emails from Figma to Customer.io using Emailify

Video Transcript

Today I’m going to be showing you how to automatically export HTML emails from Figma and then take those HTML emails and upload them into the Customer.io marketing platform to use as custom email layouts.

To get started, all we need to do is go to Figma, and in your Figma file, if you click on the little “Resources” icon at the top here and just search for “Emailify”, under the “Plugins” tab, you’ll see “Emailify” pop up. If you just go ahead and click on that result, you can run the Figma plugin by either clicking on this “Run” button here, or I’d recommend clicking on this “More options” icon here and clicking “Save Plugin”, and that’s just going to save it to your Figma plugins list for easy access later. I’ve already gone ahead and done that; I’m just going to right-click on my Figma canvas, I’m just going to go down to “Plugins”, I’m going to go down to “Saved Plugins”, and then just click on the “Emailify” item, and 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 you can basically use it to help you design HTML marketing emails in Figma. For example, if we create a new email called “My Email” and add a new Emailify frame, this will basically allow us to start designing an email using some of the tools in the Figma plugin. We can do things like add headers, we can add CTAs, we can add content, and all this is totally customizable in Figma as you’d expect. I won’t go into detail about how to design the emails in this Figma tutorial. There’s another Figma tutorial on our YouTube channel if you want to check that out. Today, I’m just going to be showing you how to export this to HTML for the Customer.io platform; we’ll go ahead and do that now.

What I’m going to do first is just make sure I’ve got the Customer.io footer included. If you go to the “Footer” tab in the Figma plugin, you’ll see there’s a bunch of different platforms here, and these contain some of the required links and tags for the platform to use when it gets uploaded. For example, we’ve got Customer.io down here; I’m just going to click on that one, and that’s automatically going to add this footer component to my email.

If I drill down into this layer here and go into the “Navigation” component, you can see if I click on the “HTML and Mobile Settings” button in the Figma plugin, you can see that the “Unsubscribe” link is pre-populated in the URL field along with the “View in the web browser” link. This is going to allow you to view the email in the browser if you’ve received it as an email. That’s going to get automatically populated by Customer.io; a Customer.io template does need to have an unsubscribe link, so you can add this on your own, but the easiest way to do it is just to click on the footer component, and you’ll get that added automatically in there as you need.

Now that that’s been added, the other thing that Customer.io templates require is a “Content” tag; anywhere in the email, you basically have to include a “Content” tag that looks like this. So, it’s double curly bracket and then close double curly bracket with the word “content” in the middle. What this does is it basically creates a placeholder area for your content when you’re uploading into Customer.io, and you’ll be able to fill this out dynamically later if you want to do that.

Basically, just go ahead and pick a place in your template that you want to create custom content in. As far as I know, you can only create one of these areas, so just pick whichever area you want, and that’ll automatically get added into the HTML later. If the templates are missing this tag, just because it does require it, Emailify will automatically add this content tag just to the very bottom of the email, just so that it’s in there so that the editor in Customer.io doesn’t complain. We’ll see what that looks like in a minute.

I’m just going to leave that off for now just so we can see what that does. I’m just going to remove the content tag and just undo some of that content that we just added; if we just create the default one and then export it, now that we’ve got our design, all we need to do is export it to HTML. If we click on the “Export HTML” button in the Figma plugin, and by default, it’s just this default “HTML Export” which you can download to the computer. We’re going to go down here to the platform integration section and just click on “Customer.io”.

And once you’ve got Customer.io selected, you’ll see that it’s got a button that says “Export for Customer.io”. You can add your subject line and pre-header, and this will get included in the HTML file. But for today, I’m just going to leave those blank and export it. I’m just going to click on “Export for Customer.io”, and this is going to export our email to HTML. Once it’s finished exporting, you just have to click on this “Download your zip file” button; I’m going to click on that now and just save it to my desktop.

If we unzip that file, I’ll open up the folder so you can see what it looks like. And we’ve just got a few different files here. We’ve got our “previews.html”, so the previews.html is basically a file that allows you to preview the desktop and mobile version of the email, so it’s good for sending to clients when they need to review them. And we’ve also got our email here, the email folder has got our HTML in it, which is just the pure email template.

For today, we’re just going to be looking at this index.html file, and you can see here that it’s inserted the content area at the bottom here because we didn’t include it in our template anywhere. I’m just going to go ahead and move that into my code editor; I’ve just got my code editor up in here, I’m going to open up the folder again and just drag and drop the index.html file in there, and I’m just going to select all of that code and copy it. So, you can just do “Command + C” or right-click and copy all of that.

If we go into Customer.io now, I’m just signed into my Customer.io account, and all you need to do is go into the left-hand side here, scroll down to “Content”, and expand content, and then go to “Email Layouts”. If you click on email layouts, and then in here, you just want to click on the “Create Layout” button; in the top right here, “Create Layout”. Then you want to click on “Start from scratch”; we don’t want to use any pre-existing templates, we want to create our own. We’re going to click on start from scratch, and we can just call this whatever we want; we’ll call it “Emailify Template”, click “Create Layout”, and you can see here we’ve got this code editor that we can now paste our custom HTML in.

If we now get rid of all of this pre-existing content and just select all; “Command + A”, or “Control + A” if you’re on Windows, and delete all that. We’ve still got our code copied from our code editor over here, which we grabbed. We’ve copied that, and in our Customer.io editor, we’re going to paste that in, just “Command + V”, or “Control + V” if you’re on Windows, paste that in; and you can see all of the HTML is now pasted in there. What we can do now is click on “Save changes”; I’m going to click “Save changes”, and there we go, it’s basically saved our layout as we’d expect.

We’ve got our HTML in there, we’ve got our unsubscribe link, view in the browser link, and we’ve also got our content variable that was added automatically down here. Ideally, you don’t want to have that down there. Ideally, you would populate that, as I mentioned before, somewhere in the content area so you could swap that out with content and do that. For example, I’ll just show you what that looks like. If you add content like that, and if we now re-export this template; I’m just going to click on “Export for Customer.io” again, re-export that, download the zip file again, unzip that new zip file, and if we open up that folder, we can see here that if we open up the index file, I’m just going to drag that into my code editor again, copy that; and if we go back to our browser, if we now go “Edit Layout”, I’m just going to click “Edit Layout”, and again, I’m going to remove the last template, paste that in, and click “Save changes”, and I’m just going to say “Done Editing”.

There we go; we’ve got our content tag in there, and because we’ve included our own content tag, it’s not going to automatically add it to the bottom of the email. It’s just going to leave it where it is, because the Figma plugin detected that you’ve already added your content tag, so it’s just going to keep it there and not add its own one. The reason it adds its own one is just to make sure that that tag is in there somewhere. Otherwise, the template basically just won’t get saved; you can either remove that or do something with it, or ideally, just add it to your design beforehand.

That’s basically it, we’ve got our email template in here now; that’s what it looks like. It’s looking really good, and if we go to our content section again and go back to email layouts, we can now see that we’ve got our “Emailify Template” in there, which is available to use in campaigns or sends later. We’ll leave it there for today. I just wanted to keep this quite simple just to show you the basics of exporting HTML from Emailify for Customer.io and uploading that as a new email layout in the Customer.io platform when you’re logged into your Customer.io account.

You might be wondering why this can’t be done automatically; you might have noticed there’s a few other platforms that are in here; there’s MailChimp, Klaviyo, Mailgun, all these different platforms, which allow you to add an API key and automatically upload these things. Unfortunately, Customer.io, the platform, doesn’t have an endpoint or an API that allows us to automatically upload the templates into the platform, which would be really handy, but unfortunately, it doesn’t have that. We do have to do this extra step of manually copying and pasting it into your template section, but once it’s in there, you’ve basically got it in there forever, and you can just create new campaigns from the template or reference that layout however you need to.

I just wanted to add that context just in case you’re wondering why it can’t be done via an API; that’s sadly the case at the moment, but hopefully, they’ll have that in the future, and then the Figma plugin I’m sure will be updated to do that automatically as well. Thanks for watching, and we’ll be back soon with more Figma tutorials like this one very soon.