Как в фигме наложить картинку на фигуру

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

Figma — один из самых популярных инструментов для UI/UX-дизайна, прототипирования и совместной работы. Его гибкость и мощные визуальные функции позволяют дизайнерам быстро реализовывать сложные идеи. Одна из частых задач — наложение изображения на фигуру: будь то аватарки в круглых рамках, баннеры с закруглёнными углами или кастомные формы для карточек. Эта операция кажется простой, но требует понимания логики слоёв, масок и группировки объектов. Без правильного подхода можно столкнуться с проблемами: изображение не обрезается, теряется при экспорте или смещается при редактировании.

Основные понятия: слои, фреймы и маски

Прежде чем приступать к наложению изображения, важно понять три ключевых элемента интерфейса Figma: слои, фреймы и маски. Каждый объект в дизайне — это слой. Слои упорядочены по вертикали: тот, что выше, перекрывает нижние. Порядок можно менять вручную через панель «Layers» слева. Фрейм — это контейнер, который объединяет несколько слоёв. Он работает как группа, но с дополнительными возможностями: автоматической подстройкой размеров, настройками выравнивания и, что особенно важно, поддержкой масок.
Маска — это способ ограничить видимую область одного слоя формой другого. В Figma маски создаются путём объединения двух элементов: нижний становится маской (формой), а верхний — содержимым. При этом маска должна быть сплошной фигурой, а не текстом или векторным объектом со сложной структурой (если не используется Boolean операции). После применения маски содержимое будет видно только внутри границ маскирующего слоя.

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

Как устроена система слоёв в Figma

Слои в Figma отображаются в боковой панели в порядке сверху вниз: верхние слои перекрывают нижние. Вы можете перетаскивать их, чтобы изменить порядок. При работе с масками важно, чтобы маска (фигура) была ниже, чем изображение. Figma использует принцип «последний сверху — виден», поэтому если изображение находится под фигурой, оно будет полностью скрыто.

Роль фреймов в маскировании

Фрейм — не просто контейнер. Он определяет границы взаимодействия между слоями. Когда вы создаете маску, Figma применяет её только к объектам внутри одного фрейма. Это значит, что если вы хотите использовать одну и ту же маску для нескольких изображений, их нужно поместить в один фрейм. Кроме того, фреймы поддерживают Auto Layout, что позволяет создавать адаптивные блоки с маскированными изображениями.

Пошаговое наложение картинки на фигуру

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

1. Создайте новый фрейм или выберите существующий. Убедитесь, что он достаточно большой, чтобы вместить и фигуру, и изображение.
2. Добавьте фигуру (например, прямоугольник, эллипс или кастомный вектор). Это будет маска. Настройте её размер, цвет и закругления углов.
3. Импортируйте изображение: перетащите его в фрейм или используйте команду File → Place Image (Ctrl+K).
4. Переместите изображение так, чтобы оно полностью покрывало фигуру. Убедитесь, что оно находится выше фигуры в панели слоёв.
5. Выделите одновременно фигуру и изображение (удерживая Shift).
6. Нажмите Ctrl+Alt+M (или Cmd+Option+M на Mac), либо щёлкните правой кнопкой и выберите «Create Mask».
7. Проверьте результат: изображение должно быть видно только внутри контура фигуры.

Если вы хотите отредактировать изображение после маскирования, дважды щёлкните по нему — Figma войдёт в режим редактирования маски. Там вы можете перемещать, масштабировать или заменять изображение. Чтобы выйти, кликните за пределами фрейма.

Как изменить положение изображения внутри маски

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

Как заменить изображение в маске

Замена изображения не требует удаления маски. Просто перетащите новое изображение в фрейм или используйте «Place Image». Figma автоматически вставит его на место старого. Убедитесь, что вы делаете это в режиме редактирования маски (двойной клик), иначе новое изображение окажется вне маски.

Варианты использования маски: простые и продвинутые случаи

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

Другой пример — использование масок в сочетании с Auto Layout. Представьте список аватарок в чате. Все они имеют одинаковый размер, но разные изображения. Создав фрейм с Auto Layout и маскированными кругами, вы можете быстро дублировать элементы и заполнять их контентом. При этом все аватарки будут автоматически выравниваться и масштабироваться.

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

Помимо стандартных фигур, в Figma можно использовать векторные объекты как маски. Например, звезду, стрелку или логотип. Для этого нарисуйте вектор с помощью Pen Tool, преобразуйте его в фигуру (Path to Outline), затем примените маску. Обратите внимание: вектор должен быть замкнутым, иначе маска не сработает.

Маскирование группы объектов

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

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

Даже опытные дизайнеры иногда сталкиваются с проблемами при работе с масками. Знание типичных ошибок помогает сэкономить время и избежать разочарований.
Одна из самых частых — попытка создать маску между объектами из разных фреймов. Figma не позволяет этого делать. Решение: переместите все элементы в один фрейм. Другая ошибка — неправильный порядок слоёв. Если изображение находится под фигурой, маска не будет видна. Всегда проверяйте, что изображение выше маски в панели слоёв.

Третья ошибка — использование текста как маски. По умолчанию текст нельзя использовать в качестве маскирующего слоя. Чтобы это исправить, преобразуйте текст в кривые: выделите его и нажмите Ctrl+Shift+O (Convert to Outlines). После этого он станет векторной фигурой и сможет использоваться как маска.

Изображение исчезает после маскирования

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

Маска не обрезает изображение

Иногда маска применяется, но изображение остаётся видимым полностью. Это происходит, если вы забыли выделить оба объекта или применили маску к неправильному слою. Убедитесь, что выделены именно два слоя: фигура и изображение, причём изображение выше.

Советы для профессионалов: работа с компонентами и авто-макетами

Для продвинутых пользователей Figma предлагает возможность интегрировать маскирование в систему компонентов и вариантов. Это позволяет создавать библиотеки с переиспользуемыми элементами, где изображения можно менять одним кликом.
Например, создайте компонент «User Card» с маскированной аватаркой. Добавьте варианты: маленький, средний, большой. Затем, при использовании в проекте, любой дизайнер может выбрать нужный вариант и вставить своё изображение. Это особенно эффективно при работе в команде.
Auto Layout усиливает этот подход. Если вы объедините маскированный элемент с текстом в Auto Layout-фрейме, карточка будет автоматически подстраивать высоту под содержимое. Это критически важно для адаптивных интерфейсов.

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

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

По его словам, ключ к успеху — системный подход. «Не создавайте маски на лету. Внедрите их в дизайн-систему. Определите стандартные формы: avatar-sm, card-lg, banner-hero. Так вы обеспечите единообразие и ускорите работу всей команды.»

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

Заключение

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

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