Figma стала одним из наиболее широко используемых инструментов проектирования. И на то есть веская причина. Это мощный инструмент, который беспрецедентно хорошо решает вопросы совместной работы.
Figma – это веб-редактор векторной графики для совместной работы, который предлагает все необходимые инструменты для дизайнеров и других членов команды, которым есть что сказать о дизайне на каждом этапе, от первоначального мозгового штурма, тестирования многоязычных вариантов до финальной полировки.
🤝 Преимущества Localazy & Figma
Мы в Localazy активно используем Figma и очень любим этот продукт. Он помог нам подготовить лучшие дизайны и определения стилей, быстро создать интерактивные прототипы с помощью многоразовых компонентов и решить потенциальные проблемы юзабилити на ранней стадии.
Нам так нравится этот инструмент, что он стал первым внешним инструментом, для которого мы создали плагин локализации. Это был самый востребованный и теперь самый часто используемый плагин в Localazy. Судя по опыту наших пользователей, такая связь между дизайном и кодовой базой через платформу поставщика переводов открыла нереальные возможности, о которых они даже не подозревали.
Среди наиболее высоко оцененных преимуществ использования плагина Figma можно назвать следующие:
- определение исходных ключей и исходных значений в Localazy (т.е. создание единого источника истины),
- разработчики экономят время благодаря отсутствию необходимости копировать и придумывать исходные ключи,
- дизайнеры экономят время и легче поддерживают существующие дизайны в актуальном состоянии благодаря отсутствию необходимости вручную вносить изменения в содержание продукта.
- Авторы контента имеют прямой контроль над отдельными языковыми вариантами в Localazy и им не нужно просить дизайнеров/разработчиков сделать обновления.
- … и многое другое.
🖌️ Важность многоязычного дизайна
Если ваш продукт поддерживает несколько языков, вам необходимо проверить, как он справляется с различными нюансами и особенностями каждого языка. Некоторые языки пишут слева направо, а другие – справа налево; некоторые используют запятые в качестве разделителей в числах; некоторые добавляют символы валюты перед числовым значением, а другие – после него.
А некоторые языки могут удивить вас безумно длинными словами (я смотрю на вас, “Donaudampfschifffahrtsgesellschaftskapitän”!).
Такие уникальные аспекты конкретного языка могут вызвать множество проблем в вашем дизайне, например:
- метка кнопки переполняет контейнер,
- символ валюты переходит на следующую строку, в то время как значение остается на предыдущей,
- короткое описание абзаца создает слишком широкое пространство на RTL-языке,
- баннер с призывом к действию не вызывает одинаковых эмоций на других языках.
В то время как некоторые проблемы требуют определенного пользовательского тестирования, чтобы исправить ситуацию, вы можете легко предотвратить другие (например, переполнение) на ранних стадиях проектирования.
🚀 Удивительно быстрое создание многоязычных прототипов
Однако многие дизайнеры и менеджеры продуктов не осознают, насколько эффективно можно использовать Localazy для тестирования того, как дизайн Figma выглядит и ощущается на других языках. Всего за пару кликов мы можем загрузить ключи из Figma в Localazy, перевести все с помощью машинного перевода и загрузить все обратно. При необходимости подправить дизайн и повторить его на другом языке. Просто посмотрите сами. Выглядит отлично? Давайте погрузимся!
⚙️ Начальная настройка
Прежде чем мы перейдем к самой быстрой части, нам нужно настроить пару вещей:
- Зарегистрируйтесь на Localazy.
- Создайте проект Figma playground (желательно, чтобы он был отделен от основного проекта Localazy, используемого для производственной версии).
- Активируйте план Autopilot в Marketplace (не волнуйтесь, есть 7-дневная пробная версия).
- Установите плагин Localazy в Figma.
- Подключите свой аккаунт Localazy и проект.
В дальнейшем вам не нужно будет повторять первые четыре шага. Перед загрузкой контента из Figma вам может понадобиться изменить целевой проект в зависимости от того, куда вы хотите загрузить контент – в проект игровой площадки или в основной проект.
Ознакомьтесь с этой статьей, чтобы узнать больше об интеграции и плагине в целом.
📐 Прототипирование
Для этого примера я загружу один экран из наших ранних версий нового интерфейса перевода. Содержимое на английском языке, и исходный язык нашего проекта также установлен на английский.
В Localazy мы добавим немецкий и арабский языки и позволим механизму машинного перевода Google перевести содержимое. Через некоторое время мы сможем загрузить переводы обратно в Figma. Не стесняйтесь следовать этому примеру с вашим собственным файлом Figma.
Загрузка содержимого в Localazy
Прежде всего, откройте выбранный вами файл в Figma, инициализируйте плагин Localazy Figma и подключитесь к целевому проекту Localazy.
Затем в настройках плагина я отмечу Use node name as source key, чтобы получить более удобные именованные ключи источника, и сниму флажок Upload & download the whole file, чтобы загружать только текстовые узлы, которые я выбрал в данный момент. Ни то, ни другое не обязательно, но такая настройка, на мой взгляд, улучшает работу.
Итак, выберите экран(ы), который вы хотите загрузить на игровую площадку, заполните имя файла, под которым содержимое будет храниться в Localazy, и выберите формат целевого файла (JSON – универсальный вариант). И загружайте.
Переведите с помощью MT
Перейдите к своему проекту в Localazy и добавьте языки, которые вы хотите протестировать. В моем случае я добавил немецкий и арабский.
Перейдите в раздел “Управление файлами” из бокового меню и наведите курсор на три точки справа от группы файлов, которые вы загрузили из Figma (в моем случае figma.json). В выпадающем меню выберите Предварительный перевод с помощью MT.
На следующем шаге не стесняйтесь выбрать свой любимый движок MT. Каждый из них может по-разному работать с определенными сценариями, терминами и тональностью, и нельзя сказать, что один всегда лучше другого.
Для демонстрации я остановлюсь на Google, поскольку их API, как правило, довольно быстро обрабатывает запрос на перевод. Обязательно отметьте опцию Утвердить все переводы, чтобы вы могли использовать их сразу, без необходимости просматривать и принимать их после этого. Повторите этот шаг для всех языков, которые вы хотели бы протестировать.
Когда вы вернетесь в раздел “Переводы”, вы должны увидеть полностью переведенные языки (если это не так, попробуйте обновить страницу, запрос может занять некоторое время для обработки).
Предварительный просмотр в Figma
Теперь мы готовы к предварительному просмотру дизайна на других языках. Вернитесь к вашему файлу Figma и переключитесь на вкладку Download в плагине Localazy Figma. Выберите исходный файл и желаемый язык, а также выберите экран/ноды, которые вы ранее загрузили в Localazy.
Вуаля! Мы можем увидеть, как экран может выглядеть на немецком языке всего за несколько кликов. Конечно, машинный перевод, скорее всего, не попадет в производственную версию, по крайней мере, без корректуры. Но, тем не менее, он может дать вам хорошее представление о том, может ли дизайн работать или его нужно сильно переделать. В моем случае надпись Use this button label, переведенная как Benutze das, почти переполнила контейнер кнопки, и теперь я знаю, что мне следует дать ей немного больше места по горизонтали.
С арабским языком все сложнее, поскольку это язык с право-левым написанием. Плагин Figma не изменяет выравнивание текста автоматически, поэтому вам все равно придется настраивать дизайн вручную. Но это, безусловно, гораздо меньше работы, чем переводить весь дизайн.
✔️ Заключительные слова
Я надеюсь, что эта статья дала вам хорошее представление о том, как вы можете улучшить ваше многоязычное прототипирование с помощью плагина Localazy Figma. Не стесняйтесь обращаться к нам через team@localazy.com или присоединяйтесь к нашему каналу Discord, если у вас есть какие-либо вопросы.