Функция авто лейаута очень полезная. Она позволяет решать несколько задач:

  1. Удобное создание кнопок за счет расставления автоматических отступов
  2. Группировка элементов с установкой автоматических отступов

Чтобы создать кнопку при помощи auto layout - нужно создать текстовый контейнер. Далее нажать клавиатурное сокращение “Shift + A”. Тогда у вашего текстового контейнера появятся границы.

как создать autolayout пункт №1

Для того, чтобы добавить заливку – нажимаем на знак плюса в панели Fill. Теперь наш автолейаут готов к работе. В специальной панели мы можем настроить внутренние отступы у кнопки (Для визуальной красоты я рекомендую, чтобы верхний и нижний отступы были в 2 раза больше, чем боковые).

как создать autolayout пункт №2 как создать autolayout пункт №3

Для создания auto layout с использованием нескольких объектов нужно:

  1. Выделить два объекта
  2. Нажать клавиатурное сокращение Shift + A

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

как создать autolayout пункт №4 как создать autolayout пункт №5 как создать autolayout пункт №6

Таким образом вы можете очень гибко создавать сложные композиции и управлять расстоянием между элементами. Лично я в своей работе использую auto layout только для формирования кнопок, но я занимаюсь веб-дизайном, и в этой сфере данная функция не раскрывает себя полностью. Но если вы занимаетесь дизайном мобильных приложений, то эта функция вам будет крайне необходима.

Важно! Если вы хотите посмотреть, как на практике используется функция auto layout - рекомендую ознакомиться с готовыми шаблонами Figma. В них вы сможете изменять шрифт, и видеть визуальные отличия. Ссылки на шаблоны: ссылка 1 и ссылка 2