Как сделать текст за объектом в фигме

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

Зачем нужен текст за объектом?

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

Такой подход особенно важен в дизайне систем, где соблюдается иерархия слоёв (layer hierarchy). В Figma слои упорядочены по принципу «последний добавлен — сверху». Это значит, что любой новый элемент автоматически оказывается выше предыдущих. Если вы не управляете этим порядком, дизайн становится непредсказуемым.

Пошаговое руководство: как сделать текст за объектом

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

1. Создайте объект, который должен находиться перед текстом — например, прямоугольник, круг или изображение. Разместите его там, где планируете разместить текст.
2. Добавьте текстовый блок (T) рядом или поверх объекта. Не беспокойтесь о его позиции — вы сможете откорректировать его позже.
3. Перейдите в панель Layers (слева). Найдите слой с текстом и слой с объектом. Обратите внимание: слои сверху в списке находятся впереди на холсте.
4. Щёлкните и удерживайте текстовый слой, затем перетащите его ниже объекта. Убедитесь, что он оказался под ним в списке.
5. Теперь текст будет виден только там, где объект прозрачный или полупрозрачный. Если объект непрозрачный — текст скроется полностью.

Если вы хотите быстрее переключить порядок, используйте горячие клавиши:
— Ctrl + Shift + [ (Windows) или Cmd + Shift + [ (Mac) — переместить слой на один уровень назад.
— Ctrl + Shift + ] или CMD + Shift + ] — переместить на один уровень вперёд.

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

Альтернативный способ: через контекстное меню

Если вы не запоминаете сочетания клавиш, используйте контекстное меню:
1. Щёлкните правой кнопкой мыши по текстовому слою.
2. Выберите Arrange → Send Backward.
3. Повторите действие, пока текст не окажется под нужным объектом.

Этот метод удобен для редких операций, но менее эффективен при работе с большими макетами.

Как проверить, что текст действительно за объектом?

Иногда визуально кажется, что текст находится позади, но на самом деле он просто перекрыт по координатам. Чтобы проверить:
— Включите режим «Outline» (в меню View → Outline) — все слои станут контурными, и вы увидите реальную структуру.
— Используйте режим «Isolate» — выделите объект и нажмите Enter. Это скроет всё остальное, и вы увидите, где находится текст.
— Временно сделайте объект полупрозрачным (например, 30% opacity) — если текст просвечивает, вы всё сделали правильно.

Частые ошибки и как их избежать

Даже опытные дизайнеры допускают ошибки при работе с наложением слоёв. Вот самые распространённые:

• Неправильное выделение слоёв. Выделите только текст, а не всю группу. Если вы выделяете группу, команда «Send Backward» может сдвинуть не тот слой.
• Использование групп без необходимости. Если текст и объект находятся в одной группе, их порядок внутри группы не влияет на видимость — порядок определяется положением группы на холсте. Разгруппируйте, если нужно точно управлять наложением.
• Ожидание эффекта прозрачности от непрозрачного объекта. Если объект белый и непрозрачный — текст за ним не будет виден. Не путайте «за» с «сквозь».
• Отсутствие проверки на разных разрешениях. Текст может быть за объектом на макете 1920×1080, но сместиться при адаптации под мобильный экран. Всегда проверяйте в режиме Responsive Resizing.

Продвинутые техники: маски, группы и компоненты

Для профессиональной работы с текстом за объектами используются не только базовые приёмы, но и продвинутые методы.

Маски для точного наложения

Если вы хотите, чтобы текст был виден только через определённую форму (например, через окно в изображении), используйте маски:
1. Создайте форму (прямоугольник, круг) там, где должен быть виден текст.
2. Поместите текст под неё.
3. Выделите и форму, и текст.
4. Нажмите Ctrl + Alt + M (Cmd + Option + M на Mac).
5. Теперь текст будет виден только внутри формы — идеально для эффектов «вырезанного текста».

Использование компонентов и вариантов

Если вы создаете карточки с текстом за фоном — превратите их в компонент. Сделайте:
— Фон — отдельный слой в компоненте.
— Текст — под ним.
— Задайте переменные для цвета фона, прозрачности и позиции текста.

Так вы сможете легко менять внешний вид карточек, не нарушая структуру. Особенно полезно для систем дизайна с тёмной/светлой темой.

Группировка с контролем порядка

Иногда удобно держать текст и объект в одной группе — например, для перетаскивания. Но тогда порядок внутри группы должен быть строго выверен:
— Группа 1: Фон (сверху)
— Группа 2: Текст (снизу)

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

Управление слоями: лучшие практики

Хорошо структурированные слои — залог масштабируемого дизайна. Вот что рекомендуют топовые команды:

• Всегда давайте слоям осмысленные имена: не «Rectangle 1», а «Card Background», не «Text 2», а «Product Title».
• Используйте папки для группировки: «Background», «Text», «Buttons» — это ускоряет поиск и уменьшает ошибки.
• Не используйте более 5 уровней вложенности в одной группе — это замедляет Figma и усложняет экспорт.
• При работе с компонентами всегда проверяйте, что текст не перекрывается при изменении контента. Включите режим «Auto Layout» для текстовых блоков, чтобы они адаптировались.

Таблица: сравнение методов управления слоями

Экспертное мнение: как работают профессионалы

Алексей Кузнецов, старший UX-дизайнер в компании с 50+ продуктами, рассказывает:

Он также использует плагин Auto Layout Master для автоматической привязки текста к контейнерам и Layer Names для массового переименования. Это особенно важно при работе в командах — когда разработчики должны легко находить элементы в экспортируемых файлах.

Часто задаваемые вопросы

Заключение

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

• Используйте горячие клавиши Ctrl/Cmd + Shift + [ для быстрого перемещения слоёв назад.
• Всегда проверяйте порядок в панели Layers — не полагайтесь на визуальное восприятие.
• Для сложных эффектов применяйте маски и Auto Layout.
• Структурируйте слои с помощью имен и папок — это критично для командной работы.
• Текст за объектом — это не про эстетику, а про управление визуальной иерархией.