Узнайте, как два дизайнера справились с трудностями создания готовой к локализации дизайн-системы для глобальной аудитории. В этом исследовании мы рассмотрим, как Ребекка и Марк объединили переменные Figma и токены дизайна для решения проблем многоязычного дизайна, таких как переполнение текста, макеты RTL и несоответствия шрифтов. Они делятся ключевыми извлеченными уроками и препятствиями, с которыми они столкнулись, включая ограничения Figma, а также решениями, которые они разработали для создания динамичных масштабируемых дизайнов, которые легко адаптируются к разным языкам, темам и плотностям. Если вы разбираетесь в сложностях интернационализации в дизайн-системах, эта статья для вас.
Мы с Марком работаем дизайнерами продуктов в SAS, признанном во всем мире лидере в области аналитики и искусственного интеллекта, превращающем данные в ценные идеи. Наша главная роль — поддержка пакетов токенов и библиотек компонентов для SAS Filament Design System. Клиентская база SAS глобальна, то есть люди из разных стран, культур и языков взаимодействуют с продуктами, созданными с помощью Filament Design System.
Дизайнеры SAS используют библиотеки Figma, разработанные командой Filament Design System, для создания спецификаций UX. Эти высококачественные проекты обычно создаются на английском языке, неосознанно игнорируя принципы многоязычия, что может привести к проблемам с макетом, переполнением текста и сложностям с языками с письмом справа налево (RTL). Эти проблемы каскадом переходят в приложение, в конечном итоге создавая проблемы с удобством использования для клиентов SAS. Это подчеркивает необходимость приоритизации локализации с самого начала процесса проектирования.
Это позволило бы нам более эффективно проектировать и тестировать многоязычные возможности, гарантируя, что наша система проектирования будет гибкой и адаптируемой. При исследовании интеграции локализации для систем дизайна мы обнаружили существенный пробел в существующей документации по поддержке локализации и интернационализации в токенах дизайна и переменных Figma. Многие из проблем, с которыми мы столкнулись, такие как управление типографикой в разных локалях или динамическая адаптация макетов, не были документированы или лишь частично рассмотрены в доступных ресурсах. Наша история демонстрирует, как объединение основополагающих принципов многоязычного дизайна с токенами дизайна может помочь справиться со сложностями переключения языка в системах дизайна. Мы не утверждаем, что наш подход лучший, но, учитывая отсутствие документации по этой теме, мы надеемся, что он положит начало обсуждению. Но прежде чем начать, важно понять разницу между локализацией (L10n) и интернационализацией (I18n). Локализация (L10n) относится к процессу адаптации проектов для определенных языков, регионов или культур и включает в себя следующее:
- Перевод текста;
- Настройка макетов с учетом требований, характерных для конкретного языка, например, более длинных или коротких текстовых строк или текста с написанием справа налево (RTL) для таких языков, как арабский;
- Обеспечение соответствия визуальных элементов культурным особенностям и их соответствия целевой аудитории.
Интернационализация (I18n) — это подготовительный этап, гарантирующий гибкость и адаптируемость дизайна к разным языкам и регионам. Ключевые соображения в Figma включают:
- Использование текста-заполнителя для представления динамического контента;
- Установка ограничений для динамического изменения размера с целью обработки расширения или сжатия текста;
- Поддержка двунаправленного текста для языков, требующих макетов с написанием справа налево.
Эти концепции не только являются основой многоязычного дизайна, но и неотъемлемой частью предоставления инклюзивного и доступного опыта пользователям по всему миру.
Встречайте потрясающие семинары по фронтенду, дизайну и UX с практическими выводами, живыми сессиями, видеозаписями и дружескими вопросами и ответами. С Брэдом Фростом, Стефаном Уолтером и многими другими . ЗДЕСЬ: https://smashed.by/smashing-workshops
Предварительная Настройка Figma: Создание Фреймворка#
ПОНИМАНИЕ НАШЕЙ СИСТЕМЫ ТОКЕНОВ ДИЗАЙНА#
Прежде чем углубляться, важно понимать, что наши токены дизайна хранятся в файлах JSON. Эти файлы JSON управляются в приложении, которое мы называем «Token Depot», размещенном на нашем корпоративном GitHub. Мы используем плагин Tokens Studio (план pro) для преобразования этих файлов JSON в библиотеки Figma. Для нас токены дизайна являются синонимами переменных — мы не создаем дополнительных переменных, которые существуют только в Figma. Однако мы создаем стили в Figma, которые служат «карточками рецептов» для определенных элементов HTML. Например, H2 может включать комбинацию font-family, font-size и font-weight. Важно отметить , что значения наших дизайн-токенов напрямую связаны со значениями на основе CSS.
НАЧАЛЬНАЯ НАСТРОЙКА: ПЕРЕКЛЮЧЕНИЕ ТЕМ И ЛОКАЛИЗАЦИЯ #
В 2022 году мы взялись за масштабную задачу рефакторинга всех наших имен токенов, чтобы сделать их более семантичными . В то время мы были озабочены только переключением тем в наших продуктах.
Наши токены были перераспределены по следующим группам:
- Цвет
- Цвета бренда (цвета бренда SAS)
- Базовые цвета (ссылки на цвета бренда)
- Типографика (например, шрифты, интервалы, стили)
- Пространство (например, отступы, поля)
- Размер (например, значки, границы)
- Стиль (например, стили фокусировки)
- Движение (например, анимация)
- Тень.
В нашей ранней настройке:
- Основная папка содержала файлы JSON для значений, не зависящих от темы или бренда.
- Папки бренда включали три файла JSON (по одному на каждую тему). По умолчанию они считались «английскими».
- Отдельная папка языков содержала переопределения для других локалей, размещенные поверх файлов бренда для замены определенных значений токенов.
Наши файлы JSON были настроены с английским языком по умолчанию. Другие локали управлялись с помощью набора файлов JSON, которые включали переопределения для английского языка. Эти переопределения были минимальными и касались в основном настроек шрифта и типографики. Например, жирные шрифты часто создают проблемы, поскольку во многих языках, таких как китайский, японский или корейский (языки CJK), отсутствуют отдельные жирные версии шрифтов. Таким образом, мы заменили значение токена font-weight с 700 на 400 в наших локалях CJK. Мы также обновляем значения токенов font-family, letter spacing, font-style и font-variant. В Figma экраны наших приложений изначально были разработаны на английском языке, а в 2023 году мы реализовали только режимы переключения тем, а не языковые параметры. Кроме того, мы создали подробные списки, чтобы документировать, какие токены дизайна можно преобразовать в переменные Figma, а какие — нет, поскольку первоначальный выпуск переменных поддерживал только ограниченный набор.
ПРЕДСТАВЛЯЕМ ПЕРЕКЛЮЧЕНИЕ ПЛОТНОСТИ#
Введение переключения плотности в наших продуктах стало важным поворотным моментом. Это изменение позволило нам пересмотреть и улучшить то, как мы справлялись с локализацией и управлением токенами. Первое, что нам нужно было выяснить, — это необходимая сортировка токенов. В итоге мы получили следующий список: Влияние токенов по теме и плотности.
Не зависит от темы или плотности:
- Цвет
- Фирменные цвета
- Базовые цвета
- Движение
- Тень
- Размер
- Размер границы
- Размер контура
- Типографика
- Базовый размер шрифта
- Интервал между буквами и словами
- Маркеры переполнения, текста и словесного стиля.
Токены, на которые влияет плотность:
- Типографика
- Размеры шрифта
- Высота строки
- Интервал шрифта
- Размер
- Радиус границы
- Размеры иконок
- Космос
- Расстояние между основаниями.
Токены, на которые влияет тема:
- Цвета
- Действие, тело, контейнер, визуализация данных, отображение, заголовок, выделение, значок, метка, статус, синтаксис, тег, текст, миниатюра и нулевой статус
- Размер
- Размер границы
- Типографика
- Семейство шрифтов
- Стиль
- Действие (стили фокусировки).
Благодаря плотности мы расширили изменения значений, зависящие от локали, за пределы токенов семейства шрифтов, межбуквенного интервала, стиля шрифта и варианта шрифта, включив в них:
- Размеры шрифта
- Размеры иконок
- Высота строки
- Интервал
- Радиус границы.
Пересмотрев нашу шкалу типов и выполнив многочисленные вычисления, мы задокументировали требуемые изменения значений токенов для всех локалей по всей плотности. Эта основа позволила нам эффективно заняться реструктуризацией наших файлов JSON .
РЕСТРУКТУРИЗАЦИЯ ФАЙЛА JSON#
В нашем репозитории токенов мы:
- Обновлены токены в основной папке.
- Добавлены папки плотности и языка для каждого бренда.
После сотрудничества с нашей командой разработчиков front-end мы решили минимизировать количество файлов JSON. Слишком много файлов вносят сложность и ошибки и снижают производительность. Вместо того, чтобы создавать файл JSON для каждой комбинации языка и плотности, мы определили следующие языковые категории:
Языковые категории
- Западноевропейские и славянские языки
- Польский, английский, французский, немецкий и испанский
- Китайские языки
- Упрощенные и традиционные сценарии
- Ближневосточные и восточноазиатские языки
- Арабский, иврит, японский, корейский, тайский и вьетнамский
- Глобальное разнообразие
- Африка, Южная Азия, Тихоокеанский регион, а также языки коренных народов, уральские и тюркские группы.
Эти категории стали нашими файлами JSON, по одному файлу на уровень плотности. Каждый файл содержал токены для размера шрифта, размера значка, высоты строки, интервала и значений радиуса границы. Например, все китайские локали имели согласованные значения независимо от семейства шрифтов. Кроме того, мы добавили папку, содержащую файлы JSON для каждой локали, переопределяя основные значения и папки тем, такие как font-family.
Настройка Figma: Объединение Токенов И Дизайна# ИСПЫТАНИЯ СТУДИИ ТОКЕНОВ#
После реструктуризации наших JSON-файлов мы ожидали получить поддержку типографических переменных в плагине Tokens Studio. Вместо этого Tokens Studio выпустила версию 2.0, внеся существенный сдвиг в рабочий процесс. Ранее мы импортировали JSON-файлы напрямую в Figma и избегали отправки изменений обратно через плагин. Адаптация к новой версии потребовала от нас переучиться эффективно использовать плагин. Первой нашей проблемой было преодоление сложности процесса импорта . Файлы $metadata.jsonи $themes.jsonне удалось правильно перезаписать во время импорта, что привело к появлению дублирующихся коллекций в Figma при экспорте переменных. Несмотря на воссоздание требуемой структуры темы в плагине, проблема осталась. Чтобы решить эту проблему, мы удалили существующие файлы $metadata.jsonи $themes.jsonиз репозитория, прежде чем перенести обновленный репозиторий GitHub в плагин. Однако даже с этим решением нам пришлось вручную удалять избыточные коллекции, которые появлялись в процессе экспорта. После того, как мы успешно перенесли наши токены из файлов JSON в Figma с помощью плагина Tokens Studio, мы столкнулись со следующей проблемой. Изначально мы использовали только режимы «английский» и темы в Figma, полагаясь в первую очередь на стили, поскольку ранние версии переменных Figma не поддерживали переменные типографии. Теперь, с целью внедрения переключения темы, плотности и языка, нам нужно было использовать переменные, включая переменные типографии. Хотя миграция токенов успешно внесла имена токенов в качестве имен переменных и необходимых режимов, некоторые значения отсутствовали.
Переменные типографики, хотя и многообещающие в концепции, на практике оказались не слишком впечатляющими. Например, множитель высоты строки Figma по умолчанию для «auto» был 1,2, что ниже минимума WCAG 1,5. Кроме того, наши значения токенов использовали множители высоты строки, которые не были допустимы в качестве значений переменных Figma. Хотя процентное значение высоты строки допустимо в CSS, переменные Figma не поддерживают проценты. Наше решение включало ручной расчет значений пикселей для высоты строки для всех типографских размеров, категорий локалей и плотностей. Эти значения были введены как локальные переменные в Figma, независимо от системы токенов дизайна. Это позволило нам реализовать правильные изменения высоты строки для плотности и переключения локалей. Однако этот процесс был трудоемким, требуя ручного создания сотен локальных переменных. Кроме того, группировка размеров шрифта и высоты строки в стили Figma требовала дополнительных ручных усилий из-за отсутствия поддержки множителей высоты строки или процентных переменных.
Примеры:
- Для локалей CJK со средней и низкой плотностью используется базовый размер шрифта 16 пикселей, а для высокой плотности — 18 пикселей.
- В западноевропейских и славянских языках для средней плотности используется значение 14 пикселей, для высокой — 16 пикселей, а для низкой — 12 пикселей.
ДОПОЛНИТЕЛЬНЫЕ ЗАДАЧИ#
- Figma против веб-рендеринга
В Figma высота строки визуально центрирует текст в текстовом поле. В CSS она по-разному влияет на интервал в зависимости от модели блока. Это несоответствие потребовало ручной корректировки, особенно в свете будущих свойств CSS, таких какleading-trim. - Проблемы с межбуквенным интервалом
В то время как CSS по умолчанию использует «нормальный» межбуквенный интервал, Figma требует числовых значений. Сбросы на «нормальный» для конкретных локалей не могли использовать переменные, что усложняло реализацию.
- Стеки семейств шрифтов
- Пример стека для китайского языка:
font-family-primary: 'AnovaUI','微软雅黑体','Microsoft YaHei New','微软雅黑','Microsoft Yahei','宋体','SimSun','Helvetica Neue','Helvetica','Arial',sans-serif.
- Пример стека для китайского языка:
Использование шрифта Western обеспечило правильное отображение латинских букв и символов, сохранив при этом единообразие бренда. Однако проекты Figma, использующие только AnovaUI (шрифт SAS Brand Custom), не могли предварительно просматривать замены на основе локали через системные шрифты, что усложняло оценку проектов со смешанным содержимым. Наконец, готовясь к публикации нашей новой библиотеки, мы столкнулись с еще одной проблемой: призраками Figma.
ЧТО ТАКОЕ ПЕРЕМЕННЫЕ-ПРИЗРАКИ FIGMA ?
«Переменные-призраки» Figma — это переменные, которые остаются в проекте Figma даже после того, как они больше не связаны с какими-либо токенами дизайна, темами или компонентами. Эти переменные часто возникают из-за неполного удаления, неправильного импорта или устаревших файлов метаданных. Переменные-призраки могут появляться на панели управления переменными Figma, но фактически являются «сиротами», поскольку они отключены от любого значимого использования или ссылки.
Почему они создают проблемы для дизайнеров:
- Перепутывание и беспорядок
Переменные-призраки делают список переменных длиннее и сложнее для навигации. Дизайнеры могут испытывать трудности с определением того, какие переменные активно используются, а какие устарели. - Проектировщики избыточной работы
могут случайно попытаться использовать эти переменные, что приведет к неэффективности или несоответствиям в проекте, когда фиктивные переменные не будут работать так, как ожидалось. - Проблемы экспорта и синхронизации
При экспорте или синхронизации переменных с дизайн-системой или репозиторием фантомные переменные могут приводить к ошибкам, дублированию или конфликтам. Это усложняет поддержание согласованности между дизайн-системой и Figma. - Увеличение затрат на обслуживание.
Обнаружение и ручное удаление фиктивных переменных может занять много времени, особенно в крупномасштабных проектах с обширными наборами переменных. - Тематические несоответствия.
Призрачные переменные могут создавать несоответствия между темами, поскольку они могут ссылаться на устаревшие или неактуальные стили, что затрудняет обеспечение единого внешнего вида.
Для устранения фиктивных переменных требуется тщательное управление токенами и переменными проекта, часто включающее процессы очистки, чтобы гарантировать, что в системе останутся только релевантные переменные.
ОЧИСТКА ФАНТОМНЫХ ПЕРЕМЕННЫХ#
Чтобы избежать проблем в наших библиотеках Figma, нам сначала пришлось изолировать фантомные переменные компонент за компонентом. Выбрав символ в Figma и пройдясь по примененным режимам переменных, мы получили хорошее представление о том, к каким старым версиям переменных символ все еще подключен. Мы обнаружили отключенные переменные в библиотеке компонентов и нашей библиотеке значков, что привело к появлению составных фантомных переменных по всей системе. Мы обнаружили, что, пройдя по панели слоев вместе с фантастическим плагином под названием «Swap Variables», мы смогли переназначить все фантомные переменные в наших символах. Если бы мы не завершили этап очистки, дизайнеры не смогли бы получить доступ к переопределениям темы, плотности и локали.
РАЗРАБОТКА СИМВОЛОВ ДЛЯ ЛОКАЛИЗАЦИИ#
Чтобы символы Figma поддерживали смену языка, мы связали все текстовые слои с нашими новыми переменными, включая font-family, font-size и line height. Мы не используем переменную функцию Figma для определения текстовых строк для каждой локали (например, английский, испанский, французский), поскольку, учитывая широту и глубину наших продуктов и решений, это было бы просто слишком сложной задачей. Для нас использование существующего плагина, такого как «Переводчик», дает нам то, что нам нужно. Убедившись, что все текстовые слои переназначены переменным, вместе с плагином «Translator», мы смогли переключить целые экраны на новый язык. Это позволило нам начать тестирование наших символов на предмет непредвиденных проблем с макетом.
Мы обнаружили, что некоторые символы не поддерживают перенос текста, когда это необходимо (например, размещение длинных слов на немецком языке или коротких на японском языке). Мы изолировали эти проблемы и обновили их до автоматической компоновки для гибкого изменения размера. Такой подход гарантировал, что все наши символы Figma будут масштабируемыми и адаптируемыми для многоязыковой поддержки.
ДОСТАВКА СИСТЕМЫ#
Настроив библиотеки компонентов для поддержки локализации, мы были готовы предоставить наши библиотеки компонентов дизайнерам продуктов. В рамках этого шага мы создали «Многоязычную шпаргалку по дизайну», чтобы помочь дизайнерам понять, как настраивать макеты приложений с учетом локализации и интернационализации. Шпаргалка по многоязычному дизайну:
- Общие принципы
- Создавайте гибкие макеты, которые могут обрабатывать перенос текста и учитывать специфические для языка требования, такие как ориентация справа налево.
- Используйте реальный контент во время проектирования и разработки, чтобы выявить проблемы локализации, такие как интервалы и переносы.
- Изучите культурные ожидания вашей целевой аудитории, чтобы избежать ошибок.
- Текст и типографика
- Используйте шрифты Filament Design Systems, чтобы обеспечить поддержку всех языков.
- Избегайте использования пользовательских шрифтов, не поддерживающих жирное или курсивное начертание для нелатинских алфавитов, таких как CJK-языки.
- Оставьте дополнительное место для таких языков, как немецкий или финский.
- Избегайте жестко заданной ширины текстовых контейнеров и используйте автоматическую компоновку, чтобы обеспечить удобочитаемость длинных текстовых строк.
- Токены системы Filament Design System регулируют высоту строки в зависимости от языка; убедитесь, что вы используете переменные для высоты строки.
- Используйте жирный шрифт экономно, так как маркеры Filament переопределяют жирный стиль в некоторых языках. Вместо этого выбирайте альтернативные методы акцентирования (например, цвет или размер).
- Макет и дизайн
- Зеркальные макеты для языков с письмом справа налево (например, арабский, иврит). Выровняйте текст, значки и навигацию в соответствии с потоком языка.
- Используйте автоматическую компоновку для размещения текста различной длины.
- Избегайте встраивания текста в изображения, чтобы упростить локализацию.
- Оставляйте достаточно места вокруг текстовых элементов, чтобы избежать скученности.
- Настройки, специфичные для языка
- Адаптируйте форматы в зависимости от локали (например, ГГГГ/ММ/ДД вместо ММ/ДД/ГГГГ).
- Используйте метрические или имперские единицы измерения в зависимости от региона.
- Тестирование выравниваний и потоков для языков с письмом слева направо и справа налево.
- Готовность к локализации
- Избегайте идиом, культурных отсылок или метафор, которые могут быть некорректно переведены.
- При необходимости предусмотрите место для локализованных изображений.
- Используйте плагины перевода Figma для проверки готовности проектов к локализации и используйте настоящие переводы вместо Lorem Ipsum.
- Протестируйте с носителями языка наличие проблем с удобством использования, характерных для конкретного языка.
- Проверьте зеркальные макеты и взаимодействия на предмет удобства использования в языках с письмом справа налево.
Извлеченные уроки и будущие направления#
Извлеченные уроки. Подводя итог, можно сказать, что создание системы дизайна, готовой к локализации, было сложным, но полезным процессом, который научил нас с Марком нескольким важным урокам:
- Локализация и интернационализация должны быть приоритетными на ранних этапах.
Игнорирование принципов многоязычия на ранних этапах проектирования создает каскадные проблемы, которые впоследствии будет дорого исправить. - Семантические токены являются ключевыми.
Рефакторинг наших токенов с целью сделать их более семантическими упростил процесс локализации, снизил сложность и улучшил удобство обслуживания. - Переменные Figma многообещающие, но ограниченные.
Хотя переменные Figma представили новые возможности, их текущие ограничения — такие как отсутствие процентных значений высоты строки и требования ручной настройки — указывают на области для улучшения. - Автоматизация имеет важное значение.
Ручные усилия, такие как пересчет и ввод значений для типографики и токенов, специфичных для плотности, требуют много времени и подвержены ошибкам. Такие плагины, как «Translator» и «Swap Variables», оказались бесценными для оптимизации этой работы. - Сотрудничество имеет решающее значение.
Тесная координация с разработчиками интерфейса обеспечила соответствие наших усилий по реструктуризации JSON целям производительности и удобства использования. - Тестирование с реальным контентом не подлежит обсуждению.
Проблемы дизайна, такие как перенос текста, зеркалирование RTL и совместимость шрифтов, стали очевидны только при тестировании с реальными переводами и гибкими макетами.
Будущие направления:
В перспективе мы сосредоточимся на совершенствовании системы Filament Design System для лучшей поддержки глобальной аудитории и упрощения процесса локализации для дизайнеров:
- Автоматические зеркальные макеты для языков с письмом справа налево.
Мы планируем разработать инструменты и рабочие процессы, которые обеспечат бесшовное зеркальное отображение макетов для языков с письмом справа налево, гарантируя удобство использования таких языков, как арабский и иврит. - Улучшенная интеграция с Figma.
Пропаганда улучшений Figma, таких как поддержка процентной высоты строки и улучшенная обработка импорта переменных, останется приоритетом. - Расширенные инструменты автоматизации.
Инвестирование в более надежные плагины и пользовательские инструменты для автоматизации расчета и управления токенами по темам, плотностям и локациям сократит ручные накладные расходы. - Масштабируемая структура тестирования локализации.
Создание структуры для тестирования носителями языка и проверки реального контента поможет нам выявить проблемы локализации на ранних этапах процесса проектирования. - Расширение многоязычной шпаргалки по дизайну.
Мы продолжим совершенствовать и расширять шпаргалку, учитывая отзывы дизайнеров, чтобы она оставалась ценным ресурсом. - Взаимодействие с сообществом.
Делясь своими выводами и уроками, мы стремимся внести вклад в более широкое сообщество дизайнеров, способствуя обсуждениям по интеграции локализации и интернационализации в дизайн-системы.
Благодаря этим усилиям мы с Марком надеемся создать более инклюзивную, масштабируемую и эффективную систему проектирования, которая будет отвечать разнообразным потребностям нашей глобальной аудитории, одновременно предоставляя дизайнерам SAS возможность мыслить не только в англоязычном дизайне.
ДАЛЬНЕЙШЕЕ ЧТЕНИЕ НА SMASHINGMAG #
- « Интернационализация и локализация статических сайтов », Сэм Ричард
- « Интернационализация на основе CSS в JavaScript », Максим Чемерисюк
- « Как провести локализацию веб-сайта: не запутайтесь в переводе », Джулия Розвенс
- « 12 заповедей локализации программного обеспечения », Зак Гроссбарт
источник: https://www.smashingmagazine.com/2025/05/integrating-localization-into-design-systems/?ref=refind