Как использовать функцию Auto Layout для автоматической компоновки текста в Figma?

Чтобы использовать функцию Auto Layout для автоматической компоновки текста в Figma, нужно: skillbox.ru

1. Выбрать любой фрейм. skillbox.ru
2. На боковой панели настроек в блоке Layout нажать на иконку «Use auto layout» или использовать горячую клавишу Shift + A. practicum.yandex.ru Также можно кликнуть на фрейм правой кнопкой мыши и в выпадающем меню выбрать «Add auto layout». practicum.yandex.ru
3. В появившихся настройках настроить параметры Auto Layout, например:

• H и W регулируют ширину и высоту блока. skillbox.ru Можно сделать так, чтобы блок сам подстраивался под содержимое, указать минимальный и максимальный размер. skillbox.ru
• Стрелки указывают, как будут выстраиваться элементы внутри фрейма с Auto Layout. skillbox.ru Стрелка ↓ означает вертикальное выравнивание, а → — горизонтальное. skillbox.ru
• Параметр «Отступ» задаёт отступы между элементами. skillbox.ru Отступ может быть отрицательным — тогда элементы будут накладываться друг на друга. practicum.yandex.ru
• Параметры внешних полей задают внешние поля сверху и снизу соответственно. skillbox.ru Нажав на иконку справа, можно задать отступ для каждого поля по отдельности. practicum.yandex.ru
• В дополнительных настройках можно указать вынос обводки блоков, перекрытие при отрицательных отступах и выравнивание по базовой линии текста. skillbox.ru

Например, чтобы сделать адаптивную кнопку с Auto Layout: mailfit.com

1. Написать любой текст. skillbox.ru
2. На панели слоёв кликнуть по тексту правой кнопкой мыши и выбрать Frame Selection. mailfit.com
3. Выделить получившийся фрейм, добавить ему фон в блоке Fill в настройках и нажать на «+» рядом с Auto Layout. mailfit.com
4. В появившихся настройках указать вертикальные и горизонтальные отступы. skillbox.ru

Кнопка сама адаптируется под длину текста благодаря свойству Hug в параметрах ширины и высоты — оно всегда активируется по умолчанию, но его можно поменять. skillbox.ru Если в параметре ширины или высоты указать свойство Fixed, то модуль кнопки получит фиксированный размер и не будет следовать за изменением текста. skillbox.ru

Для выравнивания текстовых элементов по базовой линии (Align text baseline) нужно создать «Заголовок» и «Основной текст», выделить их и превратить в автолейаут. chulakov.school На правой панели в разделе Auto layout нажать на иконку «…» и в поле Align text baseline выбрать галочку. chulakov.school Текстовые элементы автоматически выровняются по базовой линии. chulakov.school