Video transcript
11-minute video ·
Today, I’m going to be showing you a quick tutorial on how to export your HTML email designs from Figma to The Benchmark email platform using the Emailify Figma plugin.
To get started, all we need to do is go to our Figma file, click on the “Resources” icon at the top here. If you search for Emailify under the “Plugins” tab, if you click on the Emailify result, you’ll be able to run the Figma plugin by either clicking on this “Run” button here or I’d recommend clicking on this “Save” icon here and that will let you run the Figma plugin from your Figma plugins list. So, I’ve already clicked on the save icon, so I’m just going to go to my canvas, right-click anywhere, go down to “Plugins”, then go down to “Saved plugins” and click on Emailify, 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 it helps you to design HTML emails in Figma which you can then automatically export to production-ready responsive code with one click.
I’m just going to create a really simple template today. So, I’m just going to call this one template Benchmark example and just click on add new Emailify container and that’s going to allow us to start adding some preset components that we can then customize with our own content and branding in Figma. So, I’m not going to be running through all of the design features in the tutorial today. If you’re interested in that, I’d recommend checking out some of the other tutorials on the YouTube channel or going to the Emailify documentation site and you’ll get heaps of resources there to customize the designs to your own brand and content.
Again, today I’m going to be leaving all of these as default just to show you a quick example of a template. And once you’re happy with your template that you’ve designed with Emailify, the last step that you want to do is go to the footer tab in the Figma plugin. So, click on the “Footer” tab here and if you go down to B so the letter B, you’ll be able to see there’s a Benchmark email footer preset. So, if you click on the Benchmark email footer, that’s going to automatically add this footer preset component to your design which pre-populates it with the unsubscribe link and viewing browser link for the Benchmark platform. So, we can double-check that by clicking on the link layer in our little nav component here and then clicking on the settings button in the Figma plugin up here and that will reveal the tag. So, we got our unsubscribe URL tag and also the viewing browser tag. So, these will automatically get populated by Benchmark later and those will work when you send out your email to your audience and they’ll be able to click that and unsubscribe from the list or viewing the browser which will open up a web browser tab from the email client.
Now that we’ve got that set up, we can preview the email by clicking on the preview button in the Figma plugin and that’s going to let us see a real-time HTML preview of what the content’s going to look like after it gets exported from the Figma plugin. So, we’ve got the mobile view up at the moment. We can expand that out to desktop to see what it looks like on larger email clients. So, that’s all looking really good and you can also customize the responsive design for mobile devices by clicking on the settings button up here and then just going through and clicking on any Emailify layer in your design. So, for example, you can do things like change the font size on mobile, you can change the padding for rows, you can change the visibility to hide things on mobile or hide things on desktop and kind of swap those things around.
I’ll leave those for you to explore. Again, check out the documentation or some of the other video tutorials on the channel for some more context around those. But for today, I’m just going to be assuming that you’re happy with your design. So, once you’re happy, just close off the preview and then we’re going to click on the export HTML button in the top right of the Figma plugin here and we’re going to change this default HTML email option from HTML email and scroll down to the platforms list and just go ahead and find The Benchmark email item. So, you can see here there’s Benchmark email as an option, go ahead and click on that. And then what you want to do is populate your subject line. So, just call this, I’m just going to call this sub subject line test and then you can also add preheader text.
Preheader text is what shows up after the subject line next to the subject line or under it in the email client when it opens up the email in your inbox. So, you can add that text in there and that will automatically show up as expected. The subject line, just be mindful that you will have to read this later when we export the email to Benchmark in a moment. So, it’s still worth adding it here because it’s going to include it in your title tag and that’s going to show up if someone clicks on the viewing browser link and that’s what the window or tab title is going to be taken from here. So, populate that and also be mindful that you have to copy-paste that again in a moment. So, once you’ve got those set up, just go ahead and click on the export for Benchmark email button and that’s going to automatically generate all of the HTML and upload any image assets in your design. So, what you want to do is click on the download your zip file button and just save that anywhere on your computer, to your desktop is fine. And then once that saves, just double-click on the zip file and you should get a folder that looks like this. So, you can see here we’ve got a folder called template Benchmark example which is named the same as our Figma frame was. So, the file that we want is inside of this folder. So, if you open that up, you’ll see an index.html file and that is our final HTML email that we’re going to use in just a moment.
Once you’ve got that exported, you can then log into your Benchmark email account. So, I’m logged into the dashboard here and it’s very important to note that this is a paid Benchmark email account. There’s a free option, but the free tier of Benchmark doesn’t allow you to import custom HTML emails. So, just make sure you’re on the Pro Plan or you may be on an Enterprise plan but as long as you’re not on a free plan, you’ll be able to create custom HTML emails in The Benchmark email platform. So, once you’ve logged in, just go ahead and click on the emails item in the side menu here. And then once that opens up, just click on the other nested emails item. So, click on email emails again and that’s going to load up the emails page inside of Benchmark and you’ll see a button that says create new email. So, go ahead and click on that create new email button and then just select regular email. So, there’s three options here, just select the first one which is regular email and then click next.
Then you want to change this option from the drag and drop editor over to the code editor. Again, this option here will only be available if you’re a paid Benchmark email user. If you’re on the free tier, it’s going to prompt you over in this square to say that you need to upgrade if you want to use this option. Feel free to do that if you do want to use custom HTML inside of Benchmark. I’ve already done that, so I’m just going to click on the code editor option here and then click on the next button.
Give your email a name. I’m just going to leave that as default. You can call that whatever you want to call your campaign, and I’m just going to click next. This is now going to take us to the Benchmark email editor page. This is going to allow us to drop in custom HTML. You can see that there’s a custom HTML source code viewer here and a preview of that email content here. It’s just showing that email content.
What we want to do is actually get rid of all of this. We’re going to highlight all of that content in the source code editor and just delete it. We want that to be completely empty. Then go back to your folder that we just exported the HTML file from via the Figma plugin. Again, find that index.html file inside of your email folder, and we’re going to drag and drop that directly into this source code window here in The Benchmark email editor.
Drag and drop that in, and you can see that’s automatically loaded all of the HTML file content into the editor directly, and it’s also showing a live preview here, very similar to what we just saw in Figma. We can see that that’s all being loaded in and it’s all working, which is great.
The other thing that you’ll need to do is customize the footer area. You can see here it’s quite a mess with all this extra content here. By default, Benchmark will include all of that stuff in your footer. What you need to do is go to this settings button in the bottom left of your Benchmark page, click on that, and then you just need to go through and uncheck some of these things.
You can uncheck the permission reminder. You can uncheck the include web page web version link because we’re already including that anyway in our design if you’ve added the Benchmark footer. So we can uncheck that and that will remove it from down there. Then go over to the footer tab in this same little popup here, and there’s a few other things we can get rid of.
If you’ve already added your address in here, you can delete the address in here so it doesn’t double it up. You can also then untick the sent to information, you can untick the verified unsubscribe logo, and you can untick the manage subscription link. For the address field, it’s basically saying that it wants to have a valid physical address. I’m just going to add in a little dash because we’ve already got our address added here.
Alternatively, you could remove it from your design and just add it down here, but it seems silly to double it up. I’m just going to remove that and add a little dash there because it doesn’t let me remove the full text. The other thing to note is that there’s this massive badge from Benchmark that gets included by default.
If you check out the documentation, they basically say that you can remove this if you’re a paid customer, but you have to email them at [email protected] and they will manually, I guess, turn off this feature to remove that branding from your emails. So it seems like that should be removed by default, but unfortunately, it’s not, and so you will have to email them to ask them to get rid of that badge being included in your footer.
Same thing with the unsubscribe link. It seems like it just adds that in there even though we’ve added one here. I’m not sure why it doesn’t allow you to remove that one, but worst-case scenario, you’re going to have a double unsubscribe link in the footer there, and unfortunately, that seems to be just the way that the platform works.
Now that we’ve gone through those extra steps around the footer, what you can do is just click on the save and next button once you’re happy with this and you don’t want to make any more changes. Click on Save and next, and that is going to allow you to then schedule your email and decide which audience you want to send it to, who it’s getting sent from, which address, and also adding your subject line.
As I mentioned before, you will have to add that subject line in again down here. Just go ahead and add that same subject line that you added in Emailify here, but you don’t need to read the preview text. We’ve already added the preview text in the Figma plugin. So remember, we added that before. You don’t need to add it again in Benchmark.
Otherwise, that’s going to double up the previous text that we already added that gets included in the HTML. If you add it here again, it’s going to inject the same content again, so it may double it up. Just leave the preview text one blank if you’ve already filled it out in Emailify, but do populate the subject line field in Benchmark.
That’s basically it. You can save this and schedule it and send it whenever you’re ready. But that’s going to allow you to use a custom HTML email template that you’ve designed in Figma and have that sent out as your Benchmark email template. Again, feel free to reach out to The Benchmark support team just to ask about tidying up this footer here.
It seems a little bit silly that they add that by default, but it does seem like you can ask them to remove that. So again, email the [email protected] address, and hopefully, they can help you remove that from your designs. That’s going to be it for today. I just wanted to show you how to get your HTML email designs out of Figma and into the Benchmark email platform if you happen to be using that for your email sends.
Thank you as always for watching. We’ll be back soon with more Figma tutorials like this one very soon.
Pro Bundle