Функция Auto Layout в Figma для создания адаптивного дизайна работает следующим образом: 1

1. Пользователь создаёт новый элемент на форме и передаёт ему параметры, такие как координаты X и Y, а также другие свойства, например ширину и высоту. 1
2. Затем система использует эти параметры для определения места расположения элемента на форме. 1 Если система обнаруживает, что один элемент перекрывает другой, она может переместить его в другое место. 1
3. С помощью Auto Layout можно делать динамичные кнопки, карточки и даже целые блоки сайта или приложения — так продукт корректно отображается на разных устройствах. 3

Чтобы активировать Auto Layout, нужно выбрать любой фрейм и на боковой панели настроек в блоке Layout нажать на соответствующую кнопку. 2 Этот блок сразу переименуется в Auto Layout, и появятся все доступные настройки. 2

Некоторые из них:

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

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