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

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

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

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

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

Использование готовой векторной фигуры 

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

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

Этот способ подходит, когда вам нужно обрезать фото под стандартную фигуру (круг, квадрат, звезду и т.д.).

1. Добавьте изображение: Перетащите фото из папки на холст или используйте Shift+Cmd+K (Mac) / Shift+Ctrl+K (Windows).
2. Нарисуйте фигуру: С помощью инструмента Frame (F) или векторных инструментов (например, Rectangle (R), Ellipse (O), Polygon) нарисуйте поверх фото нужную фигуру-контур.
3. Разместите фигуру поверх фото: Убедитесь, что ваша векторная фигура находится строго над изображением на слое.
4. Примените обтравку: Выделите оба объекта (изображение и фигуру). Можно кликнуть и протянуть мышью, либо щелкать по ним с зажатым Shift.
5. Создайте маску: Есть три способа сделать это: Правой кнопкой мыши: Кликните правой кнопкой - Use as Mask. Через меню объекта: В верхней панели нажмите на значок с двумя прямоугольниками  и выберите Use as Mask. Горячие клавиши: Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac).

Что произошло? Figma создала группу (обтравочную маску), где фигура стала "трафаретом", а изображение - "заливкой". Теперь вы можете перемещать изображение внутри этого трафарета или масштабировать его.

Рисование собственного контура

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

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

Это самый мощный способ, который позволяет вырезать фото по абсолютно любому контуру. Подготовьте изображение: Добавьте фото на холст. Выберите инструмент "Перо" (Pen Tool): На панели слева или горячей клавишей P.

Начните обводить объект

• Альтернатива: Инструмент Карандаш (Pencil Tool) Shift+P - если у вас устойчивая рука или вам нужен "рукотворный" контур.
• Для плавных кривых: Ставьте точки (клики) в ключевых местах контура. Зажатая левая кнопка мыши при установке точки позволит вам потянуть за направляющие (handle) и создать идеально гладкую кривую.
• Для резких углов: Просто кликайте, не задерживая мышь.
• Чтобы замкнуть контур: Подведите курсор к первой точке. Рядом с ним появится маленький кружок. Кликните, чтобы замкнуть путь.

Отредактируйте контур

• Выделение точек: Используйте инструмент Стрелка (V) или Стрелка для редактирования контура (K).
• Перемещение точек: Просто перетащите любую точку.
• Изменение кривизны: Кликните на точку, и у нее появятся "усики" - направляющие. Перетаскивайте их концы, чтобы изменить форму кривой.
• Преобразование точки: Чтобы превратить точку сглаживания (с направляющими) в угловую (без них), удерживайте Alt (Option на Mac) и кликните на точку.

Создайте маску: После того как ваш контур готов и находится поверх изображения, выполните те же действия, что и в Способе 1: выделите оба объекта и примените Use as Mask.

Использование плагинов для сложных объектов

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

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

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

Найдите и установите плагин

• Правая кнопка мыши на холсте - Plugins - Browse plugins in Community.
• В поиске введите: remove bg (для автоматического удаления фона) или mask.
• Популярные плагины: Remove BG (интегрирует одноименный сервис), BG Remover, Image Tracer и др.
• Нажмите Install.

Используйте плагин:

• Выделите ваше изображение.
• Правой кнопкой - Plugins - Выберите установленный плагин (например, Remove BG).
• Плагин автоматически обработает фото и, как правило, создаст для вас готовую обтравочную маску с вырезанным объектом.

Детали и лайфхаки 

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

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

Что делать, если маска применена неправильно

Частая ошибка: порядок слоев. В обтравочной маске всегда верхний объект (трафарет) обрезает нижние (изображения). Если у вас несколько объектов внутри маски, они все будут обрезаны по одной форме.

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

• Чтобы отредактировать контур маски: Дважды кликните на маску, чтобы войти внутрь группы, а затем кликните по самой фигуре-контуру. Теперь вы можете менять ее точки.
• Чтобы заменить изображение: Просто перетащите новое изображение из панели "Assets" или с компьютера прямо на старое изображение внутри маски в панели слоев. Figma его заменит.
• Чтобы разобрать маску: Выделите группу-маску и нажмите Shift+Ctrl+G или Shift+Cmd+G или правой кнопкой - Ungroup.

Как сделать обводку вокруг вырезанного фото

Нельзя применить обводку напрямую к группе-маске. Но есть хитрость:

1. Создайте дубликат вашей фигуры-маски (Ctrl+D или Cmd+D).
2. Поместите этот дубликат поверх группы-маски.
3. Уберите у него заливку (Fill) и настройте обводку (Stroke) - толщину, цвет.
4. Сгруппируйте (Ctrl+G или Cmd+G) маску и эту обводку вместе.

Инверсия маски 

В Figma нет кнопки "Инвертировать маску", но это можно сымитировать с помощью Boolean Operations (логических операций).

1. Нарисуйте большой прямоугольник (будущий "фон").
2. Нарисуйте поверх него маленький круг (будущая "дырка").
3. Выделите оба объекта и на панели инструментов выберите Subtract selection (иконка с двумя фигурами, где передняя вычитается). У вас получится рамка.
4. Теперь поместите ваше изображение под эту рамку и используйте ее как маску. Создается эффект, что фото видно только сквозь "дырку".

Вывод

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

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

Метод	Суть метода	Когда использовать	Ключевые шаги	Плюсы	Минусы
Готовая фигура	Обрезка фото с помощью стандартной векторной фигуры.	Быстрая обрезка под круг, прямоугольник, звезду и т.д.	Фигура поверх фото. Выделить оба объекта. Use as Mask.	Высокая скорость, простота.	Ограниченность готовыми формами.
Перо и карандаш	Ручное создание точного векторного контура.	Вырезание объекта по сложному, нестандартному контуру.	Обвести объект пером (P). Замкнуть контур. Применить маску.	Полный контроль и точность, универсальность.	Требует времени и навыка работы с пером.
Плагины	Автоматическое создание маски с помощью ИИ.	Выделение сложных объектов (люди, волосы, мех).	Выделить изображение. Запустить плагин (напр., Remove BG). Получить готовую маску.	Высочайшая скорость для сложных задач, качественный результат.	Ограничения по количеству бесплатных обработок, требует интернета.

 

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