How to translate email designs in Figma with the Lokalise API using Emailify

Video Transcript

Today I'm going to be showing you how to translate your email designs using the Lokalise platform in combination with Figma. I'm going to go through this step by step with you, and if you follow along we'll get there in the end, as there's a few things to go through, so let's get started.

The first thing we need to do is go to Figma and just open up a brand new Figma file and then go to the "Resources" icon up the top in the header here and just search for the word "Emailify", and you'll see the Emailify Figma plugin pop-up. All you need to do is either click on the "Run" button here or you can save the Figma plugin to your Figma plugins list by clicking on this little three dots "More options" icon and you can click on "Save Figma plugin" and that's just going to save the Figma plugin for easy access later. If you have already installed that or you just want to run it you can either click that "Run" button or if you've saved it, you can right click anywhere on the page go down to "Plugins" go to "Saved plugins" and then just click on the "Emailify" Figma plugin; and that's just going to start up the Figma plugin that we just saved a second ago.

If you haven't used this Figma plugin before, there's some other Figma tutorials on the YouTube channel with how to design the emails, but for today I'm just going to do a really simple example. I'm just going to call this one "Jiro eDM" and I'm going to call that just as a temporary name. I'm going to click on the "Add new Emailify container" button; this is basically just going to add a new Emailify frame and this just allows us to add content to the email. I can add things like these components and I can add pretty much anything I want from this list, or I can add custom elements down here. For today, we're just going to keep it really, really simple just to show you how to actually translate these designs in a moment. I'm just going to leave it there, I'm going to keep it really simple and what we want to do today is translate this design into a few different languages; and the way we can do that is by clicking on the "Localize" button in the Emailify Figma plugin header.

If you go ahead and click on "Localize" now, the default option is to localize the file via an Excel spreadsheet; there's another video on the YouTube channel that goes through that process, but for today I'm actually going to be focusing on the Lokalise API; this is the API for this service that we're just looking at a moment ago, this Lokalise platform. Instead of using Excel I'm going to click on the "Lokalise API" option and that's going to bring up a couple of different fields for me; to get these fields we just need to have a Lokalise account. If you haven't already done so, you can click on this "Try it free" button on the Lokalise website and sign up for a free account; that's a 14 day trial.

I've already signed up for Lokalise, so if you've signed up and you've logged in you should come to a screen that looks like this, and it'll ask you to create your first project. We can create our project by clicking on the get started link and you'll see this add project screen come up. What we want to do is just give it a name, so we can say "Email translations for Jiro eDM" and you can choose a base language; it just defaults to "English", so I'm just going to leave it as that, and then you can select the target languages that you want. For example, if you want to translate it into French, you want to translate it into Dutch, and let's say Korean; we can add those as our target languages, so these are languages we're going to translate the original language into. Whatever design you're using, whatever language you're using in your designs, select that as the base language and then any extra ones just put them in there and then we basically want to leave it as "Software Localization", and click "Proceed".

Once that loads up, you'll see this brand new screen which is now your project. You've got the project loaded up and what we can do now is it's giving us the option to add content via all these different methods, but we don't actually want to do any of these, we want Figma to create this content for us because we've already got it in our design, we've already got this text. What we're going to do is get this text into Lokalise automatically, and the way we do that is by using the Lokalise API. As you noticed in the Figma plugin there's two fields it's asking us for the "Project ID"; to get the Project ID, we actually just copy that from the URL; on our project page up here just grab that whole ID after the "/project/", you want to grab that ID, copy it and then paste that into the "Project ID" field in your Figma plugin.

I've just pasted that in there, and then we also need the "API Token"; you can click on that link and that'll bring you into the settings page for your profile, and you'll see this "API Tokens" option on the left, and all you need to do is go ahead and click on this "Generate a token" link; if you click on "Generate a token" and select the token type as "Read and write access to your projects" and then we're going to click on "Generate" and that's going to give us a brand new API key that we can also copy. I'm going to copy this token, I'm going to highlight that, I'm going to copy it, and I'm going to copy that token again into the "API Token" field in the Figma plugin Lokalise options; I'm going to paste that in and that should automatically load up our project.

You can see here it's loaded up the Lokalise project, we can see the project name over here; "Email translations for Jiro eDM", which is exactly what we called it in our project over here and so this by itself this doesn't do anything, it's just connected us to the project. We've got that loaded up now and you can see down here it's loaded in all of our languages that's associated with the project; what we want to do is we want to actually upload this email into Lokalise, and we do that by clicking on the email frame, so if you've got multiple emails you'll see multiple items here we've just got one for today. I've just checked that email, and then I'm going to go ahead and click on this "Upload" button; and it's got English as the base language because that's our base language that we set in the project. I'm just going to go ahead and click on "Upload" and that's basically going to upload all of the text content and screenshots of any emails that you've selected over on the left hand side here.

It's just telling us that it's uploaded the text from one email until into Lokalise; that should be done now. Now if we switch back into our browser, or you can click on this link here which will open up the project link in your browser. I've already got it open, so I'm just going to refresh that page now and you can see here after I've refreshed it, we've gone from having no content in Lokalise to having all of our text content from Figma now in Lokalise. Just to go through what happened there, we've uploaded the design from Figma; this is the design we had and so basically any text layers have been exported as individual text keys, as they call them in Lokalise, directly from the Figma plugin. We haven't had to manually add this, it has just synced it directly from Figma into Lokalise, and you can also see here we've got screenshots. If you click on the screenshots menu item, you'll actually be able to check out what the screenshot is. If you've got someone translating this on your behalf, it'll be a bit easier for them to actually see what each bit of text relates to; they can compare the screenshots with the actual text.

For now we're just going to stay on the "Editor" screen, and what we can do is now we can actually start translating this content in Lokalise. The way we do that is just by editing these fields; if you click on the "Dutch" field which is currently empty what we can do is we can take that initial bit of text, so I'm going to copy the English one and I'm going to put that into Google Translate. If we do Google Translate, I'll just do it to French first; if we copy that translation and click on the French field paste that in and do the same thing for Dutch; if we change this now to Dutch and copy that; we can copy that one and paste that in and finally we'll just do the Korean translation as well; if we do Korean, pop that in and copy that, and that'll be the last one that we'll add in. This is just one text layer in Figma, you can obviously go through and translate all of them; I'm not going to do them all today, I'm just going to show you an example of doing one.

Once we're happy with that, and we know that we actually want to now import that back into Figma, all we need to do is jump back into the Figma plugin; we've already got our page set up with the Lokalise API Token and the Lokalise Project ID. Instead of clicking "Upload", this time we're actually just going to click on the "Import Translations" button; I'm going to click on that button now and you'll see what happens. If I click "Import Translations", that's going to load up any translations that exist and import them into our Figma file. To go through again what just happened there, we were on page one; page one is where our original Emailify design is, and we clicked on "Import Translations", and now if we jump to this second page, the Figma plugin has basically gone ahead and created a brand new page with a little timestamp so you can see when it was imported. It's got a little "Translations" flag so you know that this page has been translated, and you can see here on the left we've got a copy of our original frame; this is the original frame in Figma just as a reference, and then we've basically got every locale or every language that we have in Lokalise over here is now also being imported as a frame itself.

Each frame is its own frame per language and that's been pulled in; you can see the translations that we just added from Google Translate and added into the Lokalise platform are all being pulled in. Those are all being replaced in Figma automatically, so we didn't have to do any work there it just automatically imported them which is really cool, and of course now that we've actually got these in here you can see that if we go to the "Preview" button in the Figma plugin, these are now fully ready to go, HTML exportable emails. We can actually export all of these emails at once; if we wanted to export all of these languages in one go, you can easily do that just by using the "Export HTML" button and clicking on "Export", and that's basically what it looks like. You can see all the different languages looking really good and if we had actually translated all of the text, these would all be fully localized HTML emails that you'd now be able to send out.

That's basically what that looks like there, and as I said, you can go through and update this. If you wanted to actually update these these bits of text again, just go back to your original design and if we wanted to change this "Book Now" label, so we can say "Contact Us" and you want to upload that again, you just click on the "Upload" button and wait for that to finish uploading. Once it says it's finished we can jump back into the browser in just a moment, it's just uploading the screenshot again as well, which we'll see in a second. If you refresh that page in a second, you should see this update; now you can see "Book Now" has been changed to "Contact Us" and that's just exactly what we wanted. If we go back to screenshots now, you can see that the screenshot has been updated, too. That's exactly as you'd expect, and if we jump back into the editor you can see what that looks like there.

If we now import that translation one more time; for example, if we decided we don't like that particular phrasing, we can change it to "Get In Touch" for example, this is the English variant, and you'll see here if we now import that translation again, it's going to import it to a brand new page once again, as you're basically versioning these as you go in Figma. If we just close off the Figma plugin for a moment and zoom in, you can see that over here where the original one had "Contact Us" because that's what we exported from Figma, the English one's actually been updated with "Get In Touch"; it's just kept the copy of the original one in Figma, but you can also see what the updated copy for the original language looks like next to it as well.

That's basically what it looks like; it's a very, very simple process. If you're already using Lokalise, this is a really handy integration that you can go ahead and use, or if you're interested in translating your email designs in Figma, perhaps this is another option if you don't want to use the Excel spreadsheet method, and you want to have a bit more of a web-based platform, this is definitely a cool option that a bunch of people have been requesting have been asking for an integration. This has just come out today, so it's very new; everything should be working as expected, but if you have any requests or any questions, please get in touch, and more than happy to help, as always.

That's going to do it for today; I'll keep it pretty simple, as I said, if you want to get more detail about how to actually design these emails and customize them, there's a whole bunch of other videos on the YouTube channel if you just go to the "Emailify" playlist, there'll be a bunch of other Figma tutorials that you can look through on YouTube, but that's going to be it for today. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.