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

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

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

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

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

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

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