Разбираемся, как перевести тучу текстовых объектов на статических макетах без помощи разработчиков, динамического фронта и Google Translate.

При разработке сайта, приложения или интерфейса, дизайнер обычно использует в макетах один язык, а работу по локализации интерфейса берет на себя разработчик. Процесс выглядит так:

Но бывают случаи, когда перевод нужно сделать непосредственно в дизайн-макетах, например, чтобы посмотреть, как встанут текстовые блоки разного размера, или когда у интерфейса нет динамического фронта. С последним мы столкнулись при разработке интерфейсов банкоматов БелВЭБ.

Банкоматы — сложные устройства с очень долгим сроком эксплуатации. Некоторые служат по 20 лет и не подлежат модернизации, а их ПО отстает от привычных нам стандартов. Для таких устройств каждое состояние интерфейса — отдельная картинка gif. Если на экране 2 кнопки и для каждой нужно нарисовать 2 состояния — дизайнер готовит 4 макета:)

Локализация интерфейса тоже грозит лютым геморроем, потому что каждый дополнительный язык на устройстве требует свою отдельную пачку макетов.

Итак, имеем 177 макетов, которые нужно перевести на пять языков, и учесть добавление еще двух в перспективе. Перевод должен сделать квалифицированный переводчик, робот нам не подходит.

Если подходить к задаче в лоб и просто копировать текст, прогонять его через переводчик и вставлять его обратно, — это займет около недели непрерывной работы, не считая затрат на проверки и исправление ошибок.

Если еще добавить в проект взаимодействие с командой переводчиков, задача превращается в сущий кошмар: что куда вписывать, как соблюсти единую терминологию, названия повторяющихся действий и т.д. Перед нами встал вопрос автоматизации процесса перевода статичного интерфейса.

Чтобы сохранить здоровье, внутреннюю гармонию, да еще и освободиться пораньше, нам понадобятся:

1. Anima — бесплатный sketch-плагин для управления расстояниями текстовых блоков внутри макетов.
2. Texts Translations — бесплатный sketch-плагин для перевода экранов на различные языки.

Одна и та же фраза на разных языках может иметь разный размер, текст станет съезжать, выходить за границы элементов и создавать другие неприятности при переводе. Чтобы избежать проблем, используем sketch-плагин Anima.

Открываем проект в Sketch, и с помощью плагина фиксируем положение нужного нам текстового блока относительно артборда или соседнего элемента. Это поможет сохранить внутренние отступы при локализации макета, когда текстовый блок начнет скакать по высоте и ширине.

После того, как текст зафиксирован, переходим к следующему шагу — локализации артбордов.

Устанавливаем sketch-плагин Texts Translations. Он поможет нам выгрузить весь текст из нашего проекта в отдельный текстовый документ, и поменять локализацию.

В Sketch выбираем «Plugins» ➞ «Texts Translations» ➞ «Save locale» и вводим название выгружаемого языка, например, «russian». Рядом со sketch-документом должна появится папка с названием «translations» в которой находится первая локализация, в нашем случае «russian».

Для того, чтобы добавить новый перевод, создаем копию этого файла в папке «translations», и переименовываем его, например, в «english».

Открываем файл «english» любым текстовым редактором и заменяем русский текст на английский. Важный момент заключается в том, что файл имеет расширение .json, а это значит, что каждая строка нашего текста взята в кавычки, а к ней присвоен json-ключ. Все эти спец. символы менять или удалять нельзя, иначе плагин не сможет корректно заменить текст.

После того, как английский текст занял свое место, сохраняем и закрываем файл. Снова открываем проект в Sketch, нажимаем «Plugins» ➞ «Texts Translations» ➞ «Change locale», выбираем «english» и нажимаем «Change». Если текст в документе был заменен корректно, без редактирования и потери спец. символов, язык макета тут же изменится.

Качество перевода было важным, поэтому мы обратились в агентство. Для удобства замены текста в json-файлах, создали таблицу в Google Sheets. В ней по столбцам разнесены спец. символы json и текстовые формулировки, которые с помощью формул автоматически собираются текстовые файлы с локализациями.

С помощью всего двух плагинов мы быстро и качественно перевели 177 экранов на 5 различных языков, создав таким образом еще 645 макетов. Красота.

Если качество перевода не имеет значения, например, когда необходимо очень быстро перевести макет — лучше воспользоваться sketch-плагином AutoTranslatePro. Он автоматически переводит с помощью Google Translate, и заменяет текст в макете. Это удобно для проверки поведения элементов интерфейсов с разной длинной слов. Посмотрите, например, табличку от Alconost.

Знаешь, что еще можно автоматизировать, чтобы вообще не приходить на работу ? Напиши нам, поделись опытом!

Оригинал статьи опубликован в Райте 29 марта, 2019.

Как упростить перевод макетов в Sketch на несколько языков и уйти с работы пораньше was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.