Figma Translate Plugin: как быстрее локализовать дизайн

Почему перевод внутри дизайна важен для команд

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

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

Потеря контекста — одна из главных причин, по которой переведённые интерфейсы выглядят неестественно.

Сдвиг layout — ещё одна скрытая стоимость внешних workflow перевода. Немецкие строки часто на тридцать процентов длиннее.

Настройка плагина перевода Figma

Figma Community предлагает несколько плагинов перевода. Одни используют API машинного перевода, такие как Google Translate или DeepL, другие подключаются к системам управления переводами.

Чтобы установить плагин, откройте Figma, перейдите на вкладку Community и найдите плагин. Большинство требуют API-ключ от сервиса перевода.

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

• Искать плагины перевода в Figma Community.
• Установить плагин и добавить API-ключ в панели настроек.
• Задать язык-источник по умолчанию, обычно английский.
• Для Figma for Teams или Enterprise опубликовать плагин в общей библиотеке.
• Создать общий глоссарий для терминов продукта, которые не должны переводиться автоматически.

Пошаговый workflow перевода

Типичный workflow перевода в Figma начинается с выбора слоёв для перевода. Можно выбрать отдельные текстовые слои, целые фреймы или всю страницу.

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

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

После завершения пройдитесь по каждому экрану. Ищите строки, выходящие за пределы контейнеров, и неправильно переведённые термины.

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

Управление layout после перевода

Расширение текста — самая частая проблема layout после перевода. Перевод на немецкий, французский или португальский часто увеличивает длину строк на двадцать-сорок процентов.

Auto-layout Figma — лучший помощник. Если компоненты используют auto-layout с hug-contents или fill-container, многие проблемы решаются автоматически.

Языки с письмом справа налево требуют большего, чем просто перевод текста. Весь layout может потребовать зеркального отражения.

Высота строки и fallback-шрифты тоже важны. Если дизайн-система использует латинский шрифт без CJK-символов, Figma подставит системный шрифт с другими метриками.

• Использовать auto-layout с hug-contents на кнопках и тегах.
• Устанавливать текстовые контейнеры в fill-container по ширине и auto по высоте.
• Тестировать с реальными переводами на немецкий и японский на ранних этапах.
• Для RTL-языков зеркалить layout, но оставлять универсальные иконки в исходной ориентации.
• Проверять поведение fallback-шрифтов, переключаясь на CJK-локаль.

Лучшие практики для мультиязычного дизайна

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

Варианты компонентов — мощный способ работать с различиями между локалями.

Экстернализация строк хорошо работает и в дизайне. Храните строки в JSON и импортируйте их в Figma с помощью плагина.

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

• Проектировать компоненты с учётом текста переменной длины с первого дня.
• Создавать LTR- и RTL-варианты для навигации, карточек и списков.
• Хранить строки UI во внешних JSON или CSV и синхронизировать с Figma.
• Выполнять QA-чеклист локализации после каждого раунда перевода.
• Документировать переопределения отступов и размера шрифта по локалям.

Когда плагина недостаточно

Плагины перевода отлично работают по скорости, но имеют ограничения. Машинный перевод хорош для коротких строк UI. Он испытывает трудности с маркетинговыми текстами и юридическими документами.

Для сложных потребностей рассмотрите интеграцию Figma с системой управления переводами. Crowdin, Lokalise и Phrase предлагают плагины Figma.

Интеграция с CMS — ещё один сценарий, где одного плагина недостаточно. Дизайн-файл и CMS должны оставаться синхронизированными.

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

• Использовать машинный перевод для коротких и понятных строк UI.
• Направлять маркетинговые тексты и юридические документы профессиональным переводчикам.
• Подключать Figma к системе управления переводами при более чем трёх целевых языках.
• Держать CMS как единственный источник истины для контента.
• Закладывать бюджет на проверку носителем языка для каждой локали перед запуском.