Собрали кнопку в Figma — а текст вылез за рамку? Картинка съехала при масштабировании? Всё ломается, когда меняете размер? Это значит, пора познакомиться с Auto Layout. Объясняю, что это такое и как он экономит время уже с первой кнопки.
Что такое Auto Layout — простыми словами
Auto Layout — это автоматическое выравнивание и поведение объектов в Figma.
Вы настраиваете логику один раз — и больше не двигаете каждый пиксель вручную.
Представьте:
- Вы создали кнопку с текстом.
- Изменили надпись с "ОК" на "Подробнее" — и кнопка сама увеличилась.
- Добавили иконку — и всё выровнялось автоматически.
- Меняете ширину карточки — отступы остаются ровными.
Это и есть Auto Layout. Он делает элементы «умными».
Зачем Auto Layout нужен прямо сейчас, а не «потом»
Многие новички думают: «Сначала я научусь делать красиво, потом разберусь с Auto Layout». Но это как собирать шкаф без отвертки — неудобно, криво и долго.
Вот что Auto Layout даёт вам уже с первой кнопки:
- Кнопки с автошириной
- Аккуратные карточки
- Блоки, которые адаптируются
- Быстрая замена текста без поломки дизайна
- Экономия времени на 50% и больше
Как добавить Auto Layout — пошагово
1. Создайте элемент
Например, текст + прямоугольник = кнопка.
2. Объедините в фрейм
Выделите оба элемента → ⌘ + Option + G (Mac) или Ctrl + Alt + G (Windows).
Или нажмите правой кнопкой → Frame Selection.
3. Примените Auto Layout
Нажмите Shift + A или в правой панели кликните + Auto Layout.
4. Настройте отступы и выравнивание
Справа задайте:
- Направление (горизонтально или вертикально)
- Внутренние отступы (Padding)
- Расстояние между элементами
- Выравнивание по центру
Теперь всё масштабируется и адаптируется автоматически.
Что будет, если не использовать Auto Layout
- Придётся вручную двигать каждый элемент
- Дизайн «сыпется» при любом изменении
- Больше правок, больше ошибок
- Разработчики будут страдать при вёрстке
- Вероятность того, что всё «поедет» при масштабировании — 100%
Вывод
Auto Layout — это не «профи-фича», а базовый навык.
Он нужен уже на этапе первой кнопки, первого макета и первой карточки.
Освоив его, вы будете работать быстрее, чище и как настоящий UX/UI-дизайнер.
Не тратьте время на ручные доработки. На сайте LF-CODE вы найдёте готовые модификации для Тильды — от эффектных анимаций до полезных скриптов. Команда LF-CODE поможет адаптировать их под ваш сайт или реализовать нужную доработку с нуля.
🔧 Есть техподдержка — пишите в Telegram , мы поможем разобраться.
📢 Подписывайтесь на Telegram канал, чтобы получать свежие обновления для сайтов!