Video transcript
10-minute video ·
Today I’m going to be showing you a quick tutorial on how to export your HTML email templates from Figma to the ConvertKit email marketing platform.
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 up here, and if you search for Emailify under the Plugins tab, you can then click on the Emailify item. Then we can run the Figma plugin by either clicking on this “Run” button here or I recommend clicking on this little “Save” icon here. That will let us run the Figma plugin from our Figma plugins list. So I’ve already clicked on that 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 Emailify. 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 it helps you to design HTML emails in Figma which you can then automatically export to production-ready responsive code. So we’re going to create a really simple template today. I’m just going to call this one template example for ConvertKit and just click on the add new Emailify container button.
I’m not going to be running through all of the design features in the Figma plugin today. There’s a few other good tutorials on the YouTube channel and in the documentation site for Emailify if you want to really drill down into how to design and customize the emails for your own brand and add content and things like that. Today I’m just going to be using some of the preset components without customizing anything or creating any of my own personalized layouts using some of these quick ad features down here.
Once you’ve created your email using the Emailify Figma plugin and you’ve customized it the way you like, the crucial thing you’ll need to make sure you add is the ConvertKit footer. So if you go to the footer tab in the Figma plugin and then just scroll down to the letter c down here, you’ll see that there’s a ConvertKit footer preset that we can click. So I’m just going to click on that ConvertKit footer, and that’s going to automatically add this footer component with some prepopulated tags.
We’ve got our unsubscribe link here and our viewing browser link. And if we click on the little settings button in the Figma plugin to inspect that layer, we can see that it automatically applies the correct ConvertKit tags, which are required for the ConvertKit custom email templates. So you can see we’ve got our unsubscribe URL and our viewing browser URL. And then you also need to add this little address tag, so this will prepopulate the address based on your ConvertKit account. And this is another required tag that ConvertKit will ask for when you do create your email template in a minute. So make sure you’ve added the ConvertKit footer from the Footers Tab. And you can, of course, customize the color of these links and backgrounds and things like that, but for today I’m just going to leave that as is.
To preview the HTML, you can click on the preview button in the Figma plugin, and that will load a quick real HTML preview in the Figma plugin that you can inspect. We can see what it looks like on mobile and also change the device to desktop. So this will allow us to see what our design looks like on those different sizes. And you can also customize these layers for mobile by just clicking on any of your Emailify Figma layers, then clicking on the settings button in the Figma plugin. And you can do things like override font sizes or padding or spacing, all different sorts of things depending on which type of layer is selected. So again, feel free to check out the documentation and the other video tutorials that go through the design features of the Figma plugin, but for today I’m just going to be leaving this as is.
Now that I’ve got my HTML email looking really good in Figma and I’m happy with it, I want to get this into my ConvertKit account. So the way we can do that is just to close off the preview, then click on the export HTML button in the Figma plugin. And we want to change this default HTML email option and scroll down to platforms and click on the ConvertKit option. So click on ConvertKit under the platform options. And then you just want to add your subject line. So subject line can go here, and then you want to add your preheader text here. So the preheader text is what shows up after your subject line when the emails get sent out. But the thing to be mindful of with ConvertKit in particular is you’ll need to copy this subject line again into ConvertKit when you do send out your email. So this field here in this case will just add the subject line to your title tag in the HTML, which means that if you click on the viewing browser link later and that opens up a browser tab with your email, it will automatically use whatever you put in this field as the title tag of that tab. So in your web browser when you click on that link, it will have the name of the tab set to whatever you put here. So set that to whatever you like. And then when you’re ready, click on the export for ConvertKit button. And that’s going to automatically generate the production-ready HTML and also upload all of the images and give you this .zip file that you can download.
Now that the export’s complete, we’re going to click on the download your .zip file button and just save that anywhere to your computer. I’m just going to save it to the desktop. And if you double click on that .zip file and unzip it, you can open up the folder that it exports which contains these few files here. So what we want to do in this case as you can see in the little description here, we want to find the index.html file which is inside of the folder that our email was named after. So you can see we’ve called our frame template example kit for ConvertKit and inside the .zip that we exported from the Figma plugin, there’s a folder called template example for ConvertKit. So that’s the correct one, and this index.html file is the final HTML code that we want to use. So what we’re going to do is go into ConvertKit, you can either click on this link here which will take you to the create new email template page directly. So if you’re logged into ConvertKit, feel free to just click that and that will open it up. Or you can just go to your ConvertKit dashboard, click on the send item at the top, go to email templates, and then once that loads, click on new email template up the top here. And when that page loads, this navigation on the left doesn’t seem to be working for me, but if you click on import code here or just scroll down to the very bottom of the page which is the import code section, just click on the create HTML template button over here. And that’s going to take you to the new email template page which is also linked in the Figma plugin from here.
Now that we’re at the new email template page in ConvertKit, we want to give this a name. So I’m just going to call this Figma template one. And what you want to do is paste in the contents of the HTML file from that index.html file. So in order to copy the HTML from our file, all we need to do is open up a new browser tab or window, drag and drop or open your index.html file into there. And that will let you view the HTML file in your browser. And the quickest way to get the source code or the raw HTML is just by right-clicking anywhere, going down to view page source and clicking on that. And then just select all by either doing command a on Mac or control a on Windows to select all of the content and then just copy that to your clipboard by right-clicking anywhere and clicking copy. So now that we’ve copied our HTML that we exported to the clipboard, just go back to ConvertKit and paste that in there. So we’re just going to paste that with command V or control V if you’re on Windows. And you can see that all of the HTML has been pasted in. So that’s looking really good. That’s exactly what we want. We can see at the very bottom here that we’ve got our address tag and our unsubscribe links already included. And you’ll also notice that there’s a hidden message content tag down here. So this message content tag is also required for ConvertKit emails, but it doesn’t really play very nicely with custom HTML emails. So it’s added at the bottom automatically when you export the emails from Figma to ConvertKit, and it’s going to be hidden in the same way that the preheader text up the top is also hidden. So it’s there, but it’s not going to be visible to any users. So that’s just something to be mindful of as well. You don’t have to worry about it; it’s added in there automatically, but that’s where it is if you’re wondering where that message content tag is getting added.
Now that we’ve added that in, we just go ahead and click on Save, and this will automatically save our new custom HTML template in ConvertKit. So that’s basically in there now. We can open that up and edit it later if we want to, but that’s basically now ready to go.
Now that you’ve got your content added as a template, you can then send that out by basically creating a new broadcast. So if you click on the broadcasts tab under the send menu, you will then be able to create a new broadcast, and you’ll be able to see that under your templates. So you can see you’ve got your templates up here as opposed to the starting templates. This is our custom ConvertKit template that we’ve just added. So you can go ahead and click on that template, and that will automatically now use that as your custom HTML template that you can send out as a ConvertKit broadcast.
That’s basically it. I know there’s a couple of extra steps there to get it into ConvertKit, but once it’s in there, you should be good to go. And as I said, make sure you’ve got those tags in there from the ConvertKit footer under the Footers tab. You always want to make sure you add that in; otherwise, it’s not going to accept your code as a custom template. And you can see here that it’s working well. It’s prepopulating the address, so we’ve got the address tag. You’ll notice that it’s swapped out the address tag down here with a real preview address, and these links will also be viewable as well. You can see in the bottom left of the window there; it’s got the archive URL goes here as part of the link. And you can see here that the unsubscribe Link in the bottom left of my browser window is also showing a little preview. ConvertKit unsubscribe link so that means these are working as expected. So that’s all really good.
As I said, we’ll leave it there. I just wanted to keep that as simple as possible to get the email that you design in Figma with Emailify and Export that out to a .zip file to upload into ConvertKit, and that should hopefully allow you to create really nice and personalized custom HTML emails for your ConvertKit send. So thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.
Pro Bundle