Как вырезать часть изображения в фигме

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

Зачем вырезать части изображений в Figma

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

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

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

Метод 1: Использование маски вырезания

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

Пошаговая инструкция:

1. Загрузите изображение в Figma (перетащите файл или через Insert > Image).
2. Нарисуйте форму, которая будет определять область выреза: прямоугольник, эллипс, многоугольник или используйте инструмент Pen для ручного рисования контура.
3. Разместите форму точно поверх изображения. Убедитесь, что она полностью перекрывает ту часть, которую хотите сохранить.
4. Выделите оба объекта: сначала изображение, затем форму (удерживайте Shift при выборе).
5. Нажмите Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac).

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

Этот метод идеален для:
— круглых аватаров
— изогнутых баннеров
— сложных форм (например, вырез под логотип)
— динамических макетов, где форма может меняться

Метод 2: Вычитание фигур (Subtract)

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

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

1. Импортируйте изображение.
2. Нарисуйте форму, которую хотите вычесть (например, прямоугольник, чтобы создать «окно»).
3. Выделите оба объекта: сначала изображение, затем форму (порядок важен!)
4. Нажмите Ctrl+Alt+Minus (Windows) или Cmd+Option+- (Mac).

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

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

Метод 3: Импорт с обрезкой через PNG с прозрачностью

Если вы заранее знаете, что изображение нужно обрезать под конкретную форму — лучше сделать это до импорта в Figma. Например, в Photoshop, Canva или даже в бесплатных онлайн-инструментах вроде Remove.bg.

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

Этот подход особенно полезен, когда:
— вы работаете с большим количеством изображений
— вам нужна максимальная производительность (Figma не тратит ресурсы на вычисление масок)
— вы экспортируете в код (например, для разработчиков)

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

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

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

• Неправильный порядок выделения. Если вы выделите сначала форму, а потом изображение — Figma может применить маску к форме, а не к изображению. Всегда выделяйте сначала изображение, затем маску.
• Изображение под маской не видно. Это происходит, если форма слишком мала или не перекрывает изображение. Проверьте положение и масштаб объектов.
• Неактивная маска после экспорта. Некоторые разработчики жалуются, что в коде изображение не обрезается. Это происходит, если вы экспортируете как SVG — Figma экспортирует маску как CSS clip-path, но не все браузеры корректно его поддерживают. Решение: экспортируйте как PNG или JPG.
• Удаление маски по ошибке. Если вы случайно удалите форму-маску, изображение вернётся в исходное состояние. Не паникуйте — просто нажмите Ctrl+Z, или повторите операцию.

Экспертное мнение: Как работают профессионалы

«Я не использую вычитание для фото — это как стрелять из пушки по воробьям. Маска — это мой стандарт. Я создаю шаблоны масок: круг, овал, закруглённый прямоугольник — и сохраняю их в библиотеке компонентов. Когда нужно вырезать изображение — просто дублирую нужную форму, перетаскиваю её поверх фото и применяю маску. За 5 секунд — готово.»

— Марина Тимофеева, Lead Designer в IT-стартапе, 6 лет работы с Figma

Марина также рекомендует использовать названия слоёв: называйте маски как «Mask: Product Photo» или «Crop: Avatar». Это упрощает поиск и совместную работу. Особенно важно в больших файлах с десятками изображений.

Она также использует Auto Layout с масками: если изображение вставляется в контейнер с фиксированным размером, маска автоматически растягивается — и вы получаете адаптивные карточки без ручной настройки.

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

Заключение

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

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

• Используйте маску вырезания (Ctrl+Alt+M) — это самый надёжный и гибкий способ.
• Никогда не удаляйте исходные изображения — они остаются доступны под маской.
• Для финального экспорта в разработку — используйте PNG с прозрачностью, если форма не меняется.
• Избегайте вычитания для растровых изображений — оно работает некорректно.
• Именуйте маски и используйте библиотеки компонентов для масштабирования процесса.