Как вставить картинку в фигуру в фигме

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

Зачем нужна маскировка изображений в Figma

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

Основные шаги: как вставить картинку в фигуру

Процесс вставки изображения в фигуру в Figma прост и выполняется за несколько шагов. Главное — соблюдать правильную иерархию слоёв и порядок действий.

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

После этого изображение будет видимым только внутри границ фигуры. Остальная часть скроется, как будто «обрезана». При этом вы можете свободно перемещать изображение внутри маски, изменять его масштаб (с зажатым Alt/Cmd) и корректировать положение без потери качества.
Если нужно временно отключить маску для редактирования, щёлкните по значку маски в правой панели Properties и выберите Disable Mask. Чтобы удалить маску полностью — нажмите Delete Mask.

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

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

• Правильно ли выделены оба объекта: и фигура, и изображение.
• Находится ли изображение выше в стеке слоёв, чем фигура.
• Не применялась ли уже маска ранее — повторное нажатие может снять её.
• Не заблокированы ли слои (значок замка в панели Layers).

Разные типы фигур и особенности их использования

Figma поддерживает маскирование практически для любого типа фигуры: от стандартных (прямоугольник, эллипс, линия) до сложных векторных путей и текстовых блоков. Однако каждый тип имеет свои нюансы.

Как использовать текст как маску

Эффект «текст из изображения» популярен в заголовках и промо-баннерах. Чтобы реализовать его:

• Добавьте текстовый блок на холст и установите нужный шрифт и размер.
• Импортируйте изображение и разместите его поверх текста.
• Выделите оба элемента и примените маску (Ctrl+Alt+M).

Результат — изображение будет видно только внутри контуров букв. Этот приём хорошо работает с крупными заголовками и яркими, контрастными картинками.

Типичные ошибки и как их избежать

Даже опытные дизайнеры иногда сталкиваются с проблемами при работе с масками. Ниже — самые распространённые ошибки и способы их устранения.

• Изображение не маскируется. Проверьте порядок слоёв: изображение должно быть выше фигуры. Также убедитесь, что вы не пытаетесь применить маску к самой фигуре без изображения.
• Часть изображения обрезана слишком сильно. Скорее всего, изображение не центрировано или имеет маленький размер. Увеличьте его (с зажатым Alt/Cmd) и отрегулируйте положение внутри маски.
• Маска не реагирует на изменения фигуры. После изменения формы (например, растягивания) маска обновляется автоматически. Но если вы конвертировали фигуру в вектор (Convert to Vector), поведение может измениться. Лучше работать с исходной фигурой до финальной стадии.
• Производительность падает при множественных масках. Слишком много вложенных масок или сложных векторов может замедлять Figma. Оптимизируйте проект: объединяйте слои, используйте компоненты и удаляйте неиспользуемые объекты.

Дополнительные функции и продвинутые приёмы

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

Обратная маска (Alpha Inverted Mask)

По умолчанию маска показывает содержимое внутри фигуры. Но Figma позволяет инвертировать маску, чтобы скрывать внутреннюю часть, а показывать внешнюю. Это полезно для создания эффектов «вырезания» или тени.
Чтобы применить инвертированную маску:

• Создайте маску обычным способом.
• В правой панели Properties найдите раздел Mask.
• Активируйте опцию Invert (или нажмите Alt при выборе маски).

Теперь изображение будет видно везде, кроме области фигуры.

Маски внутри компонентов и экземпляров

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

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

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

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

По его словам, один из последних проектов студии использовал маски для создания интерактивной галереи: при наведении изображение выходило за пределы рамки, создавая эффект «выпирания». Это было реализовано через два состояния — с маской и без — и переход между ними в прототипе.
«Такие микро-интеракции усиливают вовлечённость. Но главное — они работают, только если основаны на чёткой структуре. А маски в Figma дают эту структуру», — добавляет он.

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

Заключение

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

• Маскирование выполняется через комбинацию Ctrl+Alt+M (Cmd+Option+M на Mac).
• Изображение должно находиться выше фигуры в стеке слоёв.
• Маски можно редактировать, инвертировать и использовать в компонентах.
• Избегайте типичных ошибок: проверяйте порядок слоёв и блокировку объектов.
• Используйте маски осознанно — как инструмент управления вниманием, а не просто эффект.