We translate interfaces into fifty languages. Sketch

Heroes of the series "Sherlock"

Hello! I'm Alexei Timin, an engineer from the Badoo localization team. In this post I will tell you about how we help translators in their hard work, and about the new Open Source solution that allows you to generate screenshots of the design prepared in Sketch for different languages.

If you create designs for multilingual projects or work in a company that develops such projects, then the information will be useful to you.

There are only two developers in the Badoo localization team, but we hold and create very interesting tools:

• Translation memory
• Collaborative Translation Platform , available at https://translate.badoo.com/ ,
• the functionality of providing correct translation to a specific user (depending on the language, gender, declination, number),
• A / B testing translation preparation system (yes, we are testing translation options to determine which wording is better),
• a dozen interfaces for translators,
• collecting statistics on the work of translators and their use of tools.

These tools are designed to help in the process of localizing the site and mobile applications of Badoo in 47 languages. This is a huge scope of work.

Our translators work with lexemes (this is how we call an indivisible translation unit: a word or a sentence). For each lexeme, the wording of the optimal length is selected in order to ensure that the application is correctly displayed on users' screens. Sometimes a translation must be not only correct, but also attractive (for example, for marketing needs).

The translation process looks like this:

1. Designers draw.
2. Programmers are programming.
3. Translators translate.
4. Release

As you can see, translators are forced to wait for the prototype of the application from the programmers. Or, if there are changes in the translations, they need to ask the developers to re-build the test version to check the mapping. But we got the idea to limit the participation of programmers as much as possible in the translation process and speed up the preparation of the release.

According to our idea, the process should look like this:

1. Designers draw.
2. Programmers program, and translators translate and can immediately see the result in some way.
3. Release

To make it easier for you to present a problem, I present the process diagrams before and after. The optimized area is highlighted in red in the first scheme:

Our designers work in the graphic editor Sketch. We found out that the sketch-tool utility that comes with it can generate screenshots, which means that when adding a translation, you can immediately show the screenshot to the translator! But the question arose: how to replace the source code in the design in order to get a localized screenshot?

In the intervals between the parties, we discussed possible options for the implementation of the idea. And the exit was found.

Let's figure out how the .sketch- from the inside.

Representation of data inside a .sketch file

In the 43rd version of Sketch, developers began to use the .sketch- for "better integration with third-party services."

Logically in the design prepared in Sketch, Pages, Artboards and graphic elements are highlighted. Each entity — Pages, Artboards, and graphic elements — is assigned a unique identifier ( UUID ) once (at the time of creation), which does not change afterwards.

Schematically, the relationship between entities can be represented as:

See the picture below to see what is in the Sketch interface: iPhone SE and iPhone 7 are two of the possible Artboards, and Page 1 is one of the possible Pages.

The design saved in a .sketch file is a ZIP archive, inside which there are directories with PNG and JSON files. Looks easy?

If we unzip the .sketch file, the directory tree will look like this:

Information about each Page and related Artboard objects is stored in pages / *. Json. The file name is the Page object's UUID, and there is one file for each Page object.

We can easily open any pages/*.json and edit, for example, the name of one of the Artboards. To define a specific file for editing, run:

 $ grep -l 'iPhone 7' pages/* 

And if changing the name is not a problem, then changing, say, the text “Press me” on the button is already more difficult. After wandering around the forums and searching for a suitable library without results, we realized that many other people are also looking for a solution.

... his death at the end of the needle, that needle in the egg, then the egg in the duck, the duck in the hare, the hare in the chest, and the chest stands on a tall oak ...
"Princess Frog"

The text on the button is packed into a binary plist encoded into the Base64 string, which is the attribute value of the serialized JS object located in one of the files compressed with the ZIP file.

We will not deal with questions of unzipping and reading JSON from files, but it is worth mentioning the property list format (bplist in the diagram above). To modify the text "Click me", you can use the plutil utility. It allows you to insert a new one and remove the old value of a certain property, and with its help you can convert a plist from a binary view to XML and vice versa. XML is a convenient format, there are many tools for working with it. It is also possible to export to JSON, but, firstly, this results in the loss of data types, and secondly, not always plist can be converted to JSON. For example, with a plist from a .sketch file, export to JSON did not work.

So, we have dealt with the internal presentation and finally proceed to the options for the implementation of our ideas.

Choosing the right implementation

Option 1. Lazy solution

We tried to tell translators about JSON, Base64 and bplist, to teach them to replace texts with translations and to take screenshots. But when they were shown the console export export command

 $ sketchtool export artboards --items='42C53146-F9BF-4EEE-A4F8-BB489F0A3CDA,BF38A95A-F0CD-452E-BE26-E346EBD349CE' --formats=png --save-for-web example_design.sketch 

understood that this option is no good.

(Joke, we didn’t tell the translators anything, but immediately switched to the second variant).

Option 2. True way

Translators should not think about technical issues. You just need a screenshot when saving the translation.

For this we decided to develop a service, the minimum functionality of which would be:

1. The definition of graphic elements containing text in a .sketch UUID file.
2. Generate screenshots with localized text.

The project was named Sketch Modifier and was published on GitHub .

Work with Sketch Modifier

To start using Sketch Modifier, you need to install Node.js. on macOS (where, of course, Sketch https://www.sketchapp.com/ should already be installed). Yes, Sketch is only under macOS. But if your designer works in Sketch, then you have at least one Mac.

Consider the process of working with Sketch Modifier step by step.

Step 1. Installation

Find a computer running macOS. Download and install Node.js on it, which is quite simple.

Next, download the archive or clone the repository with the GitHub command

 $ git clone https://github.com/AlexTimin/sketch-modifier.git 

Go to the project directory

 $ cd sketch-modifier 

Install dependencies using npm:

 $ npm install 

And finally, start the server

 $ ./bin/www 

Everything, now at http://localhost:3000 you should respond to the server. You can go to this address in the browser and check.

Step 2. Download the .sketch file and source definition

For example, take example_design.sketch and load it into the system. To do this, send a request from the directory where you saved example_design.sketch :

 $ curl -F 'data=@example_design.sketch' http://localhost:3000/add-sketch/ 

.sketch will be assigned a UUID. In response, you will receive the following JSON:

 { "8a2009c5-36ca-4328-87d6-16aa0c2e2800": { //  example_design.sketch UUID,      "5A0F429A-C974-460A-9482-93AED7456850": { // Page 1 UUID "C1C29749-B967-494D-8D7E-A484EAB37534": { // iPhone SE Artboard UUID "E335D359-9DF3-4DCC-8B79-E77E38824714": " " // UUID    } … //    Artboards } … //    Pages } } 

You can save this data to your database, send it to / dev / null or do something else interesting. But we keep them in the database.

Step 3. Generation of translated previews

To replace the text, you need to send a request to http://localhost:3000/generate-preview/ with the indication of the screens and textReplaces . The list of required commands will be lower, but for now let's deal with the structure of the request parameters.

In the screens parameter, we specify the list of UUIDs of those Artboards whose screenshots we want to receive. The parameter value has the following structure:

 { Example Design UUID: [ // example_design.sketch Artboard UUID, // iPhone SE ... ] } 

In the textReplaces we specify the UUID of the text elements and the new text. The parameter value has the following structure:

 { Text UUID: " , ", ... } 

So, we form a request to generate a screenshot. Replace the text "Click me" on "Start the party!", For example. For this we need the file generate-preview-request-data, in which we indicate the values ​​of the request parameters.

The contents of the file generate-preview-request-data :

 textReplaces={ "E335D359-9DF3-4DCC-8B79-E77E38824714": "Start the party!" }&screens={ "8a2009c5-36ca-4328-87d6-16aa0c2e2800" : [ "C1C29749-B967-494D-8D7E-A484EAB37534" ] } 

Execute the command from the directory in which you saved the file generate-preview-request-data .

 $ curl -X POST -d "@generate-preview-request-data" http://localhost:3000/generate-preview/ 

In response, you will receive screenshots in Base64. The structure of the response will be as follows:

 { "C1C29749-B967-494D-8D7E-A484EAB37534": "data:image/7HYUIY786GFFDASeY+...;base64", ... } 

Probably, you guessed that the key in the response structure is the UUID of the requested screenshot, and the value is the representation of the screenshot in Base64 (let me remind you that we requested a screenshot for iPhone SE).

If you save, say, in example.html the following code with the Base64 representation of the image substituted

<img src=" Base64">

and then open example.html in the browser, you will see the translated screenshot:

With the help of Sketch Modifier you can take screenshots before localization, during the process and after localization, which is very important. You will see how the design behaves when using real texts, and understand what needs to be improved.

Conclusion

We set up working with Sketch Modifier in such a way that the design is loaded once, and screenshots are generated when saving translations. Translators will immediately see if the selected translation language fits in the specified areas. So, the problems will be known in advance.

The source code for the implementation is on GitHub .

Use, advise ways to improve, write reviews.