Фигма. Как сделать перенос текста в auto layout на следующую строку
Речь пойдет о практической штуке. Расскажу о том, как новый функционал Figma с работой со шрифтами помог решить проблему переноса строк в блоке с auto layout.
Предистория. У нас на проекте мы работаем с карточками товаров, а именно — аптечных. Так вот, когда мы стали делать адаптивы карточек, столкнулись с проблемой: компоненты с текстом о товаре не переносятся на следующую строку, так как заключены в autolayout. При длинных данных или ресайзе получаем такое:
Желаемый результат:
Что имеем? Тут у нас один элемент — постоянный (на картинке: текстовый слой «Производитель»), а второй элемент — переменный (на картинке: текстовый слой «Chinoin Pharmaceutical and Chemical Works Co, Венгрия»). Решение, где мы не разделяем текстовые слои, а пишем постоянный и переменный текст в одном слое нам не подходит — самое очевидное здесь, это то, что дальнейшие изменения этих элементов по отдельности будут проблемными: стили не будут применятся в инстансах, увеличивается тродоемкость на подстановку других текстов.
Поэтому решение такое:
Шаги:
- устанавливаем вертикальное направление у Auto layout двух желаемых элементов
- задаем отрицательный отступ в контейнере так, чтобы второй элемент был на равне с первым
- выставляем в Type settings отступ параграфа в размере = ширина первого элемента + отступ (на примере: ширина текста «Производитель» = 103px, отступ = 4px, получаем Paragraph indent = 113px)
Теперь, если у слоев/элементов установлено свойство Fill container, можно смело вставлять текстовые значения второй переменной любой длины и ресайзить.
Минусы:
- придется отвязать текстовые стили у слоя с переменными данными либо создавать новые под конкретный случай
- способ не работает для случаев, когда: оба слоя — переменные, постоянный элемент находится справа.
На этом все) С благодарностью за прочтение, с надеждой о пользе ✊🏻