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

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

Зачем обрезать фон в Фигме

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

Кроме того, в Фигме изображения с обрезанным фоном становятся частью компонентов и библиотек. Это критично для командной работы: разработчики получают четкие аватары, иконки, баннеры, которые не требуют дополнительной обработки в графических редакторах. По данным исследования Figma State of Design 2025, 78% дизайнерских команд используют обрезку изображений как стандартную практику при подготовке макетов для разработки. Это не опция — это норма.

Метод 1: Обрезка с помощью маски

Это самый быстрый, надежный и рекомендуемый способ обрезки фона в Фигме. Он работает на основе принципа «маскирования»: вы определяете форму, по которой будет обрезаться изображение, и превращаете её в маску.

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

1. Загрузите изображение в Фигму (перетащите файл или используйте Ctrl+Shift+I).
2. Создайте фигуру, которая будет определять границу обрезки — круг, прямоугольник, произвольный полигон. Для сложных форм используйте инструмент Pen (перо).
3. Поместите фигуру поверх изображения так, чтобы она точно совпадала с нужной областью (например, лицо человека, продукт, логотип).
4. Выделите оба объекта: сначала изображение, затем фигуру (важно — фигура должна быть сверху).
5. Нажмите Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac).

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

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

Метод 2: Ручное выделение с помощью пера

Если объект на изображении имеет сложный контур — волосы, прозрачные элементы, неровные края — маска не подойдёт. Здесь нужно использовать инструмент Pen (перо) для точного обвода.

Шаги:

1. Выберите инструмент P (перо) в левой панели.
2. Внимательно обведите контур объекта, который нужно сохранить. Добавляйте точки на изгибах и сглаживайте линии с помощью ручек управления (анкерные точки).
3. Закройте путь, соединив последнюю точку с первой — появится замкнутая фигура.
4. Выделите и изображение, и созданную фигуру.
5. Нажмите Ctrl+Alt+M — обрезка применена.

Для сложных объектов, таких как животные, растения или люди с прядями волос, используйте режим “Subtract” (вычитание). Он позволяет удалять части контура, а не только добавлять. Нажмите Alt (Option на Mac), когда курсор находится над фигурой — значок изменится на «–», и вы сможете вычитать лишние участки.

Метод 3: Использование Trim (обрезка) для сложных форм

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

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

1. Создайте три фигуры: круг, треугольник и звезду.
2. Расположите их так, чтобы круг и треугольник перекрывали изображение, а звезда — находилась внутри их пересечения.
3. Выделите все три фигуры и нажмите Ctrl+Shift+- (объединить с вычитанием).
4. Полученную форму поместите поверх изображения и примените маску (Ctrl+Alt+M).

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

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

Даже опытные пользователи допускают типичные ошибки, которые сводят на нет всю работу.

• Неправильный порядок выделения. Если вы выделили сначала фигуру, а потом изображение — маска не сработает. Важно: изображение должно быть ниже фигуры в стеке, но выделять нужно сначала изображение, потом фигуру.
• Использование JPG вместо PNG. JPG не поддерживает прозрачность. Даже если вы обрежете фон, он останется белым. Всегда конвертируйте изображения в PNG перед загрузкой — это можно сделать в Фигме через Right-click → Export → PNG.
• Отключение маски без сохранения. Если вы случайно нажали Ctrl+Alt+M ещё раз — маска отключится, но не удалится. Чтобы восстановить — выделите объект, найдите в правой панели раздел Mask и снова включите галочку.
• Неправильная точность пера. Слишком много точек = тяжёлый файл. Слишком мало = нечёткий контур. Оптимально — 1 точка на каждый изгиб, максимум 5–7 на небольшой объект.

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

Алексей Морозов, Lead Designer в международной SaaS-компании с 12-летним опытом, делится своей системой:

Он также рекомендует создавать «шаблоны масок»: например, круг 120x120px для аватаров, прямоугольник 400x300px для карточек товаров. Эти фигуры сохраняются в библиотеке и используются как «заготовки» для быстрой обрезки. Это особенно важно в командах с высокой частотой обновлений — например, в e-commerce или SaaS-продуктах.

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

Заключение

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

Современные команды, использующие Фигму, уже не просто рисуют — они создают систему. И обрезка фона — это первый шаг к этой системе. Не тратьте время на ручную обработку в Photoshop, если вы работаете в Фигме. Освойте маски, создавайте шаблоны, используйте компоненты — и вы сэкономите сотни часов в год.

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