How to easily localize and translate any Figma designs using CopyDoc

Video Transcript

Today I’m going to be showing you how to easily localize your Figma designs and translate them into multiple languages just using a simple spreadsheet.

To get started we’re just going to jump into the Figma Community and search for a Figma plugin called CopyDoc and if you go to the “Plugins” tab you’ll see “CopyDoc” pop up; just go ahead and click on the “Install” button on the right hand side, and then you’ll be ready to go.

I’m just jumping back into my Figma file now, and today I’m just going to be translating a single Figma frame. I just want to translate this screen of my “Movies” app design. To run the Figma plugin, we just right click anywhere, go down to “Plugins” and then click on the “CopyDoc” Figma plugin, and that’s just going to fire up the Figma plugin that we just installed a moment ago. Once that runs, all we need to do is head down to this option called “Localize Figma Frames”, and this is going to allow us to export and import translations from an Excel spreadsheet file.

To get started, all we have to do is click on this “Localize Frames” button, and that’s going to load up all of the frames on your current Figma page. As I said, I only have one frame on this page, if you had more you would see more pop-up; and you could select which frames you want to export for localization, but today I’m just going to be exporting one. Now that we’ve opened up this feature, all we need to do is select the frame we want and add some locales to. I’m just going to add a few, you can just start typing the locale into the search field here, so I might do French, Japanese and German, for example; and then all you need to do is click on the “Export to Excel Spreadsheet” button. I’m going to click on that, and that’s going to export my frame with placeholders for these locales. I’m just going to save that to my desktop, click “Save” and then what I can do is just jump back to my desktop, open up the zip file and then open up the exported Excel spreadsheet file in Excel or another spreadsheet tool that you prefer.

Today I’m just going to be using Microsoft Excel. I’ll just zoom in a little bit so you can see what that looks like, and you can see here that the Excel file that’s been exported from Figma contains all of the text that’s in our Figma design. It’s being sorted visually by where it appears in the design; if we jump back into our Figma file and then compare it to the spreadsheet, you can see “Melbourne, Australia” is at the top, then “Coming Soon”, then “13”, “14”, “Action”, “Sci-Fi Action”, these are the labels, here the reviews; it’s basically going from top left to bottom right, so that’s how the text is being ordered.

In order to translate this into multiple languages, you can see that we’ve got our placeholder translations here; we’ve got French, Japanese and German. These are the placeholder locales that we included in the Figma plugin earlier, and all you need to do now is basically go through those rows and those columns and add the translations for each of those languages. I’ve prepared a spreadsheet earlier just to speed up the process for this video; you can see here in the exact same spreadsheet that I exported earlier with those same locales I’ve gone through and I’ve translated all of the text from the original design into these three different locales. You’ll notice that some of these are missing, so I’ve got a few different fields in different languages that haven’t been translated; the reason for that is that the translation version and the original version are basically the same, so that’s just something worth worth noting if you do leave any of the column items blank those will essentially just be unchanged in the design. We’ll see what that looks like in just a moment.

Now that I’ve got my finalized translation file; once you’ve gone through yours and translated all these different columns, to then import that back into Figma, all we need to do is jump back into our Figma plugin, and if you if you’ve already closed it just jump back into the “Localize Frames” option and down here you’ll see a little drag and drop area for your Excel file. All I’m going to do is I’m going to jump back to my desktop, I’m going to grab the pre-translated file that I completed earlier, and I’m going to drag and drop that Excel file directly into the Figma plugin down here; I’m going to let go of that now, and that’s going to load in the spreadsheet. You can see here that it’s found three different locales for this “Movies” frame; if you had more frames, again, you could select which ones you want to import, but today I’ve only got one. I’m going to leave that checked, and I’m just going to click on the “Localize Selected Frames” button; I’m going to click that now, and what this is going to do is it’s actually going to load in those translations from the spreadsheet directly into Figma.

It’s telling me that it has just imported one translation, so I’m going to go ahead and close off the Figma plugin now because we don’t really need it, and I’m just going to show you what that’s actually gone ahead and done. The easiest overview here is you can see that it’s imported or created four different Figma frames, and these frames have been created on a totally new page. What it’s done is it’s found the translated frame which was called “Movies”, it’s created a brand new Figma page for that frame, and you can see here it’s called the “Translations” frame and got a timestamp of when that was created. What it’s done is it’s copied or cloned this original frame into a brand new page; you can see here this is the copy of the original frame, so that’s our original language and then next to that we’ve got all of the locales that we imported from the spreadsheet. You can see we’ve got our French one, we’ve got our Japanese one, and we’ve got our German one. If I zoom in a bit more, you can see that these have all been translated based on what we imported in the spreadsheet; you can see down here the menu items have been renamed, you can see that we’ve got different titles with different names, and that’s basically all been translated as you’d expect. That’s what it looks like, it’s essentially a one-click process to import those translations and localizations in Figma.

It’s worth noting sometimes with the Japanese characters the font for some reason doesn’t load straight away in Figma; if you double click on the layers where it’s not showing up, that will fix it. Usually it doesn’t happen, but that’s just something to keep in mind with that specific language, it seems to be an issue with Figma. That’s fine, but you can see here that the German translation and French translation are all looking really good. That’s a really quick way of translating your FIgma app design or your Figma website designs or any Figma designs really; any copy that you have in Figma into multiple localizations and language translations. That way you don’t have to go through and manually copy/paste all these frames, copy/paste all the text into the frames and worry about all the positioning and things like that, you can just import it into Figma directly from the spreadsheet.

You can use this for anything really, as I mentioned, you could use it for a banner campaign, social media campaigns, emails, websites; anything really that requires localization, which is many things when it comes to design. The CopyDoc plugin is very agnostic to the type of design. you can essentially just export any Figma frames that you like to the spreadsheet, translate them, import them back into Figma and keep going like that.

The other thing I should mention is if we just re-run the Figma plugin again and jump back to our app, if you did want to make changes to that spreadsheet and re-import it, you can totally do that. You just click on the “Localize Frames” option again, if we pretend that this Excel sheet has been updated since with new translations, and we drag that into the Figma plugin once more; again, what it’s going to do is load that up, just click on “Localize Selected Frames”, and you’ll see here on the left hand side that it’s created a brand new page. Again, it hasn’t messed around with your existing page that it created earlier, it creates a brand new one, and that way it doesn’t overwrite any work that you might have done in the translation before. If this one is more up to date, you can just get rid of the old one if you want, or keep it there as an archive; it’s totally up to you.

That’s it, that’s the whole process; you can apply this localization process to your own Figma designs and translations, or anything that you’ve been wanting to localize in Figma. This Figma plugin is going to hopefully make that a whole bunch easier for you and save a heap of time and effort. Thank you as always for watching, and we’ll be back soon with more Figma tutorials just like this one very soon.