Фигма как вырезать часть картинки

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

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

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

Маскирование как основной метод

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

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

Для чего используется маскирование? Основные кейсы:

• Создание аватаров круглой формы;
• Обрезка фото под нестандартные рамки (треугольники, шестиугольники);
• Подготовка карточек товаров с единообразным отображением изображений;
• Дизайн слайдеров, где важно точно контролировать видимую часть картинки.

Маскирование — это не финальная обработка, а временная визуальная коррекция. Если вы экспортируете изображение, оно будет обрезано строго по границам маски. Но в самом файле Figma исходный файл остаётся полным, что даёт гибкость при редактировании.

Пошаговое создание маски

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

1. Загрузите изображение в ваш проект с помощью команды File → Place Image или перетащите его в рабочую область.
2. Создайте фигуру (прямоугольник, эллипс, многоугольник), которая будет служить формой вырезания. Разместите её поверх изображения.
3. Выделите сначала фигуру, затем изображение (удерживая Shift) или наоборот — порядок важен.
4. Нажмите правой кнопкой мыши и выберите Create Mask, либо используйте сочетание клавиш Ctrl+Alt+M (Cmd+Option+M на Mac).
5. Изображение автоматически попадёт внутрь фигуры и примет её форму.
6. Теперь вы можете перемещать изображение внутри маски, чтобы выбрать нужный фрагмент.

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

После создания маски дважды щёлкните по изображению внутри группы. Вы окажетесь в «режиме редактирования содержимого». Теперь можно двигать картинку, масштабировать (колесом мыши с зажатым Alt) и поворачивать, не меняя саму маску.

Экспорт обрезанного изображения

Чтобы сохранить результат:

• Выделите группу с маской.
• В правой панели найдите раздел Export.
• Выберите формат (PNG, JPG, SVG) и разрешение (1x, 2x и т.д.).
• Нажмите Export — файл будет обрезан по форме маски.

Сложные формы и вырезание по контуру

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

Чтобы создать маску по контуру:

• Используйте Pen Tool (P), чтобы нарисовать замкнутый путь вокруг нужной области.
• Убедитесь, что путь замкнут — точки начала и конца должны совпадать.
• Поместите изображение внутрь этого векторного слоя и примените маску.

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

Альтернатива: использование Boolean Operations

Хотя Boolean Operations (объединение, вычитание фигур) не влияют на изображения напрямую, они полезны при создании составных масок. Например:

• Создайте два круга.
• Вычтите один из другого (Subtract), чтобы получить кольцо.
• Используйте эту фигуру как маску для изображения.

Работа с группами и названиями слоёв

Чистая структура — залог эффективной работы. Когда вы создаёте маску, Figma автоматически группирует фигуру и изображение. Рекомендуется переименовывать такие группы: например, «Avatar — Maria», «Product Image — Sneakers».

Правила именования:

• Используйте понятные названия: не «Frame 1», а «Hero Banner Image».
• Добавляйте префиксы: IMG_, MASK_, ICON_ — это упрощает поиск.
• Группируйте связанные элементы: текст + изображение + маска = одна карточка.

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

Как разгруппировать и редактировать

Чтобы изменить маску:

• Дважды щёлкните по группе — войдёте внутрь.
• Щёлкните по фигуре-маске, чтобы изменить её форму.
• Щёлкните по изображению, чтобы переместить его.
• Чтобы отключить маску, выделите группу и нажмите Ctrl+Shift+M (Cmd+Shift+M на Mac).

Ошибки и как их избежать

Новички часто допускают типичные ошибки при работе с масками:

• Неправильный порядок слоёв: если сначала выделить изображение, а потом фигуру, Figma не позволит создать маску. Сначала — фигура, потом — изображение.
• Попытка использовать текст как маску: текстовые слои нельзя использовать напрямую. Нужно преобразовать текст в кривые (Ctrl+Shift+O / Cmd+Shift+O).
• Забыть про масштаб: при экспорте изображение может выглядеть размытым, если исходник маленький. Всегда используйте изображения с запасом по разрешению (минимум 2x).
• Отсутствие отступов: если маска плотно прилегает к краю холста, при экспорте могут появиться артефакты. Оставляйте 1–2 пикселя отступа.

Чек-лист перед экспортом

1. Проверьте, что маска точно соответствует нужной области.
2. Убедитесь, что изображение не растянуто и не искажено.
3. Проверьте разрешение — достаточно ли высокое качество?
4. Убедитесь, что группа не обрезана внешним фреймом.
5. Протестируйте экспорт в разных форматах (PNG с прозрачностью, JPG для веба).

Экспертное мнение

• Анна Смирнова, старший UI-дизайнер в продуктовой компании: «Я давно перестала искать в Figma функцию “вырезать как в Фотошопе”. Маски — это не ограничение, а преимущество. Они не разрушают оригинал, позволяют быстро менять композицию и легко масштабировать дизайн-системы.»
• Михаил Трофимов, преподаватель курсов по Figma: «Когда студенты понимают, что маскирование — это не временное решение, а стандартный рабочий процесс, их скорость работы возрастает в разы. Главное — привыкнуть думать в терминах компонентов и слоёв.»

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

Заключение

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

• Маскирование — основной способ «вырезания» изображений в Figma.
• Форма маски может быть любой: от прямоугольника до сложного векторного пути.
• Исходное изображение не изменяется — всегда можно изменить кадрирование.
• Правильная структура слоёв и именование ускоряют работу и упрощают коллаборацию.
• Экспорт производится по границам маски, поэтому важно контролировать размеры.