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

Video Transcript

Today I’m going to be showing you a tutorial on how to localize your HTML email designs with the Crowdin platform using the Emailify Figma plugin. To get started, all we need to do is go to our Figma file. If you click on the little “Resources” icon up here and then search for Emailify, under the Figma plugins tab, if you click on the Emailify result, you can run the Figma plugin by either clicking on this “Run” button here, or I’d recommend clicking on the “Save” icon, which will save it to your Figma plugins list for easy access later.

I’ve already clicked on that 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 the Emailify item. That’s going to run the Figma plugin we saved a second ago. You can see here that the Figma plugin has just loaded up. If you’re new to the Figma plugin, it helps you design HTML emails in Figma, which you can then export to production-ready HTML with one click.

In this case, I just grabbed a template. By default, if you’re running an empty Figma file, it’ll look like this and ask you to add a new blank Emailify frame. For today’s tutorial, I’ve just gone to the browse Figma templates and grabbed this free Airbnb template, which is Emailify-ready, and duplicated that into my Figma account.

I’m not going to be showing you all of the design features in the Figma plugin today. If you’re interested in that, you can check out the documentation site or some of the other YouTube tutorials on the channel. You can go through and add components, which you can totally customize in Figma as you would expect. I’m going to be showing you how to localize this design that already exists, rather than designing it from scratch.

We can see here that we’ve got our design basically ready to go. If we preview it, we can see the HTML content, and that’s all looking really good. Now that we’ve finished the design, the last step is localizing or translating this text content, and we’re going to do that by integrating it with the Crowdin platform.

Crowdin.com is the service we’re going to use today. You just need to create an account there. Then, we want to click on the “Create Project” button. If you don’t have any projects, just click on “Create Project,” or if you want to create a new project, this will take you to the “Create Crowdin Project” screen. I’m going to call this “Airbnb Emailify” and put that in there. We want to make sure this is a private project, and importantly, we want to check the checkbox that says “String-based project.” Click that so it’s going to work with strings instead of files.

For the source language, our email design is in English, so we’re just going to keep that as English. Then in this little list here, you can go through and check your target languages. These are the languages you want to translate your email into. I’m just going to select a couple here for today’s example. I’ll do Dutch and French. You can add as many as you need. Today, I’ll keep it simple and just have these two.

Once you’ve got that set up, go ahead and click on “Create Project.” That’s going to create a brand-new Crowdin project under your account. You can see it’s created the project successfully. Under the projects list on the left-hand side, you can see we’ve now got Airbnb Emailify created, and it’s ready to go.

Now, we want to go back to the Figma plugin and click on this “Localize” button in the header. Click on “Localize,” and we want to change this setting on the left from “Excel” to “Crowdin API.” Under the platforms category, just click on the Crowdin API option, and it’s going to ask you for your API token. If you click on that API token link, it will bring you to your API token settings page if you’re logged into Crowdin.

Under the API heading in the account settings page, we want to go down under “Personal Access Tokens” and click on the “New Token” button. I’m going to call the token “Emailify” so we know what it is. Under Scopes, you basically want to add the permissions that the Figma plugin is going to need to translate and read the content.

We want to go down to the projects section and click on projects. We can just do “Read Only” for that one. Then, go down to translations and set that to “Read and Write,” because we want to be able to read and write those from the plugin. For screenshots, set that to “Read and Write” as well, since we’re going to upload some screenshots. We want to add the source files and strings with “Read and Write” as well, since these are the main elements we’re going to be updating.

Once you’ve done that, click on the “Create” button. You can see it’s generated our new personal access token. You want to save this somewhere safe because you won’t be able to see it again under this particular token. Copy that to your clipboard, save it somewhere safe, and paste it into the Figma plugin. I’m just going to paste that into the API token field in the Figma plugin. That’s going to automatically authenticate with Crowdin and load up my Crowdin projects.

In the top right of the Figma plugin, there’s a select box that allows us to select our project name. If you’ve got multiple projects, those will all show up, but I’ve only got one project at the moment, so I’ll keep that one selected. It’s also worth noting that you should create a new Crowdin project for every new Figma file you create. The key is going to get saved to the current Figma page, so if you create a new page, you’ll have to re-paste that key in.

Now that that’s all set, we can upload our email. Go ahead and click on the email template. You might have multiple emails, but in this case, I’ve just got one. Select the emails you want to upload into the Crowdin platform and click on the “Upload” button. This will grab all of the text content from your email design and upload all of these text strings into the Crowdin platform as the source content.

We’ll just wait for that to finish. It’s also going to upload the screenshot of the email, and you can see it’s uploaded text from our Figma email into Crowdin. Now that that’s confirmed, go back to the project. The easiest way to do that is to click on the “View Project in Browser” link from the Figma plugin, and that will open up the project directly in your browser.

I’ve refreshed the strings page, and you can see on the right-hand side that all the strings from our content have been uploaded into the platform. You can see we’ve got “Level up your checkouts,” which is the header, “Checkout instructions,” and all the way down to the bottom where we’ve got our unsubscribe and view-in-browser text as well.

The next step is to translate some of these strings. Go back to the dashboard and click on the localization you want to start translating. I’m going to click on the Dutch one and translate a couple of strings to show you how it works. Find the string you want to translate, go into the translation box, and translate that. You can use Google Translate or a professional translator.

Once you’ve translated the string, save it. I’ll save that one there. Now, I’ll go back and do the exact same thing for the French one. I’ll grab the “Level up your checkouts” string again, translate it into French, and paste it into Crowdin. I’ll do the same for this intro paragraph as well.

Once you’ve translated the content, go back to the homepage, and now we’re going to import that content into Figma. Make sure you’re on the original page you exported the design from, and click on the “Import Translations” button.

Once that finishes, you’ll see a brand-new page in your Figma file. You can see there’s a new translations page with a timestamp, and it’s taken a copy of our original frame in English and added two new frames with the French and Dutch translations. Now, you can see the translation of the heading has been imported, and this body copy has also been imported. The same thing has happened for the Dutch one.

If you want to make updates to this content, for example, if we go back to our original page and then jump in here and change this heading, I’m just going to change this content to say “New Heading” instead. Again, if we go back into the localized panel, we’ve already got our Crowdin details added. All we’re going to do is click on the upload button, and this is going to load the text from Figma, upload that into Crowdin.

If the content has been changed, we can see it’s just finished uploading that text. Now, if we go back to the strings page in our project, you can see the source string has been updated to “New Heading.” That’s been changed in here, and it’s just updated the content for anyone using the platform. This isn’t going to modify anything you’ve added in your translations. All translations are only ever done in Crowdin. The stuff that we went through in here will never be overridden or uploaded from the plugin itself. The Figma plugin will always just read the translation content that you’ve made from the platform, but it always goes from Figma into Crowdin and then Crowdin back into Figma. That’s the cycle based on the locals that you’ve added.

That’s basically it. I just wanted to run through this tutorial with you. If you’re using the Crowdin platform, this is the quickest way you can go about importing the content and exporting the content to and from Figma with Crowdin, automatically automating some of that localization process for multiple emails.

Once you’re happy with the emails, to export them, all you need to do is click on this “Export HTML” button. That’s going to allow you to export all of your translated emails with one click to HTML. You can select the platform you want to export it for or just export it to an HTML zip package. Click on “Export to HTML,” and that’s going to automatically generate the code and export all the images for each of those translated emails from your translated email IFFI page that we just imported the content from via Crowdin.

That’s basically it. You can see here it’s just finishing up that last email, and then we’ll get the option to download it. You can take that zip file, do whatever you want with it, or use one of the other platform integration options to upload your emails. We’ll leave it there for today. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.