Figma как сделать русский

Figma на русском. Как руссифицировать Фигма?

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

Тем не менее, я расскажу как можно создать клиент Figma на русском языке.

Для начала нам нужно обзавестись некоторым софтом. Это какой-то редактор кода, типа Note++, архиватор 7zip и плагин для него вот по этой ссылке http://www.tc4shell.com/en/7zip/asar/

  1. Переходим в папку со своим 7zip и создаем там папку
    Formats. Скачанный по ссылке выше плагин извлекаем в этой папку в зависимости от разрядности твоей системы dll.
  2. Идем в корень своей Фигмы скорее всего по этому адресу на своей машине c:\Users\Figmaweb\AppData\Local\Figma\app-68.5.0\resources\ у меня, по крайней мере такой адрес.
    68.5.0 — это актуальная на сегодня версия программы, у тебя она может отличаться.
  3. По этому адресу находим вот такую штуку
    app.asar . ПКМ, распаковываем его и достаем файл
    menu.js . Вот тут лучше сделать копию.. мало ли что))
  4. Вот этот menu.js открываешь текстовым редактором и в нем меняешь названия пунктов меню на те, которые тебе нравятся. Тут же можно изменить и горячие клавиши.
  5. Сохраняешь, заливаешь menu.js обратно в
    app.asar, открываешь Фигма на русском.

Сам не проверял и не хочу, меня вполне устраивает английская версия.

Источник

Автоматизируем локализацию макетов в Figma

В один прекрасный момент наши дизайнеры решили, что пора обновить обложки
нашего приложения в Apple Store и Google Play. На всех 17 языках.

Это история про то, как нырнуть в незнакомый язык программирования, незнакомую платформу и незнакомую задачу, собрать много всего интересного, помочь коллегам и оставить след в open source community.

После подготовки макетов в Figma пришло осознание страшного факта: мы должны поддержать 17 различных языков! Причем максимально качественно и согласованно, так что автоматические переводы через Google Translate (или даже сервис Crowdin) нам не подходили. Что ж, задача была поручена ответственным людям, и вот через некоторое время у нас появилась табличка Google Sheets с переводами всех фраз.

Первая попытка ручной замены текстов в макетах привела к следующему:

  • было потрачено около 40 минут;
  • были допущены мелкие ошибки форматирования;
  • заменяющий вносил свои правки в переводы (потому что «знал язык») и нигде это не фиксировал;
  • пропало желание повторять эту процедуру, а значит, и вносить какие-либо изменения.

И задача резко обрела пугающий объем и сложность. Требовалась автоматизация.

Конечно же, хотелось бы воспользоваться готовым решением. Однако из рассмотренных (Crowdin, Lokalise, Yandex.Translate) ни одно нас не устроило, так как они не позволяют использовать кастомизированные переводы и полностью игнорируют форматирование (подсветку, выделения). А в идеале решение должно было давать практически готовый результат, не требующий вмешательства человека.

Как известно, подобные проблемы лучше всего решаются за чашечкой чая в компании коллег-разработчиков на уютной офисной кухне. Несмотря на то, что в нашей команде нет разработчиков, хорошо знакомых с Figma и ее возможностями, никто не брезгует TypeScript’ом, и все способны написать на нем плагин по документации. Даже Golang и Kotlin разработчики заднего конца. Более того, небольшой опыт у некоторых уже имелся.

Читайте также:  Как сделать детей индейцами

Написание плагинов для Figma

Figma предоставляет достаточно подробную документацию по созданию плагинов. Код плагина делится на «клиентскую» и «серверную» части, при этом только у последней есть доступ к структуре документа (названия условные, потому что обе выполняются локально). Клиентская часть отвечает за взаимодействие с пользователем через HTML-интерфейс. Возможности API так же хорошо описаны в соответствующей документации.

Разработка плагина ведется исключительно в десктоп-версии Figma, которая по сути является обычным WebView, поэтому разработчику доступна консоль JavaScript и прочие привычные инструменты.

После беглого осмотра стало ясно, что API поддерживает поиск нод, редактирование текста и стилей, то есть в теории позволяет нам осуществить задуманное.

Автоматический перевод по словарю

Автозамена

Было решено за полчасика сделать PoC, который будет в состоянии просто подменить все тексты в соответствии с табличкой. Пока с максимально примитивным UI, конечно же.

Итак, для начала нам нужно загрузить словарь. Поскольку заморачиваться с подключением сторонних модулей на первом этапе не хотелось, решил выбрать самый простой формат, в который можно выгрузить имеющуюся табличку из Google Sheets. Между CSV и TSV выбор пал на TSV: в текстах могли присутствовать запятые, это усложнило бы парсинг.

Вся эта конструкция довольно быстро заработала, что порадовало и вселило уверенность.

Исключения

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

Имена собственные, числа, валюты, какие-то символы, эмодзи… Не беда. Достаточно задать исключения в виде списка регулярок.

Форматирование

Теперь не хватало лишь вишенки на торте.

Видно, что наивная подстановка текста переформатирует его в соответствии со стилем
самой первой буквы. Можем ли мы как-то сохранить сложное форматирование? Кажется, да. Можно дополнительно к основному тексту перевести отдельно выделенную часть. Затем в переводе основного текста найти перевод выделенной части и переформатировать его. Только вот далеко не всегда ясно, какая часть текста является «выделенной». Но мы можем перебирать имеющиеся стили в поисках «основного», мы же точно знаем, что он один.

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

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

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

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

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

    Сообщения об ошибках и отладка

    На удивление сложно было донести до переводчиков, что переводы нужных нам частей фраз должны быть согласованы с тем, как переведена сама фраза. Так, например, регулярно слово «еще» в очередном комментарии пользователя переводилось по-новому.

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

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

    עם האוכל בא התיאבון

    Казалось, все должно было прекрасно работать и с RTL языками, так как мы лишь выполнили замену вхождений по точному совпадению. Однако внезапно выяснилось, что Figma не умеет корректно отображать RTL тексты — рендерит их слева направо. А лезть в дебри особенностей рендеринга RTL текстов — последнее, чего бы хотелось.

    Да, нашлось несколько плагинов для интерактивного ввода арабского текста и один разломанный плагин, пытающийся разворачивать RTL тексты, но все это не решило нашу проблему. Хотя бы потому, что при этом напрочь слетало форматирование.

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

    Что может быть сложного? Давайте просто развернем текст посимвольно.

    Так. Теперь все рендерится справа налево, но Figma вставляет по привычке автопереносы строк так, словно это LTR текст. В итоге строки нужно читать снизу вверх. Беда. Факт расстановки автопереносов Figma не отражает в содержимом ноды, да и вообще, никак нигде не отражает… Разве что… Если нода имеет адаптивную высоту, то при возникновении автопереноса высота ноды изменяется!

    Итак, план такой.

    1. Разворачиваем перевод, как раньше.
    2. Создаем невидимую текстовую ноду с адаптивной высотой и той же шириной (если, конечно, ширина исходной ноды тоже фиксирована).
    3. Разбиваем развернутый перевод на слова и начинаем добавлять их в скрытую ноду по одному (справа налево). Если вдруг высота скрытой ноды изменилась, откатываемся, вставляем разделитель строк и продолжаем.
    4. Получившееся разбиение на строки просто конкатенируем.
    5. Удаляем временную ноду.
    6. Инвертируем выравнивание текста (если было по левому краю, то делаем по правому, и наоборот).

    Большая сложность заключается в том, что в процессе нужно внимательно следить за тем, как видоизменяются секции.

    К тому же, на ровном месте возникло несколько подводных камней.

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

    Полный код поддержки RTL языков я здесь приводить не стану — он доступен в репозитории.

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

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

    Конвертирование валют

    Так уж случилось, что мы маркетплейс, и у нас есть товары. И товары имеют цену. Можно, конечно, отдать с десяток текстов вида «1 234 ₽» переводчикам и надеяться, что они правильно локализуют цены, использовав верные разделители, верные знаки валют и верное количество цифр после запятой… Но зачем, если можно все это проделать автоматически, один раз настроив несложный конвертер?

    Публикация

    Перед публикацией плагина был проделан ряд улучшений UX. Например, настройки в интерфейсе плагина сохранялись в localStorage (да, Figmа такое умеет!). Это позволяет не загружать словари каждый раз и быстро выполнять переводы на несколько языков. А чтобы интерфейс не зависал во время активных операций с документом, по рекомендации самой же Figma, была ограничена интенсивность асинхронных параллельных операций с помощью простой самописной функции mapWithRateLimit. На сдачу в плагин была добавлена возможность заменять шрифты.

    Процедура публикации плагина заняла больше двух недель, но никаких проблем не возникло.

    В заключение

    Без плагина не обошлась и подготовка к Новому году.

    Возможно, когда-нибудь мы расскажем, как в рамках той же задачи научились выгружать из Figma весь документ в виде одного структурированного архива из картинок.

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

    Источник

    Читайте также:  Как сделать большое звание
    Поделиться с друзьями
    Ответ и точка