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

В Figma изображение можно поместить в фигуру с помощью функции маскирования — достаточно разместить изображение поверх фигуры и использовать команду «Use as Mask» («Использовать как маску»). Этот метод работает с любыми векторными фигурами, фигурами на основе фреймов и даже текстом.

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

Что такое маска в Figma и как она работает

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

Какие типы объектов можно использовать как маски

• Фреймы — наиболее часто используемый тип. Любой фрейм может служить маской, особенно если вы работаете с компонентами или автолейаутами.
• Векторные фигуры — круги, прямоугольники, многоугольники и другие формы, созданные с помощью инструментов вектора.
• Группы — если группа содержит одну фигуру, её тоже можно использовать как маску.
• Текст — при условии, что он расположен выше изображения и не имеет эффектов, мешающих маскированию.

Пошаговая инструкция: как поместить изображение в фигуру

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

1. Добавьте в ваш дизайн фигуру (например, круг или прямоугольник) с помощью соответствующего инструмента на панели слева.
2. Загрузите изображение, перетащив его в рабочую область, или вставьте через меню File → Place image.
3. Разместите изображение так, чтобы оно полностью или частично покрывало фигуру. Позиционирование важно — именно эта часть будет видна после маскирования.
4. Выделите оба объекта: сначала кликните по фигуре, затем, удерживая Shift, добавьте изображение.
5. Щёлкните правой кнопкой мыши и выберите пункт Use as Mask (или нажмите Ctrl+Alt+M / Cmd+Option+M).
6. Готово! Изображение теперь будет отображаться только внутри контура фигуры.

Если вы случайно применили маску не к тому объекту, просто нажмите Ctrl+Z (Cmd+Z) и повторите шаги, следя за последовательностью выделения.

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

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

• Дважды щёлкните по маске — вы попадёте внутрь группы маскирования.
• Переместите изображение с помощью курсора или стрелок.
• Измените масштаб с помощью инструмента Zoom или горячих клавиш (Ctrl + / -).
• Чтобы выйти из режима редактирования, кликните вне маски или нажмите Esc.

Продвинутые техники и полезные лайфхаки

Помимо базового способа, существуют более сложные и гибкие подходы, которые расширяют возможности дизайна. Они особенно полезны при работе с компонентами, динамическими данными и прототипированием.

Использование Auto Layout с масками

Auto Layout позволяет автоматически выравнивать элементы, но при этом он совместим с масками. Например, вы можете создать карточку профиля, где аватарка (изображение в круге) — это маска внутри фрейма с Auto Layout. Это обеспечивает адаптивность и упрощает редактирование.

Маскирование с помощью плагинов

Figma поддерживает сторонние плагины, которые упрощают работу с масками. Например:

• Mask to Frame — автоматически создаёт маску из любого изображения и фигуры.
• Clippy — позволяет быстро применять сложные формы в качестве масок.
• Image Masque — даёт больше контроля над формой и положением изображения.

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

Анимация масок в прототипах

Figma позволяет анимировать изменения масок в прототипах. Например, вы можете сделать эффект «раскрытия» изображения от центра, изменяя размер маски во времени. Для этого:

• Создайте два состояния: начальное (маленькая маска) и конечное (большая или полная).
• Свяжите фреймы через прототип.
• Выберите переход с анимацией типа Smart Animate.

Такой приём хорошо работает в промо-страницах и туториалах.

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

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

Ошибка 1: Изображение не реагирует на маску

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

Ошибка 2: Маска применяется, но ничего не видно

Это может быть связано с цветом заливки маски. Хотя цвет не влияет на маскирование, иногда дизайнеры оставляют маску с чёрной заливкой и думают, что маска не работает.
Решение: удалите заливку у маски (уберите цвет в панели свойств). Маска должна быть прозрачной. Визуально это не повлияет на результат, но поможет избежать путаницы.

Ошибка 3: Невозможно редактировать изображение внутри маски

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

Ошибка 4: Маска теряется при экспорте

При экспорте в PNG или SVG некоторые эффекты могут отображаться некорректно, особенно если используются сложные векторы или текстовые маски.
Решение: перед экспортом проверьте результат в режиме предпросмотра. При необходимости объедините слои (Flatten) или экспортируйте как PNG с прозрачным фоном.

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

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

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

Заключение

Помещение изображения в фигуру в Figma — это базовый, но крайне важный навык, необходимый каждому дизайнеру. Благодаря встроенной системе маскирования, задача решается быстро и без потери качества. Главное — понимать принцип работы с порядком слоёв и правильно использовать команду «Use as Mask».

• Маска в Figma — это форма, которая определяет, какая часть изображения будет видимой.
• Всегда выделяйте сначала фигуру, затем изображение, чтобы избежать ошибок.
• Для редактирования изображения внутри маски дважды щёлкните по ней.
• Используйте плагины для ускорения работы с множественными масками.
• Маски совместимы с Auto Layout и анимацией в прототипах.