How to translate Figma text layers with XLIFF files using CopyDoc

Video Transcript

Today I'm going to be showing you how to localize or translate your Figma designs with XLIFF files using the CopyDoc Figma plugin.

The first thing we need to do, if you haven't already done so, is just jump into the Figma community and search for the word "CopyDoc" and you'll see the CopyDoc Figma plugin pop up. If you haven't already installed it, you can just click on the "Install" button on the right hand side here, and once it says "Installed", you're ready to go and we can jump back into our Figma file.

I'm just using a really simple banners template in Figma, and I basically want to translate this into a different language. The way I'm going to do that is just by firing up the Figma plugin by right clicking anywhere going down to "Plugins" and clicking on "CopyDoc Text Kit", and this is going to open up the Figma plugin that we just installed a minute ago.

I'm going to be ignoring these first options; I've got other videos that cover those features, but today we're just going to be looking at a brand new feature called "Localize Figma Text", and this is going to allow us to export and import XLIFF translation files to and from Figma. I'm just going to click on the "Export/Import XLIFF" button over here, and it's going to give me an option to select the source language; this is the language that's already inside of our Figma file. I'm just going to select "English" and I'm going to do the "Australia" variant, and for the target language, you can select the language that you want to translate the design to. In my case, I'm just going to select... let's go with Dutch. I'm going to do Dutch "NL" version and I'm going to translate the "English Australia" version currently to a new version in a moment for the "Dutch" language.

I'm going to keep the design references, this little check box just flags if you want to export images of all the frames just as a reference for your translator to see actually what they're translating alongside the file, and the second option we have is just choosing what XLIFF format you want. XLIFF is a standardized file format for specifically translating strings or translating words from a Figma design or a application to a different language. There's different variants of it; 2.0 is more modern, but not as supported in a lot of different translation tools. At the moment, I'm just going to stick with XLIFF 1.2, and once you've selected that you can go ahead and click on "Export XLIFF", and that's just going to export every single text layer in our file to an XLIFF file.

I'm going to click on "Download XLIFF Text", export and save that to my desktop, and I've just got a little zip file now that it's exported. I'm going to double click on the zip file, and I'm going to open that up just so we can see what's inside. You can see here we've got two different files, or two; one directory and one file. The first file is just the XLIFF file; that's the translation file with all of our text in it. Then we also have this "_frames" folder, which contains PNG images of all of our frames from the design, as a reference for the translator.

There's different software you can use to translate XLIFF files, but the simplest way would just be to open it up in a text editor or a code editor. I'm going to open it up in Visual Studio Code, just to show you what it looks like, and edit the translations in here. This is how we're going to localize and translate our Figma text to a different language using the XLIFF file in this case. You can see here, just to go through what's happening, each of these little <file> sections represent a different frame in your Figma design. You can see here each of them has an id; we've got 1:2, 1:6, 1:10, and these correlate directly with these frame ids here; they're in order of the frames, so you can basically match those up if you needed to see, for example, "1:14", you can go into your frames reference, go to 1:14, and that's visually representing all of the content inside of that frame.

Inside of each frame, or <file>, as it's called in an XLIFF file, you've got a translation unit for every bit of text; for example, in this particular use case we only have two bits of text per banner; we can see here we've got "Lotus Yoga Pants" and "Shop now", and we've got the same text here. In each translation unit there's two tags; there's a <source> tag and a <target> tag; the source tag has already been populated by the text from Figma that's automatically been populated. What you need to do in your translation from Figma is copy this text, or get your translator to translate that text into this <target> field, and again you can do this using different software, but for today I'm just going to use Visual Studio Code along with Google Translate. I'm just going to translate that from English to Dutch, so I'm going to jump back into my code and I'm just going to really quickly select all of those, and pop that into the <target> field, and then I'm also just going to translate the second bit of text we've got here; that's "Shop now"; I'm going to copy that, I'm going to highlight all of my "Shop now" text and just pop that into the translation <target> and hit save.

I've just saved that, I've translated all of the Figma frames, all of the Figma text inside of each frame to Dutch, and now I'm going to actually re-import that back into Figma. We can do that really quickly by jumping back into our Figma file and closing off this little pop-up clicking on the "Localize Figma Text" option again, and just clicking on the "Export/Import XLIFF" button, and this time instead of exporting the translation, we're going to import a translation. Underneath the text heading "Import translated text from XLIFF to Figma", I'm just going to click on my folder, jump down to the file I just saved, and I'm going to drag and drop that from finder on my desktop into this little box here, the drag and drop box. That's just loaded the XLIFF translation file into Figma, and Figma has read the file, and it's picked up on what translations are in there. You can see here, it's defaulted to the translated language of "Dutch", but we've also got access to our "Australian English" source translation there, too. If I want to translate this instantly, all I need to do is just confirm that all of the text layers are in there; it has picked up on 22 different text layers, and now I've got this button that I can click. I'm just going to click on the "Update Figma text layers translation" button; I'm going to click on that, and that has gone ahead and imported all of the text.

You can see here in our Figma design that all of those text layers have been updated with the translation, and it looks like it's translated all the Figma text layers you can see here. Obviously the text length wasn't quite right in this one, so I've just had to adjust that, but the rest are looking good; and if you've got the text set to auto height or auto width, that should translate a lot better; if you've got fixed width or fixed height Figma text layers, you're probably going to run into some issues with sizing, because different languages will be different lengths; but in this case it's not looking too bad.

We've just gone ahead and translated the text in this entire Figma design with one click, but the other thing I can do is just translate that straight back into English. I can click on the drop down again, and instead of loading in the "Dutch" text, I can load in the "English" text, and then I can click on the "Update Figma text layers to English translation" button and click on that, and you can see here it's just updated those 22 text layers back into English. It's it's really quick, it's very very efficient.

You can do this with as many files as you want, you could save out multiple translation files or localization XLIFF files from Figma; I could export another one another brand new one to "Danish" for example, I can click on that and just re-export it from Figma, and that will re-export all the text I can translate. I can save that into my desktop, and then I would go ahead and translate that Figma text into "Danish" and then I could again re-import that into the Figma file here using this little and drop area.

That's the the basic tutorial for how you can actually go ahead and localize and translate your text layers in Figma really easily using the CopyDoc Figma plugin, with this standardized XLIFF localization format or translation format. There's just a few caveats; as with any text layers in Figma, if you're using text layers that have a font that isn't installed on the user's machine, those text layers won't be able to be updated using the Figma plugin. For example, if this "Shop now" button or any of these text layers were in a font that wasn't installed, just like when you've got that font missing normally when you go to edit the text layer, you'll you'll get that little exclamation mark with a warning saying that the font needs to be installed or substituted, and you won't be able to edit it. Figma plugins also can't edit that font magically either, so the font does need to be installed. If you are importing translated text back into Figma and you're wondering why some of the layers aren't updating, there's a very good chance that the the text layer has a font that isn't installed on that machine; you can either send it to somebody who has the font installed and get them to run the Figma plugin, or you can get the font and install it and then re-run the Figma plugin yourself, and that will also finish the translation for you. That's just a really small gotcha that you might come across if you're using the plugin to translate your Figma text layers.

Aas I said, this is a standardized translation format, so you don't have to use something like a Visual Studio Code, or a code editor, or a text editor, in fact this is probably one of the slowest methods that you could do; but this is the method that I was just using just to show you actually what's inside of the XLIFF translation file, and just breaking down how it actually all works.

That's a rough tutorial of how you can go ahead and translate text in Figma, or localize your text in Figma in one click, essentially, once you've got the the text from Figma translated. If you want to localize or translate your website Figma designs, translate your application Figma designs, just localize or translate a banner set in Figma, or something really simple like this, and you have a team of translators, or you just want to translate it yourself like I was doing using Google Translate and then re-importing that into Figma, this is probably the most efficient way that you can go about it. You don't need a any web application, you don't need to integrate it with any other software, it's really as simple as importing and exporting XLIFF files via the Figma plugin. For those of you who prefer a simpler approach, rather than syncing up things and having API keys to deal with, this is an alternative method that might fit your workflow a bit better for localizing Figma text, or translating Figma text.

I hope you have some success with it, if you've been looking to translate your FIgma designs or work with translation software and have that play nicely with your Figma designs; then give this a go, give the CopyDoc Figma plugin a go, and I hope you and your team have some success with it. That's all from me today, and I'll be back very soon with more Figma tutorials just like this one; stay tuned for those, and thanks again for watching.