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

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

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

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

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

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

Шаги:

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

Минусы:

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