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

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

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

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

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

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

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

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

Подготовка "ингредиентов"

Вам нужно два объекта: Фотография или изображение, которое вы хотите обрезать.

Фигура (маска), по которой будете обрезать. Это может быть:

• Эллипс (для круга или овала)
• Прямоугольник (в том числе со скругленными углами)
• Многоугольник (для треугольников, шестиугольников и т.д.)
• Звезда
• Любая фигура, нарисованная инструментом Pen (Перо).

Как их добавить:

• Фото: Перетащите файл с компьютера прямо на канву или воспользуйтесь меню Place image (Разместить изображение).
• Фигура: На панели инструментов слева выберите нужную фигуру (например, Ellipse) и нарисуйте ее на канве, зажав левую кнопку мыши.

Расположение объектов

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

• Например, если вы делаете круглый аватар, поместите круг поверх лица человека на фото.
• Убедитесь, что фигура (маска) находится ПОВЕРХ фотографии. Если это не так, просто перетащите слой фигуры на слоем фото на панели слоев (слева).

Применение маски

Есть два способа сделать это. Результат будет одинаковым.

Способ А (Через правую клавишу мыши):

1. Выделите оба объекта - и фото, и фигуру. Для этого зажмите Shift и кликните по ним мышкой, либо просто обведите их рамкой выделения.
2. Кликните по выделенным объектам правой кнопкой мыши.
3. В появившемся меню выберите пункт "Use as Mask" (Использовать как маску).

Способ Б (Через горячие клавиши):

1. Выделите оба объекта.
2. Нажмите сочетание клавиш Ctrl+Shift+M (для Windows) или Cmd+Shift+M (для Mac).

Результат и что дальше

После этих действий вы увидите волшебное превращение:

• Фотография будет обрезана по форме вашей фигуры.
• На панели слоев структура изменится: фигура станет родительским слоем с иконкой маски (прямоугольник с кружком внутри), а фото окажется вложенным в нее. Теперь это единый объект - "Mask Group" (Группа с маской).

Что вы можете делать дальше с этой маской

Самое прекрасное в масках в Figma начинается не в момент их создания, а сразу после. Многие новички останавливаются, достигнув первого результата, но настоящая мощь инструмента раскрывается в последующей тонкой настройке. Этот раздел посвящен тому, как выйти за рамки статичной картинки и получить полный динамический контроль над своим творением.

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

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

Работа со сложными фигурами и контурами

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

Мы поговорим о создании масок из уникальных контуров, нарисованных вручную, что позволит вам вырезать объекты по их силуэту, создавать сложные композиции и custom-формы, которых нет в стандартном наборе инструментов. Вы поймете фундаментальный принцип, делающий это возможным, и научитесь обходить главное техническое ограничение, с которым сталкиваются все дизайнеры. Что, если вам нужна не стандартная фигура, а своя, уникальная? Например, вырезать человека по контуру.

1. Нарисуйте контур: Используйте инструмент Pen (Перо) (горячая клавиша P). Аккуратно обведите объект, который хотите вырезать, создавая замкнутую фигуру.
2. Повторите шаги 2-4: Поместите этот контур поверх фото и примените маску, как описано выше.

Частые проблемы и их решение

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

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

"Ничего не произошло!"

• Убедитесь, что вы выделили оба объекта.
• Убедитесь, что фигура-маска находится сверху. Попробуйте сделать ее самой верхней в иерархии слоев.

"Я хочу отредактировать маску, но не могу выбрать фигуру"

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

"Я хочу убрать маску и вернуть обычное фото"

• Выделите группу с маской.
• Кликните правой кнопкой мыши и выберите "Ungroup" (Разгруппировать) или нажмите Shift+Ctrl+G или Shift+Cmd+G.
• Объекты станут независимыми снова.

Вывод

Освоение техники маскирования - это один из тех ключевых навыков в Figma, который сразу же повышает качество и вариативность вашей работы. Как мы выяснили, этот процесс интуитивно понятен, неразрушаем и дает полный контроль над конечным результатом. Чтобы закрепить пройденный материал, вот краткая сводка всех шагов и возможностей в одной таблице:

Аспект	Что делать	Ключевые инструменты и действия
Подготовка	Создать два объекта: изображение и фигуру-маску.	Инструменты Ellipse, Rectangle, Polygon, Pen; Перетаскивание файла на канву.
Применение маски	Обрезать изображение по форме.	Выделить оба объекта - ПКМ - Use as Mask или Ctrl/Cmd + Shift + M.
Редактирование изображения	Настроить кадрирование внутри маски.	На панели слоев выбрать слой-изображение внутри маски - перемещать или масштабировать.
Редактирование маски	Изменить саму форму обрезки (размер, пропорции).	На панели слоев выбрать слой-фигуру внутри маски - изменять.
Работа со сложной формой	Вырезать по нестандартному контуру.	Инструмент Pen (P) для создания точного замкнутого контура. Использовать его как маску.
Решение проблем	Если маска не применяется или элементы не редактируются.	Проверить порядок слоев (маска сверху), выделение обоих объектов; работать через панель слоев.

 

Главное преимущество этого метода - его гибкость. Вы не уничтожаете пиксели, а создаете динамическую связку, которую в любой момент можете настроить, исправить или полностью разобрать. Смело экспериментируйте, комбинируйте маски и создавайте профессиональный дизайн с легкостью.