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

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

Основные принципы маскирования в Figma

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

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

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

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

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

1. Загрузите изображение в Figma. Перетащите его в рабочую область или используйте команду «File → Place Image» (Ctrl/Cmd+Shift+K).
2. Нарисуйте фигуру, по которой нужно обрезать изображение. Используйте инструменты Rectangle, Ellipse, Polygon или Pen. Размер и положение фигуры должны соответствовать желаемой области видимости.
3. Расположите изображение и фигуру так, чтобы они перекрывались. Убедитесь, что фигура находится над изображением в стеке слоёв.
4. Выделите оба объекта: удерживайте Shift и кликните по каждому, или выделите рамкой.
5. Нажмите сочетание клавиш Ctrl+Alt+M (на Windows) или Cmd+Option+M (на Mac), чтобы создать маску. Альтернативно — щёлкните правой кнопкой и выберите «Create Mask».

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

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

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

Чтобы выйти из режима редактирования, кликните за пределами маски или нажмите Esc. Также можно использовать панель слоёв: кликните на родительский элемент, чтобы вернуться на верхний уровень.

Как снять маску

Если вы хотите отменить маскирование, выделите замаскированный объект и нажмите Ctrl+Alt+M (Cmd+Option+M) повторно. Либо щёлкните правой кнопкой и выберите «Detach Mask». Объекты вернутся в исходное состояние, и изображение снова станет полностью видимым.

Варианты использования и советы для профессионалов

Маскирование в Figma — это не просто способ обрезки фото. Его применяют в разных сценариях: от создания аватарок до сложных анимационных прототипов.

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

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

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

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

Чтобы это работало, поместите замаскированное изображение внутрь фрейма с Auto Layout. Убедитесь, что высота фрейма фиксированная или задана через constraints. Тогда при изменении контента другие элементы будут корректно перераспределяться.

Создание масок из текста

Figma позволяет использовать текст как маску. Для этого создайте текстовый блок, преобразуйте его в кривые («Outline Stroke»), а затем примените маску. Это эффективно для эффектов типа «текст из изображения» — например, когда фоновое фото просвечивает сквозь буквы.

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

Новички в Figma часто сталкиваются с проблемами при попытке обрезать изображение. Большинство из них связаны с неправильным порядком действий или неверной иерархией слоёв.

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

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

Маска не применяется — что делать?

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

Фигура исчезает после маскирования

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

Экспорт результата

После создания маски важно правильно экспортировать результат. Figma позволяет экспортировать как весь фрейм, так и отдельные слои.

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

• PNG — рекомендуется для растровых изображений с прозрачностью.
• SVG — идеален для векторных масок, особенно если используется в вебе.
• JPG — не сохраняет прозрачность, используйте только при необходимости.

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

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

— Михаил Петров, главный дизайнер студии «UX Wave», 10 лет в digital

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

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

Заключение

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

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

• Маска в Figma создаётся сочетанием Ctrl+Alt+M (Cmd+Option+M).
• Фигура должна быть выше изображения в стеке слоёв.
• Используйте фреймы для лучшей структуры и совместимости.
• Маски не меняют исходное изображение — его можно редактировать в любой момент.
• Экспортируйте результат в PNG или SVG с прозрачностью для максимальной гибкости.