Figma как вырезать объект

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

Что значит «вырезать объект» в Figma?

Термин «вырезать» в Figma может означать разные вещи — и именно от этого зависит выбор инструмента. Для одних пользователей это удаление элемента с холста, для других — обрезка изображения по контуру, для третьих — вычитание одной фигуры из другой. В отличие от Photoshop, где вырезание часто связано с инструментами типа «Лассо» или «Магический палец», в Figma всё строится на векторной логике и операциях над объектами. Поэтому важно чётко определить, что вы хотите получить: просто удалить элемент? Извлечь его из фона? Или создать сложную форму путём вычитания?

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

Как удалить объект полностью

Самый простой и часто используемый способ — полное удаление объекта с холста. Это не «вырезание» в творческом смысле, но именно так чаще всего начинают новички.

Для этого:

1. Выберите объект, кликнув по нему левой кнопкой мыши.
2. Нажмите клавишу Delete на клавиатуре (или Backspace на Mac).
3. Объект исчезнет с холста и из панели Layers.

Если вы случайно удалили важный элемент — используйте Ctrl+Z (или Cmd+Z), чтобы отменить действие. Figma сохраняет историю до 30 шагов по умолчанию.

Также можно удалить объект через контекстное меню: правый клик → «Delete», или через панель Layers — клик по значку корзины справа от имени слоя.

Вычитание форм с помощью Boolean Operations

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

Чтобы вычесть одну фигуру из другой:

1. Нарисуйте две фигуры: большую (основу) и меньшую (ту, которую нужно «вырезать»).
2. Расположите меньшую фигуру точно поверх большей — перекрытие обязательно.
3. Выделите обе фигуры (удерживайте Shift при клике).
4. В верхней панели инструментов найдите кнопки Boolean Operations: Union, Subtract, Intersect, Exclude.
5. Выберите Subtract (вычитание).

После этого меньшая фигура исчезнет, а из большей будет вырезана её форма. Результат — один векторный объект с «дыркой».

Часто используемые кейсы:
— Вырезание окна из рамки.
— Создание иконки «минус» из квадрата и полоски.
— Формирование логотипа с пустыми зонами.

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

Если вы хотите обрезать фотографию или иллюстрацию по форме (круг, звезда, произвольный контур), используйте маскирование — это самый гибкий и неразрушающий способ.

Алгоритм:

1. Загрузите изображение на холст (перетащите файл или через File → Import).
2. Нарисуйте фигуру, которая будет служить маской — например, круг или многоугольник.
3. Поместите фигуру поверх изображения. Она должна полностью или частично перекрывать его.
4. Выделите и изображение, и фигуру (удерживайте Shift).
5. Нажмите Ctrl+Alt+M (или Cmd+Option+M на Mac) — или щёлкните правой кнопкой → «Mask».

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

Этот метод идеален для карточек с аватарами, слайдеров, галерей — где изображения должны быть одинаковой формы, но разного содержания.

Как экспортировать вырезанный объект с прозрачным фоном

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

Чтобы экспортировать вырезанный объект:

1. Убедитесь, что объект не имеет фона. Если он был вырезан через Boolean Operations — проверьте, что за ним нет скрытых слоёв.
2. Выделите нужный объект (или группу).
3. В правой панели Properties найдите раздел «Export».
4. Нажмите «+» → выберите формат PNG или SVG.
5. Убедитесь, что опция «Background» отключена (появится значок прозрачности — шахматная сетка).
6. Нажмите «Export».

Если вы экспортируете маску — убедитесь, что вы экспортируете именно маскируемый объект, а не маску. Figma экспортирует только содержимое под маской, а не саму форму маски.

Частые ошибки и как их избежать

Даже опытные дизайнеры допускают типичные ошибки при вырезании объектов. Вот самые распространённые:

Ещё одна частая ошибка — попытка «вырезать» с помощью инструмента «Erase» (стирание). Figma не имеет такого инструмента, как в Procreate или Photoshop. Для редактирования контура используйте «Edit Points» (правка точек) или перерисуйте форму.

Экспертное мнение: как работать с вырезанием на профессиональном уровне

«Я веду команду из 12 дизайнеров, и один из самых частых вопросов на ревью — “Почему этот элемент не выглядит как в макете?” — оказывается, виновато вырезание. Дизайнеры используют маски для иконок, но забывают, что маска не экспортируется как отдельный элемент. В итоге разработчики получают PNG с белым фоном.»

— Дмитрий Соколов, Lead Designer, TechStart, 10 лет в UX-дизайне

Дмитрий рекомендует следующую систему:

1. Всегда используйте компоненты для повторяющихся вырезанных элементов — например, иконки с вырезанным фоном.
2. Создавайте отдельные экспорты для каждого варианта: с фоном, без фона, с тенью, без тени.
3. Проверяйте экспорт в режиме “Preview” — включите «Transparent Background» и посмотрите, как выглядит результат.
4. Делайте чек-лист перед сдачей макета: «Все ли вырезанные элементы экспортированы в PNG/SVG без фона?»
5. Используйте плагины, например, «Remove Background» для автоматического удаления фона с изображений — это сэкономит часы на ручной обрезке.

Часто задаваемые вопросы

Заключение

Вырезание объектов в Figma — это не одно действие, а набор инструментов, каждый из которых решает свою задачу. Удаление — для уборки холста, Boolean Operations — для создания сложных форм, маскирование — для обрезки изображений, экспорт — для использования в других средах. Понимание этих различий превращает вас из пользователя, который «просто удаляет», в профессионала, который создаёт точные, масштабируемые и готовые к разработке интерфейсы.

Важно помнить: в Figma всё — векторно. Даже если вы работаете с изображениями, вы всегда можете сохранить их «живыми» через маски, не разрушая исходные данные. Это делает Figma не просто инструментом, а системой, где каждое действие можно отменить, изменить и адаптировать.

• Используйте Delete для удаления объектов, Boolean Operations для вычитания форм, маски — для обрезки изображений.
• Всегда отключайте фон при экспорте PNG/SVG — иначе элементы будут с белым фоном.
• Текст можно преобразовать в вектор для использования как маска или вычитающая форма.
• Сохраняйте исходные объекты перед Boolean Operations — операции необратимы после сохранения.
• Проверяйте экспорт в режиме Preview и используйте чек-листы перед передачей разработчикам.