How to localize HTML email designs with Markdown text formatting in Figma using Emailify

Video Transcript

Today I'm going to be showing you how to easily translate your email designs using markdown formatting in an Excel spreadsheet via the Emailify Figma plugin.

To get started all we need to do is set up the Emailify Figma plugin by going to the "Resources" icon in your Figma toolbar and click on that, and if you search for the word "Emailify" and click on the "Plugins" tab and you should see Emailify pop up. If you click on that and then either click on the "Run" button here or you can click on this "More options" icon to save the plugin to your Figma plugins list for later, that will allow you to run it from your Figma file. I've already saved it to my Figma plugins list, so I'm going to click on the canvas, right click, go down to "Plugins", go down to "Saved plugins" and then I'm just going to click on the "Emailify" option, and that's going to run the Figma plugin that we just set up a second ago.

I've already got an email design set up, and I'm not going to be going through too much of the design process in this Figma tutorial; if you are new to the Figma plugin and are wondering how to design these emails using Emailify, there's a bunch of other YouTube tutorials on our channel, just search for the Emailify playlist and you'll be able to find a bunch of those. Basically, you can add these components via the tabs up here and customize the design and content here. I've just created a really simple one for today because we're going to localize this content into different languages with markdown formatting, so that we can actually format the text.

To get started, I'm just going to create a few pieces of formatting in this existing content, just so we can see what it looks like when we export it in a second. I'm just going to change a couple of things to bold, maybe we'll do some italics, and the other thing we can also do is links. If we want to add some links into here, if we wanted to highlight this content and create a link, you just highlight it, go up to the "link" icon in the top click on "Create Link" and then you can basically just add a link in there. I'm just going to add a link and that's going to create the link in here. Now that we've got a few different things set up in the content, all we need to do is go back to the Figma plugin, click on the "Localize" button and then we can select the "Excel" option which is selected by default, and select the email that you want to export.

This is the default way of exporting it and you just have to include what locales you want to translate this into; for example, we could do French, we could do German, we could do Australian, not that it's really different, but we'll do that anyway. Then this time we're also going to toggle a brand new option called "Add Markdown", and what this option does if we enable it is if you click on that link, it'll take you to the documentation page for Emailify and just gives you a bit of an explanation about what this is going to do. I'll go through this with you once we've exported it, so let's go ahead and click on the "Export XLSX" button; I'm going to click on that here, and that's just going to go ahead and export all of our content from this email into a spreadsheet.

Once it saves, you just double click on the zip file and you'll get an Excel file; we can open this up in Excel just by double clicking it. You can use another tool if you want to use Google Docs or a different spreadsheet tool, you can definitely use that as well, but for today we're just going to be using Microsoft Excel. We can see here that we've got our content that's been exported; we've got our Figma text, which is all the text that's been exported from the content, and you'll notice that we've got some formatting included in the spreadsheet. What this means is it's basically using markdown, which is a certain type of text formatting syntax that allows you to have things like double asterisks or underscores to specify if a text is bold or if the text is italic, these are the different syntaxes you can use to specify that in markdown.

Now that we've got the markdown option enabled, this is also getting exported into our content. For example we can see here that the link that we added in Figma is now being rendered as a markdown link in the spreadsheet. In between these square brackets you can see what the text for the link is, and immediately next to it in the regular brackets you can see what the URL is, or the website link is; that means we can basically now customize these things per locale. If we wanted to make a copy of these for the French one, let's say we wanted to actually change this in the French translation and we just open that up; we can make that link different, so we can do "/french" for the link, maybe we want to actually remove the bold formatting for this particular part, and we want to bold a different part. Maybe we want to bolt the word "Japan", so we can add the markdown syntax for the bold text around "Japan" instead.

We can do this for all of the different locales; for example, if we want to remove the bold heading for this translation, we can basically just change that, let's make it italics instead. We can also change just normal text as well, so if we wanted to remove the "Inc" from "Jiro Sushi", we can remove that, and let's do that for the Australian one. Any fields that you leave blank it will automatically just keep whatever's in the original design, they won't get overridden, but any that you populate per language will basically get overwritten from the other original text.

The other quick thing to note is as well, if you've already set up a preheader and subject line in your Emailify options, you can do that via the either the settings, if you click on the email you can put in some different settings, or if you go to the export, you can add a subject line and preheader in the export settings. If you were to click on "Export HTML" you can actually add this subject line and preheader here. I haven't done that yet, so that's why these fields are blank, but if you did that you would see the subject line and preheader here and you can actually create different languages for those subject lines and preheaders too. If we, for example, did a French subject line and a French preheader, we'll see in a second that this will also get imported into the Figma designs. I'm just going to keep it really simple for now, and I'm just going to save that.

I'm going to go back into my Figma design and click on the "Localize" button once again, and because I've now translated or added some translations to the Excel file I'm going to make sure that the "Import Markdown Formatting" toggle is set, because we exported the Excel spreadsheet using the markdown option, you definitely want to have the "Import Markdown Formatting" enabled as well, otherwise it's just going to import the text with the markdown formatting included, so it's going to include the asterisks and underlines and things like that instead of turning them into their markdown formatting visually. Let's do that now; all we need to do is drag in the Excel file into this little drop zone area with our "Import Markdown Formatting" toggling enabled, just let go of that, and you can see here that it's found three locales in the email that we want to import the content from.

I'm just going to click on the "Localize Selected Frames" button and we'll see that it's created a brand new page in our Figma file called "Email Translations" with a little time stamp. You can see here that we've got a copy of our original Figma frame, this is a copy of the frame that we originally exported, so that's just a reference left as is. Then it's created a locale for every translation that we added as well, we've got our Australian, German, French; and the cool thing is, as we saw before, we've actually changed some of this formatting. Instead of having this text here bold, we've moved that bold text and removed it from the "including" word and put it on "Japan". You'll remember that we also changed the hyperlink; you can see if I hover over this that the hyperlink has actually been modified to be "/french", so that's been changed. Then if we go over to this one, you'll remember that we changed the bold text to italics; that automatically made the text italic, and down here you'll remember that we removed the suffix from this little footer heading, so you can see over here it's got the "Inc" at the end, and this one has nothing at the end.

That's what that looks like there, and this is just a really easy way of using markdown to translate these emails with formatting. You can easily change the hyperlinks, you can easily change the formatting per translation, or you can just do it for the original translation as well. The other quick thing I'm just going to show you is how we also imported the subject line and preheader, so if you go to the "Export HTML" button and click on that, scroll down, and you can see here that even though we didn't have a subject line set originally, we did include it in our Excel spreadsheet just for the French translation. You can see here that the French subject line and French preheader text have also been imported; you can set that for all of your different emails if you want to translate the subject lines and preheader text as well, this can be a really easy way of doing it.

Once you're ready to go, you can export all of these emails at once from Figma to HTML. If we click on the "Export HTML" button, that's going to export our emails for us; give it one second, and now we can download as it file. I'm just going to save that to my desktop, double click on that, and if we open it up and drop the preview HTML into our browser, there we go; we've got our original email, we've got our French email, you can see here the different previews. We've got our link that we imported, you can see in the bottom left of the browser it's got the "/french" at the bottom, and then we've got our German version with the italic text, and finally this one with the text removed at the bottom. Of course, all of these are just inside of these folders, so these are all the actual individual emails. If you want to grab one to actually use, you can grab that file, the previous file is basically just loading in iFrames, or pointing to all these individual index files, but those are the ones you want to use when you go and send out the email.

I think we're going to leave it there for today; I hope this has been helpful if you've been wondering how to format your text using the Emailify localize feature. Now you can basically change your links per translation, translate your subject lines, preheaders, change any formatting that you need to change in a much more seamless way than having to manually do that when you re-import the content. Thank you for watching, I hope it improves your workflow if you're using the localization workflow in Emailify; thank you as always for watching, we'll be back soon with more Figma tutorials like this one very soon.