Кратко и по делу: Автолейауты в Figma

Сегодня поговорим об автолейаутах: что это такое и как правильно их использовать. Если вы запутались в этой теме, эта статья должна вам помочь.

Она содержит всё, что нужно знать об автолейаутах.

Что такое автолейаут?

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

Почему стоит использовать автолейаут?

Если вы будете применять автолейауты каждый раз, когда вам нужно будет добавить в контейнер контент или продублировать такие элементы, как списки или карточки, вам не придётся беспокоиться о выравнивании и изменении размеров элементов, чтобы им хватило места и они поместились внутри контейнера.

При правильной настройке всё регулируется автоматически.

Свойства автолейаутов

Фреймы с автолейаутами обладают совершенно другими свойствами, нежели обычные. Когда вы активируете автолейаут, изменения появляются на правой боковой панели. Давайте рассмотрим эти свойства.

— Direction — стрелки показывают, как будут выстраиваться блоки внутри фрейма с автолейаутом: вертикально вниз или горизонтально направо

— Spacing between items — отступы между блоками внутри фрейма с автолейаутом

— Alignment — тип выравнивания всех блоков внутри фрейма с автолейаутом

— Horizontal padding — горизонтальные отступы между контентом и краями контейнера

— Vertical padding — вертикальные отступы между контентом и краями контейнера

— Distribution — дополнительные параметра фрейма с автолейаутом

Изменение размеров фрейма с автолейаутом — функция Resizing

Если вы хотите, чтобы фрейм с автолейаутом был полностью плавным, примените к текстовым слоям свойство Fill width. Текстовые слои с фиксированным размером (свойство Fixed width/height) не будут следовать за изменением текста, что приведет к перекрытию слоев во фреймах с автолейаутами.

Свойство Fixed width / height

Если установить для фрейма с автолейаутом свойство Fixed width/height, его размеры останутся неизменными независимо от размера размещенного в нём контента, и они не будут реагировать на изменения объектов внутри него.

Свойство Hug contents

С помощью свойства Hug контейнер будет сохранять минимально возможные размеры вокруг объектов, которые находятся внутри него. Свойство Hug contents полезно для текстовых слоев, когда их помещают в один фрейм с автолейаутом и подстраиваются их длину относительно друг друга, чтобы выровнять внутри контейнера.

Свойство Fill container

Объекты, для которых установлено свойство Fill container, растягиваются на всю ширину и/или высоту родительского фрейма. Старайтесь устанавливать для элементов фрейма с автолейаутом свойства Fill container или Hug contents, чтобы дизайн оставался отзывчивым при любом изменении размеров фрейма.

Надеюсь, эти советы оказались полезными!

Если сейчас всё это кажется непонятным, не волнуйтесь! Чтобы разобраться в схеме работы автолейаутов и привязок (constraints), требуется практика.