Как мы научились делать локализацию макетов в Figma в один клик

Делимся полезным инструментом.

Анна Ноджак, дизайн-директор Joom, рассказывает, как наладить работу с переводами, перестать сходить с ума от ручных переносов текста и автоматизировать работу с макетами в Figma, если у вас мультиязычное приложение.

На старте у продукта часто есть ряд потребностей, которые просто обязательно нужно закрыть. Не всегда есть возможность реализовать все сразу на самом высоком уровне, но наступает момент, когда ресурсов становится больше. Так, долгое время контент для App Store и Google Play готовился на аутсорсе. Он был. Он хорошо работал. Но хотелось лучше. И вот наконец мы решили делать его внутри команды.

Что представляет собой задача подготовки макетов для сторов? Пропустим здесь часть про анализ трендов и конкурентов, обработку данных о том, что рассказать нашим потенциальным пользователям и обсуждение, как лучше это показать. Сейчас будем говорить о подготовке макетов для двух платформ в трёх размерностях на 17 языках. Итого — 102 экрана. Поехали.

Часть первая, техническая. Мы не роботы, и мы хотим оптимизировать Ctrl+C и Ctrl+V

Страница приложения в сторе — это самая верхушка воронки, и коммуникация должна быть безупречной. Здесь решается, получите вы ещё одного пользователя или нет. Поэтому переводы в духе Google Translate не годятся. Нужно, чтобы текст был не просто складным и грамотным, а ещё и был адаптирован к современному звучанию языка, учитывал культурные особенности его носителей. В Joom за качество перевода отвечают кантри-менеджеры — если коротко, они руководят у нас клиентской поддержкой и контент-проектами на разных языках.

Получив переводы впервые, мы наивно решили, что можно просто взять и руками перенести всё в макеты. На деле оказалось, что перенос текстов на одном языке вместе с проверкой занимает около часа. На то, чтобы перенести все переводы, нужно потратить два дня скучнейшей, кропотливейшей работы, которая дико выматывает. И это только один вариант. Без правок. Без учета каких-либо накладок. О том, что в конечном счете один вариант — это вообще не результат, и нужно проводить серию экспериментов, можно даже не говорить. И да, это работа скорее для робота, а не для человека — слишком механическая, кропотливая и объемная. Стало очевидно, что надо искать какой-то другой способ. Нужна какая-то магия...

Пишем плагин для Figma

Figma позволяет манипулировать содержимым документа через систему плагинов, которые можно писать на TypeScript. Мой коллега Искандер Ситдиков согласился помочь с разработкой плагина. Казалось, нам нужно немного: загрузить словарь, найти все тексты и заменить их на соответствующие переводы.

Мы сразу заметили, что некоторые тексты переводить не нужно: числа, проценты, цены, названия Google Play, Joom, JoomPay, и решили поддержать настраиваемые исключения. Сделали первую версию плагина и порадовались скорости преображения макетов.

Ну как порадовались.

Макеты перевелись, но сработало это совсем не так, как хотелось бы: у нас было довольно много текста с гибридным форматированием, и всё оно слетело.

Дорабатываем форматирование

Если в одном абзаце было применено несколько стилей, как, например, в комментарии к посту, то вместо заголовка Medium Primary 100 и ссылки Regular Primary 60 мы получили весь блок Medium Primary 100. Переразмечать его вручную каждый раз после замены текста — долго и опасно, особенно на незнакомом языке.

Но казалось, мы можем довольно легко сделать и это автоматически, если допереведём выделенные части текстов. Оперативно отправили дополнительные тексты на перевод и приступили к разработке второй версии.

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

Добавляем конвертер валют

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

И всё уже вроде получилось. Мы снова порадовались. И тут настала очередь арабского и иврита.

Переводим на RTL языки

Этой части работы можно было бы посвятить целый роман, а не кусочек статьи. Просто поверьте мне, я выдохну, и пройдемся по фактам. Figma не поддерживает RTL языки — те, что пишутся и читаются справа налево. Боль.

Есть плагины для интерактивного ввода арабского текста, которые не подходили, и один плагин для форматирования RTL, который не работал. Ещё боль.

Подставлять и форматировать эти переводы руками было ещё опаснее, чем <вставьте ваше ужасное сравнение>. Уж лучше <вставьте ваш самый безрассудный поступок>.

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

Было очень сложно отлаживать корректное отображение арабского текста, имея под рукой лишь Google Translate и не зная языка. Но к сожалению, даже после всего этого колдовства с текстами полной автоматизации, как это было с другими языками, добиться не получилось, поскольку сами интерфейсы, порядок и направленность элементов всё-таки необходимо было переворачивать руками. Но это мы уже исправили и скоро выложим обновление плагина. Вот как он будет работать.

Раньше мы бы переносили тексты в макетах для пяти экранов на одном языке час. Перенос текстов на 17 языках занял бы больше двух дней монотонного труда. Теперь, когда плагин работает, перевод происходит в один клик.

Но это я забегаю вперед. Потому что до этого момента рассказ был только о сложностях, которые возникали на стороне макеты — плагин — Figma. А есть ещё одно большое направление, которое отняло больше всего времени и сил, поэтому о нем отдельно.

Часть вторая, человеческая. Мы всё ещё не роботы и хотим как можно меньше ошибаться

Плагин не человек, он не допускает ошибок и не прощает их. Он поможет, если не хватает какого-то перевода, если лишний пробел, если недостающий пробел и так далее. А вот люди допускают ошибки. Увы.

Исправляем ошибки в переводах (заранее)

Как я уже сказала, многие ошибки может засечь плагин. Но лучше их не допускать на стадии подготовки переводов, чтобы не возвращаться на дополнительный круг: попытаться внести перевод в макет — понять, что там есть ошибки — отправить тексты на доперевод — дождаться — вернуться к задаче. Тратится общее время, лучше делать сразу на чистовик.

Делаем общий контекст

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

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

И вносим финальные правки

Плагин был полностью готов. Все переводы готовы. Макеты подогнали по шрифтам (вы знали, что заголовок в три строчки на английском легко превращается в шесть на итальянском?). Все готово, даже отдельная версия обложек для арабского и иврита! Мы выгружаем все макеты, которые нужно разложить по локалям, платформам, размерам и версиям. И если бы не усталость, то уже бы точно пришло время слез радости. Счастливо закрываем эту задачу.

Но тут кантри-менеджеры впервые видят тексты в макетах и… предлагают правки. Все правки приходят в виде документа, а нам нужно перенести их в таблицу. В таблице нет номеров экранов. Поэтому чтобы соотнести правки с макетами, приходится сверять текст и искать его в таблице. Правки присылали каждый в своей манере. Один переводчик пишет, какой текст на какой заменить, другой — сразу правильный вариант. Один не дублирует одинаковые тексты в разных версиях, другой перечисляет поэкранно... Сделали! Счастливо закрываем эту задачу?

Но тут кантри-менеджеры решают сделать переводы более нативными и предлагают правки. В этой итерации на каждом экране было всего по несколько незначительных правок, но из-за этого пришлось перепахать почти все тексты во всех локалях, заново проверить все экраны, заново всё выгрузить.

Мы научились на своих ошибках. А кто-то, возможно, сможет избежать их благодаря нашим рекомендациям.

  • Прежде всего, подготовьте основную версию макетов (ту, которую будете дублировать на разных языках) и тексты на переводы, в которых всё будет финально и безошибочно.
  • Вместе с текстами обязательно показывайте переводчикам макеты основной версии, чтобы они сразу хорошо понимали контекст задачи, и акцентируйте на этом внимание.
  • Если вам нужна разбивка блоков на составляющие, сделайте явную разметку, а также пропишите значение этой разметки и дополнительно акцентируйте на это внимание переводчиков.
  • Ну и главное, поясните важность того, что готовые переводы передаются только один раз, и никаких доработок. Потому что это выходит слишком дорого.

А ссылки на плагин будут?

Если вы тоже работаете со множеством языков, то делимся с вами плагином: Static Localizer.

А если вам интересно, как мы разрабатывали плагин, почитайте статью моего коллеги Искандера Ситдикова на Хабре (и посмотрите исходный код на GitHub).

И не стесняйтесь рассказать в комментариях о ваших самых рутинных дизайн-задачах!

0
75 комментариев
Написать комментарий...
Денис Усов

Если цена не кусается, то у lokalise есть плагин для figma.

Ответить
Развернуть ветку
Ivan Pomidoroff

Смотрел, не понравилось
Не только у lokalise есть

Именно этот плагин мне лично импонирует тем, что не нужно никуда ничего посылать, регистрироваться, в какой то сервис, к каким то переводчикам - что сам перевел, то и видишь, все под рукой (плюс есть специфика - "свои" переводчики)

Ответить
Развернуть ветку
72 комментария
Раскрывать всегда