Video transcript
8-minute video ·
Today I’m going to be showing you a quick tutorial on how to export HTML email templates from Figma to the Zoho Campaigns platform using the Emailify Figma plugin.
To get started, all we need to do is go to our Figma file, click on the little “Resources” icon up the top here. If you search for Emailify and under the “Plugins” tab, click on the Emailify item. You can run the Figma plugin by either clicking on this “Run” button here or I’d recommend clicking on this little “Save” icon here. That will save it to your Figma plugins list for easy access. So, I’ve already clicked on the save icon. I’m going to go to my canvas, just right click anywhere, go down to “Plugins”, then go down to “Saved plugins”, and click on the Emailify item. 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 allows you to design and then export responsive HTML emails from Figma to code automatically. If you’re new, you can either start with a blank frame or you can browse some of the templates. So, if you want to start with a template or just see what’s possible with the Figma plugin, you can duplicate any of those. Today, I’m just going to keep it really simple and create a new template called Zoho Campaigns and click on add new Emailify container. Then you can basically go through and start designing your email.
I’m not going to be going into detail about how to design the templates themselves. I’m just going to run through that really quickly. I’m just going to assume you’ve already got that created if you haven’t gone through those features before and you want to learn more, there’s a few tutorials on our YouTube channel that you’re welcome to check out and those will give you a comprehensive overview. Today, I’m just going to be going through some of the basic features of the Figma plugin to design it just to get a quick template spun up.
You can see here, I’m adding a bunch of components. You can obviously customize these content-wise and design-wise in the Figma plugin. But the last thing you just have to make sure of before you upload the template in a moment is go to the footer tab and then scroll all the way down in this platform section to the bottom. You want to find the Zoho Campaigns footer. So, click on Zoho Campaigns and that’s automatically going to add a footer pre-populated with the correct unsubscribe and view in browser links. So, if we inspect those in the Figma plugin, just click on the little settings button up here and you can see that we’ve got our viewing browser tag and our unsubscribe tag added in automatically and also the company address merge tag at the bottom too. So, those are basically good to go.
Now, we can upload this to Zoho. So, what you want to do is go to the export HTML button in the Figma plugin and click on that. Then you want to click on this little HTML email option here and scroll down to the platform integration section. Go all the way down to the bottom to find Zoho Campaigns. Then just click on the export for Zoho Campaigns button. You can also add an optional preheader text. So, this is the text that appears before your subject line in the email client. You can add your preheader text and subject line. So, the subject line will get added to the title tag in your HTML file but you will still need to add it manually in Zoho Campaigns in a moment which I’ll show you once we export it. So, go ahead and click on export for Zoho Campaigns and that’s going to now export your HTML email from Figma and let you download it to your computer. We’re going to click on download your zip file and then just save that anywhere on your computer to your desktop if you prefer and click on Save.
Then just double click on the zip file to unzip that and that’s going to open up this folder here. You can see we’ve got a previews page. So, this is the page that’ll let you preview your HTML file. So, if we open that up in the browser and just drag and drop that in, you can see we can get a preview page of what that’s going to look like on desktop and mobile. So, you can scroll through that. These are good for sending to clients for approvals as well but the file that we want to use to upload into Zoho Campaigns is actually inside the named folder here. So, this is going to be named the same as whatever you’ve called it in Figma. So, we’ve called it Zoho Campaigns. So, you want to go into that folder, go to the index.html file. So, you can see we’ve got this index.html file and that’s actually the one that includes our HTML that we’re going to use in a moment.
Now that we’ve got that open, we want to go to Zoho Campaign. So, just log into your Zoho Campaign account, go to the campaigns tab on the left, click on that and then click on email campaigns. So, we want to go ahead and click on the create campaign button. So, I’m just going to click on that now and then what we want to do is just go to regular email. So, I’m going to click on create new under regular email, give it a name. So, we’ll just call it “Test campaign from Emailify” and click save and proceed. This is going to give us a blank campaign that we can now import our content into.
As I said, we still need to populate the subject line manually. So, you can add a subject line here that’s going to be used if you’ve already added the preheader in Emailify, you don’t need to add it in here, otherwise, it’s going to double up. So, just leave that blank and click save and then you’ll need to add your sender details. So, go ahead and do that, add your list. So, go ahead and do that and once you’ve done that, you want to then go down to here where it says create content. So, click on the create content button and here we basically want to click on the import upload HTML option down here. So, go ahead and click on import upload HTML and then click on upload from computer and then you want to go over to this Le hand option here where it says upload or drag and drop your HTML file.
We’re going to do that now by opening up that folder that we just had and you can see here the index.html file inside of our folder. We want to grab that file, drag and drop it into the little window here and that’s going to drag and drop the index.html file in as you can see and once you’ve done that just go ahead and click on the upload button and this is going to upload the HTML file. The HTML file already has the image assets uploaded so you don’t need to worry about that. You can just drag and drop that file directly from your folder into Zoho Campaigns. So, you can see now that I’ve uploaded it, we’ve got it imported into our campaign. So, if we click on this little magnifying glass you can see that the HTML has been imported that we exported from Figma that’s now opening up in Zoho Campaigns as we’d expect.
That’s looking really good. We can close that off now and again you can go through all these options yourself there’s a few different options that Zoho Campaigns gives you. I wouldn’t recommend manually editing the HTML because it’s already been pre-optimized but you do have the option to do that if you want to. The other thing worth noting is if you want to add a plain text version. So, you can see here there’s this little edit button for the plain text version. If you want to do that you can see here that it’s tried to already do it itself. If you want to update that or create a more Advanced version the Emailify exports automatically include a plain text version that you can see here. So, we can actually just copy paste that and drop it into our plain text window here and that’s going to automatically include things like links so this button doesn’t have a link on it but if it did you would get the actual HTTP link inside of the plain text version as well. So, that’s something that you can do if you’d like to. You can just add the plain text version in manually. So, go ahead and click on Save and that’s basically it. We’ve just added our custom HTML template that we exported from Figma using Emailify and we’ve dragged and dropped that into our Zoho campaign and we can now send this out to any list that we like and that’s going to look really good.
That’s basically it, I just wanted to keep it really simple for today. If you are using Zoho Campaigns this is a really easy way of getting the HTML out of Figma and into Zoho Campaigns for your email sends. So, thank you as always for watching and we’ll be back with more Figma tutorials like this one very soon.
Pro Bundle