This probably the nichest of niche blogposts, but if anyone finds themselves in this situation, here’s some help.
I wanted to translate an entire Figma document to another language. The document contains about 20 screens with a moderate amount of text layers on every screen.
The use case was to do a usability test in French for mockups that were made in English.
I found a plugin that helped with translating in a good way called Translator. What I want is to be able to select everything on a page and run the plugin; the plugin should then walk through every layer and provide a translation. That’s how this plugin works and it does wonders.
You can select an individual layer of text, an artboard or multiple artboards. The plugin doesn’t care and does the job.
Unfortunately once you do this a few tims you will come across an error; the plugin won’t return any results anymore. You’ll be greeted by an infinite spinner. This is because the plugin relies on an old Google translate API with a rate limit. If you hit it too hard it will just lock you out for a while. I think it’s the v1 API where the URL starts with https://translate.googleapis.com/translate_a/ .
(There’s another plugin called Translate that uses Yandex Translate which I tried but the plugin is no good in interaction terms.)
Now, there’s another plugin out there that works similarly to the aforementioned Translator plugin called Language Tester.
Creator yuanqing maintains a monorepo with all his plugins (licensed as MIT, awesome!) and also created a framework to make it easier to create figma plugins (here).
After some wrangling around with yarn and the instructions I managed to set up a local build process for all his plugins.
Using yarn run build I could now build all the plugins in batch.
I then checked how I could change the plugin I care about: figma-language-tester.
If you want to do the same, go to src/utilities/translate-async.ts . Here you’ll find the code that makes the call to the Google API.
I then spent some time figuring out what to change. Check out the gist here to see the code changes. There’s 3 main changes:
- Use Google Translate API v2 instead of (what I presume is) v1; since this gives a different result object, we need to tweak a bit of the response code
- Within this, provide a Google Translate API key, which I left out (get your own via the Google Cloud console)
- Provide a CORS server to route the request to, which then forwards it to Google Translate (avoiding CORS errors)
- which I left out of the code (check out this SO answer and follow the Heroku instructions to learn more)
- Do a bit of parsing on the result to get the right strings in the right places
FYI, the old Google v1 works like this:
https://translate.googleapis.com/translate_a/single?sl=auto&tl=nl&dt=t&q=bananareturns
[[["banaan","banaan",null,null,5]
]
,null,"nl",null,null,null,0.52156866,[]
,[["nl","so"]
,null,[0.52156866,0.4]
,["nl","so"]
]
]Whereas the new one would return a more decent object like:
{
"data": {
"translations": [
{
"translatedText": "Banana",
"detectedSourceLanguage": "nl"
}
]
}
}I installed this plugin locally as a development plugin, and then did all the translation “work” (this then took 5-10 mins total thanks to my colleague already setting up all her layers professionally. Thanks Marina ?)
I can’t share the actual code because I can’t share the private keys. I just wanted to put this out there to give a bit of instructions to anyone who comes across a similar problem. This took me a few hours to figure out. I hope this helps someone.
Of course I had to buy Yuanging a ko-fi. Love the work.
