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

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

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

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

Кроме того, вырезанные изображения с прозрачным фоном (PNG-32) значительно уменьшают размер файлов по сравнению с белыми или цветными фонами, особенно при использовании в web-интерфейсах. Это влияет на скорость загрузки страниц и соответствие требованиям SEO. Google и другие поисковые системы учитывают скорость загрузки изображений как фактор ранжирования. Использование правильно вырезанных графических элементов — это не только вопрос дизайна, но и производительности.

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

Основной метод: маска вырезания

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

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

1. Загрузите изображение в проект Figma (перетащите файл или используйте File → Import).
2. Создайте форму, которая будет определять границы выреза: круг, прямоугольник, произвольный путь или даже текст. Убедитесь, что форма полностью перекрывает ту часть изображения, которую вы хотите сохранить.
3. Разместите форму точно поверх изображения. Проверьте, что форма находится выше изображения в панели Layers (в противном случае маска не сработает).
4. Выделите оба объекта: сначала форму, затем — изображение (удерживайте Shift при клике).
5. Нажмите Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac). Альтернативно: кликните правой кнопкой → Clip или используйте панель свойств в правой колонке → кнопку Clip.

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

Дополнительные методы: векторные формы и контуры

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

Создание маски по произвольному контуру:

Шаг 1: Нарисуйте контур с помощью Pen

Выберите инструмент Pen (P) и начните рисовать контур вокруг объекта на изображении. Для точности включите режим Smart Guides (в меню View → Smart Guides). Используйте точки с кривыми (Bézier), чтобы точно повторить изгибы. Не стремитесь к идеальной точности — Figma не требует 100% соответствия, достаточно визуального совпадения.

Шаг 2: Преобразуйте контур в маску

После завершения контура разместите его поверх изображения, выделите оба слоя и примените маску (Ctrl+Alt+M). Теперь изображение будет видно только внутри вашего ручного контура.

Шаг 3: Оптимизация контура

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

Также можно использовать векторные изображения из библиотек (например, SVG-силуэты из Iconfinder или Undraw), импортировать их и применить как маску. Это особенно полезно для повторяющихся элементов, таких как аватары в виде звёзд, сердец или геометрических форм.

Настройки экспорта: как сохранить прозрачность

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

Вот как экспортировать корректно:

1. Выделите маскированный слой (или группу с маской).
2. Перейдите в панель Properties → Export.
3. Выберите формат PNG. Не используйте JPG — он не поддерживает прозрачность.
4. Убедитесь, что опция Transparency включена (галочка должна быть поставлена).
5. Установите масштаб: 1x для веба, 2x или 3x для мобильных устройств (Retina-экраны).
6. Нажмите Export — файл будет сохранён с прозрачным фоном.

Если вы экспортируете в SVG, Figma автоматически сохраняет прозрачность, но SVG может содержать лишние метаданные. Для веба рекомендуется использовать инструменты вроде SVGOMG для оптимизации файла.

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

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

Также не используйте инструмент Eraser для удаления фона — он работает только с пикселями и разрушает векторную структуру. Это приводит к потере масштабируемости и некачественному экспорту.

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

«Я не вырезаю изображения вручную, если есть возможность использовать готовые SVG-силуэты. Библиотеки вроде SVGRepo или Undraw предлагают тысячи бесплатных, оптимизированных и готовых к использованию форм. Я импортирую их в Figma, масштабирую, накладываю поверх фото и применяю маску. Это экономит мне до 70% времени на каждом проекте.»

— Дмитрий Кузнецов, Lead Designer в стартапе по разработке мобильных приложений, более 120 проектов за 6 лет.

Дмитрий также рекомендует создавать собственные библиотеки масок. Например, если вы часто работаете с аватарами в форме круга или овала — сохраните их как компоненты (Component) с предустановленной маской. Так вы сможете использовать их в любом макете с одним кликом, не повторяя действия.

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

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

Заключение

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

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

• Используйте маску вырезания (Ctrl+Alt+M), а не инструмент Eraser.
• Всегда экспортируйте в PNG с включённой прозрачностью.
• Проверяйте порядок слоёв: форма должна быть выше изображения.
• Оптимизируйте сложные контуры с помощью функции Simplify.
• Сохраняйте часто используемые маски как компоненты для повторного использования.