Video transcript
5-minute video ·
Today, I’m going to be showing you a really quick Figma tutorial on how to export your HTML email designs from Figma to also include plain text versions 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 click on the “Plugins” tab, you’ll be able to run the Figma plugin by either clicking on this run button here or I’d recommend clicking on this little save icon here. That’ll save it to your Figma plugins list for easy access later.
I’ve already clicked on the save icon, so 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 helps you to design HTML emails in Figma, which can then be automatically exported to code using the Emailify Figma plugin. I’m not going to be going through all of the design features in this tutorial. I’m going to assume you’ve already followed along with some of the other tutorials and documentation to get your Emailify template ready to go, and I’m going to assume you’ve already got it ready to export to HTML.
Today, I’m just using one of the templates that you can use from the template Gallery over here. I’m just using the GitHub template as a quick example, and I’m going to export this now to show you what it looks like as a plain text version of that email.
You can see here that I’ve got a few links in here. I’ve got a link in the paragraph, I’ve got a button link down here, which is being set through the settings panel up here, and I’ve also got my unsubscribe link down here. I’m going to show you what that looks like when we export it.
If you click on export HTML and then click on the HTML option or any other platform integration that you want to select and just click on export to HTML, that’s going to export the email design from Figma automatically to a zip file. I’m just going to download the zip file, open that up from my desktop.
If we open up the folder and then open up the Emailify template, which is the frame that we called the design in Figma, you can see here there are two different files. There’s an index.html file, so that one is the actual email template in HTML. If I open that up in my browser, you can see here that we’ve got the HTML version looking really good as we’d expect. So, that’s your HTML version.
But now we’ve also got the option to have a plain text version as well. You can see we’ve got this plain text version.txt file. If I go ahead and open that up in a text editor, I’m just going to open it up in GitHub Code Studio for now and I’ll just wrap the line so you can see that a little bit easier.
You can see here that the plain text version of the email has been automatically included as a text file. So, you can see our content from the HTML is all getting included. This is a plain text file; there’s no HTML in here. You can see the headline’s been included, but also the links have the HTML URL in brackets next to them. So, you can see next to the signup text, which is a button in our design, we’ve got the button here that links to github.com. In the plain text version, those links automatically get converted into just plain text with the actual link next to it in brackets.
Anyone who’s reading the email in plain text, which some email clients do, then they’ll be able to click on that link or view that link without having the HTML version accessible to them. So, I just wanted to show you that really quick tutorial. This is a new feature that’s been included in the Figma plugin. This will automatically always get exported alongside your HTML file. So, whenever you export your emails from Emailify to a zip file, you’ll always have the plain text version right next to the index file.
This won’t affect anything in your index file; it’s a completely separate file that you can use. Sometimes you have the option of including a plain text version; some email marketing platforms actually require a plain text version. So, this is a really easy way for you to copy and paste a plain text version of your HTML emails into those platforms.
And just finally touching on the other platforms, as I mentioned, if you do select one of the other platform options, for example, if you’re selecting one of these integration options here like Salesforce or Pardot or Klaviyo or something like that, the HTML and the plain text version will automatically be uploaded if that’s supported. If the API for the marketing integration supports uploading a plain text version, then the Figma plugin will automatically take the content that we just looked at in this file here, and it will automatically upload that to your email marketing platform.
Again, this is going to depend on which platform you’re using, but if it’s supported, the Figma plugin will automatically include that. So, you don’t really have to worry about it when you’re uploading your emails.
As I said, that was a really quick tutorial. I just wanted to show you that feature, which has just been included in the Figma plugin. Please feel free to try it out, and hopefully, that helps your workflow if you are needing to convert your HTML emails into a plain text version to use with your email marketing platform.
Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.
Pro Bundle