Как убрать автолейаут в фигме

Когда вы работаете в Figma, автолейаут (Auto Layout) — это мощный инструмент, который позволяет автоматически адаптировать размеры и расположение элементов внутри контейнера. Однако в некоторых случаях он становится препятствием: элементы сжимаются некорректно, текст переносится не так, как нужно, или вы просто хотите вернуться к ручному позиционированию для точной настройки макета. Убрать автолейаут в Figma можно быстро, но важно понимать, как это влияет на структуру вашего дизайна и какие последствия могут возникнуть.

В современном UI-дизайне автолейаут — это стандарт. Он ускоряет создание адаптивных интерфейсов, особенно при работе с компонентами, кнопками, списками и формами. Но не всегда автоматика работает в вашу пользу. Иногда вы создаёте сложный макет, где каждый пиксель важен — например, при адаптации под конкретный экран мобильного устройства, при ретушинге старых макетов или при подготовке дизайна для разработчиков, которым нужна жёсткая фиксация элементов. В таких случаях автолейаут мешает, а не помогает. Он может заставлять текст сжиматься до нечитаемого размера, сдвигать иконки, менять отступы без вашего ведома или даже ломать вертикальное выравнивание. И хотя Figma предлагает множество настроек для управления автолейаутом, иногда проще и надёжнее полностью отключить его.

Как убрать автолейаут в Figma: пошаговая инструкция

Удаление автолейаута — одна из самых простых операций в Figma, но её нужно выполнять правильно, чтобы не потерять структуру дизайна. Вот точный алгоритм:

1. Выберите объект (группу, фрейм или компонент), у которого включён автолейаут. Вы узнаёте это по значку «↔» или «↕» в панели свойств справа.
2. Откройте панель свойств (если она скрыта — нажмите Cmd+Option+4 на Mac или Ctrl+Alt+4 на Windows).
3. Найдите раздел Auto Layout. Он будет выделен синим цветом и содержать параметры: направление, выравнивание, отступы, расстояние между элементами.
4. Нажмите кнопку «Убрать автолейаут» (Remove Auto Layout). Она расположена внизу этого раздела, рядом с иконкой шестерёнки.
5. После нажатия автолейаут исчезнет, а объект превратится в обычную группу. Параметры выравнивания и отступов останутся, но больше не будут автоматически применяться при изменении размера.

После удаления автолейаута вы можете свободно перемещать, масштабировать и изменять размеры внутренних элементов вручную. Это особенно полезно, когда вы работаете с дизайном, который требует точной привязки к сетке, например, при ретушинге UI-элементов для iOS или Android.

Что происходит с элементами после удаления автолейаута

Многие пользователи опасаются, что при удалении автолейаута Figma «сломает» их макет — элементы разлетятся, исчезнут отступы, текст станет нечитаемым. Это миф. Figma сохраняет текущее положение, размеры и стили всех объектов внутри контейнера. Единственное, что меняется — это поведение: больше нет автоматического переноса, растяжения или сжатия.

После удаления автолейаута:
— Все элементы остаются на своих местах.
— Отступы (padding) и расстояния между дочерними элементами (spacing) не исчезают — они просто становятся статичными.
— Вы больше не можете использовать параметры вроде «Fill container» или «Hug contents».
— Компоненты, которые были основаны на автолейауте, теряют динамические свойства, но не удаляются.

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

Когда убирать автолейаут — и когда оставлять

Не все ситуации требуют удаления автолейаута. Вот когда он полезен, а когда — мешает:

Представьте, что вы проектируете экран авторизации. Вы используете автолейаут для поля ввода email и пароля — это логично: если пользователь введёт длинный email, поле расширится. Но когда вы готовите финальный макет для разработчиков — вы уже знаете, что поле должно быть 320px шириной. Автолейаут в этом случае — источник неопределённости. Убрав его, вы даёте разработчику чёткое указание: «Это не растягивается — фиксировано».

Ошибки при удалении автолейаута и как их избежать

Даже простые действия могут привести к неприятным последствиям, если не соблюдать осторожность. Вот самые частые ошибки:

Ошибка 1: Удаление автолейаута из основного компонента без копирования

Если вы удаляете автолейаут из основного компонента, все его экземпляры на макете также потеряют эту функцию. Это может сломать десятки экранов, если вы не ожидали такого поведения.

Решение:

Перед удалением сделайте дубликат компонента: выделите его → Cmd+D → перетащите в другое место → уберите автолейаут только у дубликата. Основной компонент останется нетронутым.

Ошибка 2: Не проверяете отступы и выравнивание после удаления

После удаления автолейаута элементы могут «съехать» относительно друг друга, особенно если вы использовали выравнивание по центру или растяжение. Figma сохраняет позиции, но не всегда корректно интерпретирует их в новом контексте.

Решение:

Всегда включите «Сетку» (Cmd+') и «Привязку к сетке» после удаления автолейаута. Проверьте, не сдвинулись ли элементы на 1–2 пикселя. Особенно критично для иконок и линий.

Ошибка 3: Забыли, что автолейаут влияет на экспорт

Автолейаут влияет на то, как Figma экспортирует изображения. Если вы убрали его, а потом экспортите элемент в PNG — размер может измениться, потому что больше нет «обёртки» с динамическим размером.

Решение:

Перед экспортом убедитесь, что фрейм или группа имеет фиксированный размер. Если вы экспортируете кнопку — задайте ей точный размер в панели свойств (например, 120×48 px), иначе Figma может сжать её до минимального размера содержимого.

Альтернативы: как управлять автолейаутом без удаления

Иногда убирать автолейаут совсем не нужно — достаточно его правильно настроить. Вот как можно «обойти» проблему, не удаляя функцию:

• Используйте «Hug contents» вместо «Fill container» — тогда элемент будет подстраиваться под содержимое, а не растягиваться.
• Задайте фиксированную ширину или высоту в панели автолейаута — это ограничит динамику, не отключая её полностью.
• Примените «Constraints» (ограничения) к дочерним элементам: например, «Left + Right» для текста, чтобы он не выходил за границы.
• Используйте плейсхолдеры для тестирования: вставьте длинный текст, чтобы увидеть, как ведёт себя элемент, и только потом принимать решение.

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

Вопросы и ответы

Заключение

Убирать автолейаут в Figma — это не ошибка, а осознанный дизайн-решение. Он полезен на этапе прототипирования и создания гибких компонентов, но в финальных макетах, особенно под конкретные устройства, он может стать источником неточностей. Главное — не бояться его отключать, когда это необходимо. Всегда делайте резервные копии, проверяйте позиции элементов после изменений и учитывайте, как автолейаут влияет на экспорт и взаимодействие с разработчиками.

Когда вы убираете автолейаут, вы не теряете контроль — вы его восстанавливаете. Вы переходите от «автоматики для всех» к «точности для конкретного случая». Это признак зрелого подхода к дизайну.

• Автолейаут убирается через кнопку «Remove Auto Layout» в панели свойств.
• Элементы сохраняют своё положение и стили — только теряют динамическое поведение.
• Не удаляйте автолейаут из основного компонента без предварительного дублирования.
• Всегда проверяйте выравнивание и размеры после удаления автолейаута.
• Иногда достаточно настроить автолейаут, а не удалять его — используйте фиксированные размеры и «Hug contents».