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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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