Как в фигме перенести на задний план

В Figma перенести объект на задний план можно с помощью команды «Send to Back» в контекстном меню или горячих клавиш. Основной способ — выделить нужный слой и нажать Ctrl+Shift+[ (на Windows) или Cmd+Shift+[ (на Mac), что мгновенно отправит элемент в самый низ стека. Альтернативно, через правую панель Layers можно перетаскивать слои вручную, устанавливая нужный порядок.

Порядок слоёв в Figma: основы компоновки

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

Понимание этого принципа критически важно для точного управления визуальной иерархией. Например, при создании карточки продукта фоновый прямоугольник должен быть самым нижним элементом, а текстовые надписи и иконки — выше. Если порядок нарушен, текст может оказаться под фоном и стать невидимым.

Изменение порядка слоёв влияет не только на внешний вид, но и на взаимодействие с элементами. При клике в рабочей области Figma выбирает верхний доступный слой. Если важная кнопка скрыта под прозрачным прямоугольником, пользователь не сможет по ней кликнуть без предварительной корректировки порядка.

Как перенести на задний план: 3 основных способа

Перемещение элемента на задний план в Figma реализовано через три интуитивных метода: горячие клавиши, контекстное меню и ручное управление в панели слоёв. Все они приводят к одному результату, но подходят под разные сценарии работы.

Способ 1: Горячие клавиши (быстрый доступ)

Самый эффективный способ — использование комбинации клавиш. Чтобы отправить выбранный объект на самый нижний уровень, нажмите:

1. Выделите нужный слой (или несколько слоёв).
2. На Windows: Ctrl + Shift + [
3. На macOS: Cmd + Shift + [

Эта команда называется «Send to Back» и помещает элемент в самое дно стека текущего контейнера — будь то фрейм, группа или страница.

Если нужно просто понизить слой на один уровень, используйте Ctrl+[ (Cmd+[ на Mac). Это действие называется «Send backward». Оно полезно, когда не требуется полное перемещение на задний план, а лишь небольшая корректировка позиции.

Способ 2: Контекстное меню (визуальный контроль)

Для тех, кто предпочитает мышь, Figma предоставляет доступ через правый клик. После выделения объекта:

• Щёлкните правой кнопкой мыши по элементу.
• В выпадающем меню найдите раздел «Arrange».
• Выберите пункт «Send to Back».

Этот метод особенно удобен новичкам, так как позволяет визуально увидеть все доступные действия: помимо отправки на задний план, здесь также есть «Bring to Front», «Send backward» и «Bring forward».

Контекстное меню адаптивно: если вы работаете внутри компонента или instance, оно покажет только допустимые операции. Также оно учитывает, выделен ли один или несколько объектов.

Способ 3: Перетаскивание в панели слоёв (точная настройка)

Панель «Layers» в правом верхнем углу — это визуальное представление z-порядка. Здесь можно вручную перетаскивать слои, чтобы изменить их позицию:

• Откройте панель Layers (если скрыта — кликните по иконке в правом верхнем углу).
• Найдите нужный слой.
• Захватите его левой кнопкой мыши и перетащите вниз списка.
• Отпустите, когда слой окажется в нужной позиции.

Преимущество этого метода — полный контроль. Вы можете не просто отправить объект на задний план, а точно установить его между другими элементами.

Распространённые ошибки и как их избежать

Даже простое действие — перенос на задний план — может вызвать проблемы при неправильном использовании. Большинство ошибок возникают из-за недопонимания контекста или структуры документа.

Одна из самых частых проблем — попытка отправить на задний план элемент, который уже находится внизу своего контейнера. Например, если у вас есть фрейм с тремя слоями, и вы применяете «Send to Back» к нижнему, визуально ничего не изменится. Пользователь может подумать, что функция не работает, хотя на самом деле она выполнилась корректно.

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

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

Сложные случаи: группы, фреймы и маски

В реальных проектах редко приходится работать с одиночными фигурами. Чаще всего объекты объединены в группы, фреймы или используют маски. В таких случаях поведение команды «Send to Back» требует дополнительного понимания.

Работа с группами

Когда вы отправляете группу на задний план, перемещается вся группа целиком, но внутренний порядок её элементов остаётся неизменным. Например, если в группе текст находится над иконкой, после «Send to Back» эта иерархия сохранится. Однако если вы хотите изменить порядок внутри группы, её нужно разгруппировать (Ctrl+Shift+G) или редактировать слои напрямую в панели Layers.

Фреймы и ограничения стека

Фреймы в Figma действуют как контейнеры. Команда «Send to Back» применяется только к слоям внутри одного фрейма. Вы не можете отправить элемент из одного фрейма на задний план другого — для этого нужно переместить сам фрейм. Это важно учитывать при работе с макетами страниц, где каждый блок — отдельный фрейм.

Маски и порядок отображения

При использовании масок порядок слоёв становится критическим. Маска должна находиться под содержимым, которое она обрезает. Если вы случайно отправите маску на задний план, она может исчезнуть из-под контента и перестать работать. В таких случаях рекомендуется временно отключать маску (через значок глаза) для проверки позиции слоёв.

Экспертное мнение

По его словам, автоматизация через плагины может значительно ускорить работу. Например, плагин «Rename It» помогает систематизировать слои, а «Arrange» расширяет возможности по управлению порядком. Однако базовые навыки, такие как знание горячих клавиш, остаются фундаментом.

Он также отмечает, что в командной работе неправильный порядок слоёв — одна из частых причин конфликтов при слиянии изменений. «Когда два дизайнера одновременно меняют z-индекс одного элемента, Figma может запутаться. Лучше заранее договориться о правилах: например, фон всегда называется “BG”, и он всегда должен быть внизу.»

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

Заключение

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

• Используйте Ctrl+Shift+[ (Cmd+Shift+[ на Mac) для мгновенного перемещения на задний план.
• Контекстное меню даёт визуальный контроль над операцией Arrange.
• Панель Layers позволяет точно настраивать порядок слоёв вручную.
• Помните, что каждый фрейм имеет собственный стек — перемещение работает только внутри него.
• Проверяйте выделение и не забывайте про маски и группы при изменении z-индекса.