How to translate HTML email designs with localization in Figma using Emailify

Video Transcript

Today I’m going to be showing you how to translate and localize your email designs from Figma into HTML emails using the Emailify Figma plugin.

The first thing we need to do is just go to the Figma Community and search for the term “Emailify”, and under the “Plugins” tab you’ll see Emailify pop up; just go ahead and click on the “Install” button and then you’ll be ready to go. I’m just going to jump back into my Figma file, I’m going to right click anywhere, go down to “Plugins” and click on “Emailify”, and that’s just going to run the Figma plugin that we just installed.

I’ve already got an email designed using Emailify; I’ve used all these components here just to create this simple email design. I’m not going to be going through how to design the emails in this Figma tutorial, if you’re interested in that we have another Figma tutorial on our YouTube channel that I’d recommend checking out first, but otherwise I’m just going to assume that you’ve already got an email design ready to go.

In my case, this is my original email that I designed using the components from the Emailify Figma plugin, and what I’ve done is I’ve just copied this entire frame onto a brand new page just called “Copied”. You can see here that it’s pasted the frame and all of the children are now instances; these are instances of the original Figma components, and that’s going to come in handy later, because it means if we translate this frame here, which we’re going to do in a moment, it means we can go back to our original frame with these components and we can actually change the styles of all these different components and have those changes roll out across all of our translated emails as well.

To get started with the translation and localization process of the email designs, all we need to do is click on this “Localize” button in the Figma plugin header; I’ve just clicked on that, and you can see here I’ve got a few locales that I’ve already saved from the last time that I ran the Figma plugin. You can go ahead and add your own, so you can autocomplete this list if you wanted to add a “English (Australia)” version for some slang translations you could do that, you can add basically any translation that you want that comes in this pre pre-filled list. You can also add your own custom ones, so you can say “Custom Locale”, or if you have like a specific variant, you can say “Variant 2”, or something like that; and these will all get included in an Excel spreadsheet that we’re going to export in a moment.

Today, I’m just going to leave it as those original 4, and I’m going to make sure that my email is selected; if you have multiple emails on your page you can export multiple into multiple locales, but for today I’m just going to be exporting this one to these four locales. All you need to do is click on the “Export to Excel Spreadsheet” button, so I’m going to do that now and this is going to export all of the text content from our design in Figma out to an Excel spreadsheet file. I’ve just exported that to my desktop, and I’m going to click on that zip file and unzip it, and you can see here it’s exported a Excel spreadsheet with the name of my frame.

I’m just going to go ahead and open that up with Excel; you could open this up in Google Sheets or a different program if you wanted to as well, but for today I’m just going to be using Excel, and that’s just opening up now. I also have a pre-translated file, so we can compare the two and if we have a look here at the pre-translated one, basically what I’ve done is I’ve gone through and I’ve translated all of these locales. When the locals get exported, you can basically check what those look like here, so if we go back to our original one this is what the original export looks like; the original export contains all of the text layers from our email and that’s under the “figma_text” column, and then it also exports blank columns for any locales that you’ve selected; in this case it’s “French”, “German”, “Japanese” and “Spanish”. These are all empty, so it’s up to you to basically go through and translate those into these different columns. You can just leave those first two columns alone, don’t change anything in there, don’t delete them, as we’ll need these in there when we re-import these translations back into Figma in a moment.

I’m just going to close off the original one and open up my pre-translated one; this is the Excel file that I went through earlier, exactly the same export process, except I’ve now gone ahead and translated all of these columns into the different languages. They’re all pre-populated now based on some work I’ve done earlier, you’ll notice I’ve also left the bottom two rows empty, and that’s because I don’t want this address to be translated, I just want to leave it as it is. Basically, any rows that you leave empty in any of these locale translation columns, those will just automatically be left alone as the original Figma text here, so you can just fall back to those if you don’t want to translate any layers.

Okay, now that I’ve translated my email text in the Excel spreadsheet here, what I’m going to do is I’m going to jump back into Figma and you’ll notice down here in the bottom section of the “Localize” feature, there’s a “click or drag and drop” box; you can go ahead and drop in your updated Excel spreadsheet file. I’m just going to grab that file, drag and drop it from my desktop into the Figma plugin, that’s going to load up the spreadsheet and it’s going to let if it finds any emails that have been translated, and how many locales have been found. In our case, we only we only exported one email; it’s found one email in the spreadsheet with four different translations, and so what we can do is we can just confirm we want to import that by keeping it checked, and then all you need to do is click on this “Localize Selected Frames” button. I’m going to do that now, and that’s just loaded up all of the translations from our Excel spreadsheet back into Figma.

Let’s run through what that’s just done together; if you remember, we had our instance that we exported to the spreadsheet, we opened that spreadsheet, we edited it and added some translations in there. What the Figma plugin has done is it’s read that Excel spreadsheet, and it’s automatically duplicated those frames into translated versions localized versions with the text layers that we specified in that spreadsheet. You can see here what it’s done is it’s created a brand new page, it hasn’t modified the original design, it’s just created a copy of the frame and then created another copy of each frame with those translations that you specified in the spreadsheet. It’s got this little translations box in the page name, and then it’s adding in a timestamp to tell you when that page was imported.

Then we’ve got our designs right here; those are automatically added for us, and you can see that all of the text has been translated directly as we specified in the Excel spreadsheet. Because we’re using auto layout on basically all these design elements, the button widths and the text widths and heights and things like that automatically fit to re-adjust with that updated copy. The other neat thing is that you’ll notice inside of this layer here, which is actually an image layer, because we originally added a text layer inside of the image; if we jump back to our original component you can see in here we’ve got a text layer that’s just kind of floating around inside of that frame. We can move that around, and that will update in the components over here as well because they’re instances, but those also get updated because they’re just text layers, so that even though they get exported as images, the text inside of the images also get updated, which is really cool.

As I mentioned, because these are instances of that original component, so if we go back to our original design with the component layers; if I wanted to change these buttons, for example, I can do that. I can just select that fill, select a new fill, I can change the text color, and if I now swap back into my translations, you’ll see here that all of the translations have also been reflected with that design update, because these are instances of that component. It’s a really cool way to roll out not only translation changes, but design changes to a bunch of translations after you’ve already imported the localizations into Figma.

If you decide you want to update those translations again, you can go ahead and export that page again or you can just update the file you originally exported and just drag that back in. If we drag it back in, I’m just going to drag the same file back in, and basically that’s found the same frame. I’m just going to click “Localize” again, and you can see here what it’s done is it hasn’t modified our original translation page, it’s just created a brand new page with a new timestamp with brand new instances, too. You could either delete that page if you don’t need it anymore or you can just keep them both, and keep them as versioned translations if you prefer to do that as well. The cool thing about doing it this way is you can actually then tweak the design if you need to in Figma; so we can basically override these per translation if we wanted to. You could have different color buttons for different translations or different things like that, you could totally do as instance overrides.

The best part of this process really, at the end of the day, is now that we’ve translated these into multiple localized Emailify frames, these are basically production ready because they’re based off of our original Emailify design. What we can do is we can now export these localized Figma designs into real HTML, production ready HTML, and all we need to do to make that happen is just click on the “Export HTML” button in the Emailify header, and then just select all of the emails that you want to export. I’m just going to export all of them, and then what I’m going to do is just select the “HTML” option. If you’re using Klaviyo or MailChimp, you can select a different platform, but I’m just going to keep it simple today and keep it on “HTML”. Then I’m going to click on the “Export to HTML” button; I’ve just clicked that and this is now going to go through and export those five emails. There are four translated emails and the copy of the original language email that was also automatically copied into the new page when we imported that spreadsheet.

That’s just finished up, I’m just going to click on the “Download your .zip file” button and save that to my desktop, jump back to my desktop and unzip that exported file, and inside of this folder you’ll see that we’ve got our translated emails along with all of their images. We can see these all at once just by opening up a browser and dropping in the “previews.html” file, and that basically lets us scroll through all of the emails that we just exported. You can see we’ve got all of our locales, we’ve got our specific colors for those different instance overrides that we added. You can see that the images also have the translated text baked into them, even though this is still real text, and again different variant, different translation; that’s the German localization with the different color button, and then the rest are just the original style, but still in rich text, and the image baked in as well.

Finally, you’ll notice that because we left the bottom two rows out of the spreadsheet and didn’t update those in any of the locale columns, that’s just left it as the original text. We just got our address left in there as per the original version, so that’s just worth noting as well if you want to exclude any text content, just leave it blank and that will automatically fall back when it translates the text layers. That’s basically it, you could now take these emails, these are production ready translations, ready to go. You can individually see them all here and do whatever you need to with them, basically these are all ready to go.

Now we’re done with the HTML previews I’ll just close that off, jump back into Figma, and the last thing I was just going to mention is if you need to re-export them just click on this “Go back” button and that will bring up the email frames option again, where you can select different frames and export those into different locales as many times as you want. That’s basically it; I just wanted to run through the whole process end to end, so there wasn’t any confusion with how it works and just give you a real good demo of how you can use this in combination with the instances and the original component to create a really nice localization process directly in Figma, or translation process, if you’re exporting HTML emails and need to do so in multiple languages, multiple translations; the “Localize” feature that’s just dropped in the Emailify Figma plugin is probably going to be your best bet for a really seamless localization process inside of Figma before you export your emails from Figma to HTML.

Once again, thank you as always for watching, and I hope if you’ve been trying to streamline your localization process with your email designs, as I know a lot of you have, I hope that this new feature really helps out with your localization/translation workflow in Figma, and removes some of those barriers that I know a lot of people have been running into with trying to manage those different localized versions of the emails. Until next time, thank you once again for watching, and we’ll be back soon with more Figma tutorials just like this one very soon.