Как вырезать объект из изображения в Figma: подробная пошаговая инструкция

• Шаг 1: Создайте контур элемента с помощью инструмента «Перо»
• Шаг 2: Настройте фигуру (заливка и обводка)
• Шаг 3: Переместите векторную фигуру под картинку
• Шаг 4: Примените маску
• Используйте простые фигуры, если не нужно точно следовать контуру
• Дополнительные способы вырезать элементы в Figma
• Плагин Image Cutter
• Плагин Remove Background

Шаг 1: Создайте контур элемента с помощью инструмента «Перо»

Первый шаг, как обрезать фото в «Фигме», — нарисовать точный векторный контур вокруг объекта. Для этого понадобится инструмент «Перо» (Pen Tool). Тем, кто никогда не работал с ним, придется немного потренироваться, чтобы линии и точки начали слушаться. Тогда получится вырезать даже сложные объекты, например мохнатые собачьи морды. 

Чтобы нарисовать контур:

1. Выберите инструмент «Перо» на панели инструментов (или нажмите клавишу P).
2. Аккуратно обведите нужную часть изображения, двигаясь вдоль ее краев. Постарайтесь делать линии как можно более плавными и точными. Если у элемента сложная форма, добавьте больше точек и изгибов, чтобы точно обрисовать его контуры.
3. Когда контур замкнется (вы увидите, как последняя точка соединяется с первой), нажмите Enter, чтобы завершить создание фигуры. Теперь у вас есть векторная фигура, которая повторяет форму элемента.

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

Шаг 2: Настройте фигуру (заливка и обводка)

Теперь, когда у вас есть замкнутый векторный контур, настройте его внешний вид:

1. Отключите обводку. Для этого на панели справа в разделе Stroke («Обводка») установите значение 0.
2. Залейте фигуру однотонным цветом. В разделе Fill («Заливка») выберите любой цвет, который вам нравится. Это нужно сделать для того, чтобы контур был видимым и хорошо работал в маске.

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

Шаг 3: Переместите векторную фигуру под картинку

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

Шаг 4: Примените маску

Это заключительный шаг для того, чтобы вырезать объект из изображения в «Фигме». Чтобы это сделать:

1. Выделите оба слоя: картинку и векторную фигуру. Для этого зажмите клавишу Shift и кликните по каждому слою.
2. Кликните правой кнопкой мыши и в появившемся меню выберите инструмент Use as mask или используйте горячие клавиши Ctrl + Alt + M (для Windows) или Cmd + Option + M (для macOS).

Когда маска сработает, нужный элемент на картинке будет вырезан по контуру. Все, что находится за пределами фигуры, станет невидимым. Важно отметить, что вырезанный объект теперь становится группой слоев. Чтобы все элементы перемещались одновременно, соберите их в группу: горячие клавиши Ctrl+G.

Теперь вы можете перемещать весь вырезанный элемент как единое целое, просто кликнув по группе слоев и перетащив ее в нужное место.

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

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

Вот как это делать:

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

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

Освоить Figma — значит получить в руки мощный инструмент, который пригодится и в учебе, и в карьере. А если всерьез задумались о прокачке навыков дизайнера или хотите пойти на курсы, но откладываете из-за бюджета, перестаньте. С Халвой оплатите обучение сразу, а возвращайте — частями, без переплат. Удобно и для студентов, и для родителей.

Дополнительные способы вырезать элементы в Figma

Кроме стандартного метода с маской, Figma предлагает и другие способы вырезания объектов, в том числе с помощью плагинов. Это дополнительный «модуль», который устанавливают в программу (например, в браузер или редактор). Плагины добавляют Figma новые возможности: редактируют и переводят текст, позволяют рисовать прямо в тексте и так далее.

Рассмотрим два популярных расширения, которые упрощают работу с картинками.

Плагин Image Cutter

Image cutter умеет легко «разрезать» картинку на части и оставлять только нужное. Он хорошо подходит, если надо вырезать сложные элементы. Но поработать «Пером» все равно придется. 

Для использования:

1. Создайте область изображения «Пером», так же, как при использовании маски: обведите контур или заключите его в геометрическую фигуру.
2. Выделите слои с картинкой и получившейся векторной формой, выберите Plugins > Image Cutter.

Плагин автоматически вырежет выбранный элемент и создаст его в виде отдельной картинки. Этот метод проще и быстрее, чем use as mask, но в отличие от него итоговый элемент будет не группой слоев, а просто изображением.

Плагин Remove Background

Если нужно удалить фон в «Фигме», Remove Background будет настоящим спасением. Он использует искусственный интеллект для автоматического удаления заднего плана. Это особенно полезно, если объект четко выделяется на картинке.

Чтобы использовать плагин:

1. Установите расширение через Plugins.
2. Выберите объект на изображении, который хотите вырезать.
3. Примените инструмент, и фон удалится автоматически.

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

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

Основной метод включает следующие шаги:

1. Создание векторного контура.
2. Заливка его цветом.
3. Точное размещение вектора под изображением.
4. Применение маски.

Плагины Image Cutter и Remove Background упрощают работу, но результаты радуют не всегда.