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

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

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

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

Обрезка изображения 

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

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

Добавьте изображение

• Перетащите картинку с компьютера прямо на канву или воспользуйтесь меню: Place image (или сочетание клавиш Ctrl+Shift+K).

Выберите инструмент Crop

• Выделите изображение. В верхней панели появится значок обрезки (как две угловые скобки <>). Или просто нажмите клавишу C.
• Вокруг изображения появятся угловые маркеры.

Обрежьте

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

После обрезки исходное изображение не удаляется. Вы всегда можете снова нажать C и отрегулировать границы, чтобы «вернуть» скрытые части.

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

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

Маски в Figma работают по принципу «форма, которая скрывает лишнее»: все, что находится за ее пределами, становится невидимым, открывая безграничные возможности для композиции.

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

Простая маска

Допустим, вы хотите сделать аватарку-круг из прямоугольной фотографии.

Подготовьте «форму» и «содержание»

• Нарисуйте фигуру, которая будет формой маски (например, круг O или эллипс).
• Расположите эту фигуру поверх вашего изображения.

Создайте маску

• Выделите оба объекта: и изображение, и фигуру поверх него. Можно кликнуть с зажатым Shift или обвести их рамкой.
• Есть три способа создать маску: Быстрый способ: Нажмите правой кнопкой мыши - Use as Mask (Ctrl+Alt+M). Через меню объекта: Кликните на маленький ромбик в правом верхнем углу панели слоев и выберите Mask. Кнопкой на панели: В верхней панели появится кнопка Mask при выделении двух объектов.

Настройте результат

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

Сложная маска с помощью Pen Tool 

Это уже ближе к классическому «вырезанию» объекта от фона. Вы вручную создаете контур вокруг объекта.

Создайте контур

• Возьмите инструмент (P).
• Аккуратно расставьте опорные точки вокруг объекта, который хотите вырезать. Старайтесь делать это как можно точнее.
• Замкните контур, кликнув на первую точку.

Уточните контур (Кривые Безье)

• После создания грубого контура, переключитесь на Move Tool (V).
• Выделите свою векторную фигуру (контур). Теперь вы можете: Перемещать точки: просто тяните их.Создавать кривые: кликните на  точке и, не отпуская, потяните - появятся «рычаги» (векторы Безье). Тяните за них, чтобы плавно изменить кривую и точнее обвести объект. Управлять точками: удерживая Alt, можно двигать «рычаги» независимо, создавая острые углы.

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

• Теперь у вас есть идеальный контур. Действуйте как в «Варианте А»:Расположите контур поверх изображения. Выделите оба объекта. Нажмите правой кнопкой - Use as Mask (Ctrl+Alt+M).

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

Профессиональные приемы и нюансы

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

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

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

Инвертирование маски

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

• Создайте маску обычным способом.
• Выделите слой-форму (маску) в панели слоев.
• На панели свойств справа найдите раздел «Fill» (Заливка).
• Рядом с цветом заливки есть значок в виде сетки. Нажмите на него.
• Поставьте галочку Inverse.
• Теперь маска инвертирована.

Редактирование маски после создания

Вы всегда можете вернуться и изменить что угодно:

• Чтобы изменить положение изображения: выделите его внутри маски и перемещайте/масштабируйте.
• Чтобы изменить форму маски: выделите слой-форму (например, ваш контур, созданный пером) и редактируйте его точки так же, как и любую другую векторную фигуру.

Маскирование нескольких изображений

Внутри одной маски-группы может быть несколько изображений. Просто перетащите новое изображение в группу «Mask» в панели слоев, и оно тоже будет обрезано по той же форме.

Использование готовых векторных иллюстраций как маски

Вы можете найти красивую векторную рамку или орнамент (например, в формате SVG), поместить его в Figma и использовать как сложную маску для фотографии. Принцип тот же: вектор сверху, фото снизу - «Use as Mask».

Вывод

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

Вы теперь знаете, что быстро обрезать фото можно с помощью инструмента Crop, придать ему форму сердца или звезды - с помощью простой маски, а для точного, побитового вырезания сложного объекта идеально подойдет перо (Pen Tool). Для систематизации информации мы подготовили таблицу:

Ваша задача	Подходящий способ
Обрезать фото по прямоугольнику	Инструмент Crop (C)
Сделать круглую аватарку, поместить фото в звезду	Простая маска (Фигура + Ctrl+Alt+M)
Аккуратно вырезать человека или сложный объект от фона	Маска с помощью Pen Tool (P)
Создать «вырез» внутри фото	Инвертированная маска

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

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