Если вы только входите в дизайн, Auto Layout — штука вообще незаменимая. Без нее любой макет быстро превращается в игру под названием «подвигай на два пикселя вправо, теперь на один вниз, а теперь все опять поехало». С автолейаутом такого меньше. Вы не подгоняете каждый блок вручную, а собираете понятную систему, которая сама держит порядок.
Figma позволяет добавить Auto Layout через Shift + A, через правую панель или через контекстное меню, а сам автолейаут работает на фреймах, в том числе созданных из группы элементов. Но что все это значит в отдельно взятой задаче?
Эта статья — для тех, кто только осваивает Figma, делает первые сайты, формы, карточки и пока путается в отступах, контейнерах и поведении текста. К концу материала вы сможете собрать базовый интерфейс без боли: карточку, форму и список. Плюс поймете, где Auto Layout реально помогает, а где можно не усложнять.
А если вы как раз ищете профессию, в которой можно вырасти в доходе, перейти на удаленку и собрать сильное портфолио с нуля, посмотрите Курс Графический дизайнер. В Логомашине такие навыки дают не в формате сухой теории, а через практику, разборы, помощь кураторов и учебный ритм, который можно подстроить под свою жизнь.
База перед стартом: как устроен Auto Layout в Figma
Термины, без которых дальше будет сложно
Сначала разложим все по полочкам.
- Frame — это контейнер, в котором живут ваши элементы.
- Direction — направление, по которому объекты выстраиваются: вертикально, горизонтально или, в новых сценариях, по сетке.
- Spacing — расстояние между внутренними элементами.
- Padding — внутренние отступы по краям контейнера.
- Alignment — выравнивание содержимого.
- Resizing — поведение ширины и высоты: тянуться, оставаться фиксированными или подстраиваться под содержимое.
Когда Auto Layout нужен обязательно
Нужен почти всегда, если вы собираете:
- карточки
- формы
- меню
- списки
- табы
- повторяющиеся блоки с разной длиной текста
Необязательно включать его в каждом черновике, если вы просто набрасываете один статичный экран и пока еще думаете над композицией. Но как только макет начинает жить, меняться, расти — без него становится тяжко.
Ключевое для дизайнеров: если блок должен выдерживать правки, разный текст и рост проекта, лучше сразу собирать его через автолейаут.
Подготовка: что создать ДО автолейаута
Перед тем как жать Shift + A, подготовьте основу:
- текстовые стили
- понятные размеры кнопок и иконок
- базовую сетку
- нормальную иерархию слоев
Ошибка новичка тут простая: сначала накрутить автолейаут, а потом понять, что внутри случайные размеры, хаос в названиях и три разных стиля текста. Работать можно, но удовольствия мало.
Рекомендуемый порядок работы в веб-дизайне
Самый спокойный маршрут такой:
- Собираете структуру блока.
- Проверяете, что элементы стоят логично.
- Включаете Auto Layout.
- Настраиваете поведение контейнера.
- Тестируете на длинном тексте и изменениях.
Вот здесь и появляется тот самый эффект «макет сам держится».
Как сделать Auto Layout в Figma с нуля
Шаг 1: Создаём контейнер
Выделите элементы, которые должны работать как одна группа. Например: иконка + заголовок + текст кнопки. После этого:
- нажмите Shift + A;
- или добавьте Auto Layout через правую панель;
- или через правый клик по объекту.
Figma поддерживает все три варианта.
Если вы выделяли просто слои, Figma сама обернет их в новый фрейм с автолейаутом. Это удобно и для новых блоков, и для уже готовых групп.
Шаг 2: Задаём направление
Теперь выбираете направление:
- Vertical — если элементы должны идти сверху вниз;
- Horizontal — если слева направо.
Шаг 3: Настраиваем spacing и padding
Вот тут многие путаются.
- Spacing — это расстояние между элементами внутри блока.
- Padding — это воздух между контентом и краями контейнера.
Если сказать совсем по-простому: spacing отвечает за «пробелы между соседями», padding — за «поля вокруг всей компании».
Шаг 4: Выравнивание и поведение контента
Дальше смотрите на выравнивание и режимы размера. Например, элемент может быть:
- фиксированным;
- подстраиваться под содержимое;
- занимать доступное пространство внутри родительского контейнера.
Figma поддерживает режим Fill container, но он доступен, когда объект вложен в другой контейнер с автолейаутом. Это важный момент, потому что новички часто ищут его «в пустоте» и думают, что все сломалось.
Шаг 5: Проверяем на «стресс-тесте»
А теперь самое полезное. Удлините заголовок. Удалите кнопку. Добавьте вторую строку текста. Если блок не развалился — вы все сделали правильно. Если поплыл, значит, надо проверить размер контейнера, выравнивание или режим заполнения.
Главное: нормальный автолейаут всегда нужно тестировать на “неудобном” контенте. На коротком тексте красиво выглядит почти все.
Настройка: основные параметры, которые чаще всего путают
Resizing: как не ломать макет
Тут главный вопрос: что у вас должно тянуться, а что — нет. Кнопке иногда нужна фиксированная высота. Карточке — гибкая. Строке списка — поведение по содержимому. Если все подряд поставить наугад, макет быстро начнет жить своей жизнью.
Fill контейнера: когда блок должен растягиваться
Это особенно полезно в формах, карточках и длинных строках. Например, заголовок может занимать все доступное место, а иконка справа — оставаться фиксированной. Именно за такие вещи любят Auto Layout Figma: он позволяет собрать блок, который нормально ведет себя в реальной работе, а не только на красивом скриншоте.
Padding: симметричный и разный
Иногда всем сторонам нужен одинаковый отступ. Иногда сверху и снизу — один, а по бокам — другой. Это особенно заметно в карточках с плотной типографикой или в кнопках с иконкой.
Границы и отладка
Если что-то ведет себя странно, не психуйте. Просто по очереди проверяйте:
- какой контейнер главный;
- у кого включен Fill;
- не перепутан ли padding со spacing;
- не слишком ли глубоко вы вложили блоки друг в друга.
Практика № 1: собираем карточку товара/сервиса
Цель
Наша задача — сделать карточку, которая не ломается, если название внезапно стало длиннее, а описание — короче.
Шаги сборки
Собираем структуру:
- общее фото или заглушка;
- заголовок;
- описание;
- кнопка.
Сначала делаем внутреннюю колонку с текстом и кнопкой. Потом объединяем ее с изображением или верхней частью карточки. Если внутри блока есть и вертикальная, и горизонтальная логика, используйте вложенные автолейауты.
Тестирование
Проверяем:
- длинный заголовок;
- короткое описание;
- длинное описание;
- разную длину кнопки.
Вывод для дизайнеров: хорошая карточка не требует ручной правки каждый раз, когда меняется контент. В этом и есть сила автолейаута.
Практика № 2: форма как демонстрация управляемости
Цель
Собрать форму, которая не разъезжается, если появляется ошибка, подсказка или дополнительный текст.
Типовая структура
Вертикальный контейнер:
- label
- поле ввода
- строка ошибки
- кнопка
Если строка ошибки появляется не всегда, предусмотрите это заранее. Тогда вам не придется потом руками двигать весь экран на 8 пикселей вниз.
Важные настройки
Следите, чтобы поля были в одной логике по ширине, а расстояния между элементами были одинаковыми. Именно здесь часто выручает настройка горячих клавиш автолейаута в Фигме и привычка быстро добавлять контейнеры через Shift + A, а не собирать все мышкой.
Самые частые ошибки новичков и быстрые решения
Вот что ломает макеты чаще всего:
- контейнер не растягивается — значит, не тот режим размера;
- отступы съехали — перепутаны padding и spacing;
- текст вылезает — блок не протестирован на длинной строке;
- все слишком вложено — контейнеры сделаны без плана;
- один блок ведет себя странно — значит, где-то нарушена логика родительского контейнера.
Auto Layout и компоненты: как строить дизайн-систему
Когда базу освоили, следующий шаг — компоненты. Кнопка, карточка, список, таб — все это становится намного удобнее, когда не собирается заново каждый раз, а живет как система. Автолейаут здесь очень помогает: компонент можно менять, растягивать, адаптировать под текст и при этом не пересобирать вручную.
Именно поэтому Онлайн-школа дизайна Логомашина делает упор не на «посмотрели урок и забыли», а на проектную практику. Когда вы собираете реальные блоки, ловите ошибки, показываете работу куратору и дорабатываете, навык закрепляется совсем по-другому. Плюс в школе есть комьюнити, где можно учиться у спикеров, выпускников и людей, которые уже прошли этот путь из «я новичок и боюсь» в «я беру первые проекты».
Как применить навык на реальном веб-макете
Где Auto Layout ускорит работу
Он особенно полезен в:
- карточках на лендинге;
- формах;
- списках преимуществ;
- меню;
- блоках с отзывами;
- повторяющихся секциях.
Если вам хочется не просто понять теорию, а реально научиться собирать интерфейсы, карточки, формы и макеты без ручной боли, лучший ход — отрабатывать такие вещи на практике. На курсе по графическому дизайну и смежных модулях именно так и делают: дают задачу, вы собираете блок, получаете разбор, исправляете ошибки и растете не в вакууме, а в понятной системе.
Заключение + чеклист «готовы ли вы к Auto Layout»
Проверьте себя:
- вы добавляете автолейаут через Shift + A или другим понятным способом;
- понимаете разницу между Direction, Spacing и Padding;
- умеете тестировать блок на длинном тексте;
- не путаетесь в режимах размера;
- можете собрать карточку, форму и список без ручной подгонки.
Если да — вы уже на хорошем старте. А дальше важно не только уметь собирать макеты, но и общаться с заказчиками, искать клиентов и спокойно работать на фрилансе. Этому в Логомашине посвящен отдельный модуль. Кстати, на будущее сохраните себе шаблон договора на оказание услуг дизайна — пригодится, когда учебные работы начнут превращаться в настоящие проекты.
- Научим создавать логотипы, дизайн упаковки, фирменный стиль, рекламные баннеры, айдентику
- Дадим безлимитную обратную связь по учебным и реальным проектам
- Подарим 2 курса: нейросети и английский для дизайнеров
Краткое содержание
Можно ли сделать автолейаут из существующей группы?
Да. Figma умеет превращать выделенные слои и группы в новый авто-контейнер.
Что делать, если нужно частично фиксировать размеры?
Проверить режим размера у конкретного элемента: фиксированный, по содержимому или на заполнение контейнера.
Как работать с иконками разных размеров?
Заранее привести их к логичной системе и проверять выравнивание внутри строки.
Почему макет странно ведет себя при изменении текста?
Обычно причина в размере текстового блока, вложенности контейнеров или в том, что вы не протестировали длинную строку заранее.
Нужно ли использовать Auto Layout для всех блоков?
Нет. Но для форм, карточек, списков и повторяющихся элементов — почти всегда да.
