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

В Figma обрезка изображения по фигуре — это стандартная операция, позволяющая точно вписывать фото внутрь геометрических или кастомных контуров. Основной способ — использование масок: вы размещаете изображение над фигурой, выделяете оба элемента и применяете функцию «Create Mask» (Ctrl/Cmd+Alt+M). Это скрывает всё, что выходит за границы фигуры, создавая эффект точного вырезания.

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

Зачем нужна обрезка изображений по фигурам

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

Как работает принцип масок в Figma

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

Типы объектов, которые могут служить масками

• Прямоугольники и квадраты — самые распространённые формы для карточек и баннеров.
• Эллипсы и круги — идеальны для аватаров, иконок и акцентных элементов.
• Фигуры, созданные Pen-инструментом — позволяют вырезать фото по сложным, кастомным контурам.
• Текстовые слои — можно использовать для создания эффекта «текст изображением», когда фото просвечивает только сквозь буквы.
• Группы объектов — если группа содержит несколько фигур, маска будет основана на их объединённом контуре (через boolean operations).

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

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

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

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

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

Замена изображения — одна из самых полезных возможностей масок. Алгоритм:

• Дважды щёлкните по маскированной группе, чтобы войти внутрь.
• Выделите текущее изображение.
• Нажмите Ctrl+K (Cmd+K) и выберите новое фото, или перетащите его прямо в область просмотра.
• Настройте положение нового изображения.

Все параметры маски сохраняются — форма, закругления, тени, эффекты. Это экономит время при A/B-тестировании или создании нескольких версий одного интерфейса.

Особенности обрезки по кастомным контурам и векторам

Хотя стандартные формы работают без проблем, обрезка по кастомным контурам требует внимания к деталям. Например, если вы используете Pen Tool для создания сложной фигуры, важно убедиться, что контур замкнут. Незамкнутые пути не могут служить масками — Figma просто не позволит применить маскирование.
Также стоит помнить, что маска наследует форму объекта на момент применения. Если вы измените вектор после создания маски, форма обрезки не обновится автоматически. Чтобы обновить маску, нужно либо заново применить маскирование, либо отредактировать саму фигуру внутри группы.

Использование Boolean Operations для составных масок

Figma позволяет создавать сложные формы с помощью булевых операций: Union, Subtract, Intersect, Exclude. Эти операции можно использовать до применения маски. Например:

• Создайте два пересекающихся круга.
• Выделите их и нажмите «Intersect» — получится линза.
• Используйте результат как маску для изображения.

Часто встречающиеся ошибки и их решения

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

Ошибка: «Create Mask» неактивна

Если кнопка маскирования неактивна, проверьте следующее:

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

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

Ошибка: Изображение не видно после маскирования

Это происходит, когда изображение смещено так, что его видимая часть не попадает под маску. Решение:

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

Ошибка: Маска работает некорректно с текстом

Если вы используете текст как маску, убедитесь, что он не редактируется. После создания маски текст теряет возможность редактирования — он превращается в вектор. Лучше заранее преобразовать текст в кривые (Right-click → Convert to Outlines), если вы планируете часто его менять.

Экспертные приёмы и советы по оптимизации

Профессионалы используют дополнительные техники, чтобы сделать работу с масками ещё эффективнее.

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

Создайте компонент с маскированной группой — например, карточку товара с изображением. Затем используйте варианты (variants), чтобы быстро переключаться между разными типами изображений: квадратные, круглые, горизонтальные.

Автоматическое масштабирование через Constraints

Внутри маскированной группы вы можете задать constraints для изображения. Например, установите «Scale» или «Fill Container», чтобы фото автоматически подстраивалось под размер маски при изменении ширины или высоты.

Маски + Auto Layout = Гибкие карточки

Сочетание масок и Auto Layout позволяет создавать адаптивные блоки. Например, карточка с аватаром, именем и описанием. Автоматическая подстройка высоты и ширины работает корректно, если маска встроена в frame с auto layout.

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

Заключение

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

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