Как проверить профпригодность макетов для текстов разной длинны
Графический интерфейс, содержащий тексты (да, бывают и только на пиктограммах), подразумевает изменение этих текстов. Ну должен. Ну не бывает интерфейса, который раз и не меняется никогда. Это уже мертвый интерфейс.
Чтобы тексты в интерфейсе поменять, хорошо бы обойтись без дизайнера и макета. Для этого в макете, которые были переданы в разработку, уже должны присутствовать все правила поведения на случай изменений текстов. Настроенный автолейаут в Figma, обрезание текста, максимальное количество строк и прочее — всё это передается вместе с макетом.
Да даже если к дизайнеру обращаться, то пускай этот процесс будет простым: копипастнул текст и готово.
Чтобы интерфейс не развалился при изменении текстов в Figma, у текстового слоя должны быть настроены ширины, автолейауты, поведение при непомещающихся текстах и прочее.
А правильно ли все получилось настроить, надо проверить. Вручную менять тексты долго. Поэтому в Flyphant пользуются двумя приемами:
1. Перевод на другие языки
2. Плагин с генерацией текста
Перевод
Перевод можно сделать как сторонними плагинами, так и встроенным переводчиком от Figma AI Beta. Как это работает: выбираешь один или несколько фреймов, выбираешь язык и переводишь. Все текстовые поля будут автоматически отредактированы. Тексты на другом языке непременно будут другой длинны. Такая проверка поможет и профпригодность макета к текстам разной длинны проверить, и примерить перевод, например, на английский. Для длинных слов советую использовать польский и немецкий языки.
Попробуем на примере:
Нашлась пара слабых мест:
Оказалось, что цена слегка под угрозой. И в кнопке не предусмотрен отступ от иконки. Это легко правится.
Плагин
А есть ещё плагины, которые подменяют тексты на заранее заданную тематику. Например, могут все выбранные текстовые поля заполнить адресами электронной почты. Я искал такой, чтобы все тексты в выбранном фрейме подменял на случайные. Ближе всего оказался плагин Faker:
Faker подменяет тексты на выбранный тип. А может и на случайные предложения поменять, так что текст становится не то чтобы чуть другой длинны, но совершенно непредсказуемой. Рекомендую.
Пробуем на примере:
Выбираем Single sentence. Нашлось еще пару мест:
Оказалось, что окошко неприспособлено для текстов разной длинны, что усложнит его поддержку, а следовательно увеличит стоимость. Попробуйте у себя в Figma эти два способа. Если макет развалится, значит есть что доработать.