Как создать адаптивный текстовый фон в Figma

Чтобы создать адаптивный текстовый фон в Figma, можно использовать инструмент Auto-Layout. 3 Он позволяет создавать динамические фреймы, которые меняются в зависимости от содержимого. 3

Пример создания адаптивного фона для текста с использованием Auto-Layout: 2

1. Добавить текст на страницу с помощью инструмента «Текст» и отформатировать его на вкладке «Дизайн». 2
2. Выбрать текст и открыть панель Auto Layout (для этого нужно нажать Shift + A на Windows и Mac). 2
3. Установить для фрейма значение «Hug Contents» (его можно найти в разделе «Фрейм» настроек на правой панели). 2
4. Установить значение «Vertical Padding» — 2 в разделе «Авто макет». 2
5. Добавить цвет заливки, нажав на значок «Плюс» рядом с «Заливка», затем на образец цвета и с помощью пикера выбрать цвет фона. 2
6. Дублировать строку текста, удерживая Alt на Windows или Option на Mac, нажав на текст и перетащив его вниз. 2 Это скопирует текст с настройками. 2 Затем можно ввести новый текст, и цвет фона останется прямо за ним, а не будет распространяться дальше. 2

Также для создания адаптивного фона для текста можно использовать инструмент «Текст». 4 Для этого нужно создать текстовый слой, нарисовать прямоугольник или фрейм, который будет служить подложкой для текста, переместить текстовый слой в прямоугольник или фрейм, отрегулировать размеры и настроить стиль подложки (изменить цвет заливки и обводки). 4