Ignore auto layout в Figma: как положить бейдж поверх элемента
Бейдж с уведомлением, кнопка закрытия в углу карточки, декоративная полоска на краю — всё это не вписывается в авто-раскладку.
Для таких элементов в Figma есть переключатель Ignore auto layout: он убирает слой из потока, оставляя его внутри фрейма.
Как появилось название
Функция была известна как Absolute position — по аналогии с CSS.
Позже её переименовали в Ignore auto layout, поведение при этом не изменилось.
Старые туториалы используют прежнее название, поэтому стоит держать в голове оба варианта.
В интерфейсе иконка стоит справа от заголовка Position в правой панели.
Что делает переключатель
Слой с включённым Ignore auto layout остаётся внутри авто-лейаут фрейма, но выпадает из потока.
Он и соседние элементы перестают влиять друг на друга при изменении размеров.
Слой ведёт себя как объект в обычном фрейме: его положение задаётся вручную.
Именно так делают наложения, которые не должны раздвигать содержимое.
Как включить
Выделите дочерний слой внутри auto layout фрейма.
В правой панели найдите раздел Position и нажмите кнопку Ignore auto layout.
Альтернатива — перетащить объект в авто-лейаут фрейм с зажатой клавишей Control на Mac или S на Windows.
Если кнопки не видно, проверьте выделение: она доступна только для ребёнка auto layout фрейма.
Что происходит с соседями
Соседние элементы игнорируют такой слой: они не сдвигаются, чтобы дать ему место.
Сам слой тоже не подчиняется отступам и выравниванию родителя.
В результате можно поставить бейдж в правый верхний угол карточки, и он не сломает сетку.
Это ключевое отличие от обычного дочернего слоя, который участвовал бы в раскладке.
Ограничения
Для слоя с Ignore auto layout недоступны настройки изменения размера и часть параметров auto layout.
Зато к нему применимы constraints — как к объекту в обычном фрейме.
То есть при ресайзе родителя слой можно привязать к правому верхнему углу, и он останется на месте визуально.
Комбинация «выпал из потока + constraints» и даёт предсказуемое поведение бейджа.
Практика: бейдж на карточке
Соберите карточку на auto layout: картинка, заголовок, описание.
Добавьте внутрь фрейм бейджа и включите Ignore auto layout.
Поставьте его в правый верхний угол и задайте constraints Right и Top.
Проверьте: при растягивании карточки бейдж остаётся в углу, а текст не сдвигается.
Практика: кнопка закрытия
Кнопка закрытия в модальном окне — классический случай наложения.
Если положить её в поток, она будет влиять на отступы контента.
С Ignore auto layout кнопка висит в углу, а содержимое занимает свою область.
Не забудьте, что для клика в прототипе слой должен быть достаточно крупным.
Практика: декоративные элементы
Полоска под заголовком, уголок ленты, точка статуса — все они выигрывают от выпадения из потока.
Но декоративные элементы не должны перекрывать интерактивные зоны.
Проверьте порядок слоёв: наложение работает по z-порядку, а не по положению.
Если декор перехватывает клик, поднимите его или отключите перехват в прототипе.
Когда лучше без него
Если элемент должен участвовать в раскладке — например, иконка рядом с текстом — Ignore auto layout только навредит.
Если нужен перенос по строкам, работает wrap, а не абсолютное позиционирование.
Если элемент должен тянуться вместе с родителем, нужен Fill container, а не выпадение из потока.
О правилах раскладки — в статье об auto layout.
Типичные ошибки
Кнопка не появляется. Выделен сам auto layout фрейм, а не его ребёнок.
Слой «прыгает» при ресайзе. Не заданы constraints.
Элемент пропал. Он ушёл за границы фрейма, а обрезка включена.
Бейдж перекрывает текст. Порядок слоёв выше, чем нужно.
Не работает клик в прототипе. Декоративный слой лежит поверх интерактивного.
Макет «поехал» после смены auto layout. Часть слоёв была абсолютной и осталась на месте.
Связка с компонентами
В компоненте Ignore auto layout работает так же, как в обычном фрейме.
Это значит, что бейдж можно сделать частью варианта и управлять им через свойства.
Если бейдж не должен быть у всех вариантов, его выносят в отдельный слой и скрывают.
О свойствах компонентов подробнее — в статье о вариантах компонентов.
Проверка перед передачей
Пролистайте макет с включённым ресайзом фреймов.
Убедитесь, что наложения не перекрывают важный контент.
Проверьте, что в Dev Mode такие слои помечены понятным образом, иначе разработчик не поймёт позиционирование.
Добавьте комментарий, если слой намеренно выпадает из потока.
Наложения в списках
В списках на auto layout бейдж-счётчик — самый частый случай наложения.
Если слой обрезается, проверьте clip content у родителя.
Проверьте, что бейдж не перекрывает текст при длинном заголовке.
Как это читает разработчик
В Dev Mode слой с Ignore auto layout показывается с абсолютным позиционированием.
Это близко к CSS position: absolute внутри контейнера с flex.
Если поведение неочевидно, добавьте комментарий прямо в макете.
Работа в команде
Договоритесь, как помечать такие слои: например, префиксом «overlay» в имени.
Иначе при рефакторинге макета слой легко случайно вернуть в поток.
Где ломается
Позиция не сохраняется. Включён автолейаут у самого слоя.
Слой растянулся не туда. Constraints заданы по левому краю вместо правого.
Обрезка съедает бейдж. У родителя включён clip content.
Двойной отступ. Бейдж остался в потоке и одновременно получил отступ.
Родитель стал другим. Изменён auto layout flow, а абсолютные слои не пересчитались.
FAQ
Ignore auto layout — это и есть absolute position?
Да, это та же функция: старое название заменили, поведение осталось прежним.
Можно ли включить её для самого фрейма авто-лейаута?
Нет, переключатель доступен только для дочернего слоя внутри такого фрейма.
Работают ли constraints для таких слоёв?
Да, слой ведёт себя как объект обычного фрейма, поэтому constraints применимы.
Почему бейдж не виден в варианте компонента?
Возможно, слой скрыт или вынесен за границы фрейма с включённой обрезкой.