Фигма. Как сделать перенос текста в auto layout на следующую строку

Речь пойдет о практической штуке. Расскажу о том, как новый функционал Figma с работой со шрифтами помог решить проблему переноса строк в блоке с auto layout.

Предистория. У нас на проекте мы работаем с карточками товаров, а именно — аптечных. Так вот, когда мы стали делать адаптивы карточек, столкнулись с проблемой: компоненты с текстом о товаре не переносятся на следующую строку, так как заключены в autolayout. При длинных данных или ресайзе получаем такое:

Фигма. Как сделать перенос текста в auto layout на следующую строку

Желаемый результат:

Что имеем? Тут у нас один элемент — постоянный (на картинке: текстовый слой «Производитель»), а второй элемент — переменный (на картинке: текстовый слой «Chinoin Pharmaceutical and Chemical Works Co, Венгрия»). Решение, где мы не разделяем текстовые слои, а пишем постоянный и переменный текст в одном слое нам не подходит — самое очевидное здесь, это то, что дальнейшие изменения этих элементов по отдельности будут проблемными: стили не будут применятся в инстансах, увеличивается тродоемкость на подстановку других текстов.

Поэтому решение такое:

Фигма. Как сделать перенос текста в auto layout на следующую строку

Шаги:

  • устанавливаем вертикальное направление у Auto layout двух желаемых элементов
  • задаем отрицательный отступ в контейнере так, чтобы второй элемент был на равне с первым
  • выставляем в Type settings отступ параграфа в размере = ширина первого элемента + отступ (на примере: ширина текста «Производитель» = 103px, отступ = 4px, получаем Paragraph indent = 113px)

Теперь, если у слоев/элементов установлено свойство Fill container, можно смело вставлять текстовые значения второй переменной любой длины и ресайзить.

Минусы:

  • придется отвязать текстовые стили у слоя с переменными данными либо создавать новые под конкретный случай
  • способ не работает для случаев, когда: оба слоя — переменные, постоянный элемент находится справа.

На этом все) С благодарностью за прочтение, с надеждой о пользе ✊🏻

4
4 комментария

Юля, спасибо за наглядность😍

1
Ответить

🙏🏻

Ответить

4/10

1
Ответить

Павел, это оценка?) Можете, пожалуйста, ее прокомментировать?

Ответить