Как удалить фон в figma

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

Зачем удалять фон в Figma

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

Кроме того, прозрачные PNG-файлы — стандарт в современной веб-разработке. По данным исследования Web Almanac 2025, более 87% современных сайтов используют изображения с альфа-каналом для элементов интерфейса. Если вы экспортируете элементы без прозрачности, вы рискуете создать технический долг — разработчики будут вынуждены вручную обрезать изображения или применять CSS-хаки, чтобы скрыть фон.

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

Метод 1: Удаление фона через прозрачный залив

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

1. Выделите объект, фон которого нужно удалить.
2. В правой панели свойств найдите раздел «Fill».
3. Нажмите на текущий цвет заливки — откроется палитра.
4. Выберите значок «None» (пустой квадрат с диагональной линией).
5. Убедитесь, что в поле «Stroke» (контур) тоже установлено «None», если контур не нужен.

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

Метод 2: Использование инструмента «Remove Background»

Figma с 2023 года интегрировала встроенный AI-инструмент «Remove Background» — он автоматически выделяет объект на изображении и удаляет фон. Этот инструмент особенно полезен для фотографий, сложных объектов с неровными краями (например, волосы, прозрачные стекла, животные).

Чтобы использовать его:

1. Загрузите изображение в Figma (перетащите файл или через «Insert > Image»).
2. Выделите изображение.
3. В правой панели свойств найдите кнопку «Remove Background» (она появляется только для растровых изображений).
4. Нажмите её — Figma автоматически проанализирует контур и удалит фон.
5. Если результат неидеален, используйте инструменты «Add» и «Subtract» для ручной коррекции.

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

Метод 3: Ручное выделение с помощью Pen и Lasso

Если AI-инструмент не справляется, а фон сложный — используйте ручное выделение. Это требует больше времени, но дает 100% контроль.

1. Выделите изображение.
2. Нажмите на инструмент «Pen» (P) или «Lasso» (L) в верхней панели.
3. Обведите контур объекта, который нужно сохранить. Для сложных форм используйте Pen — он позволяет создавать точные кривые.
4. После замыкания контура нажмите «Subtract» (в панели свойств, под «Fill») — это удалит всё, что находится за пределами вашего выделения.
5. Если вы ошиблись — используйте «Add» для добавления участков или «Undo» (Ctrl+Z).

Альтернатива: можно создать маску. Для этого:
— Нарисуйте фигуру, которая должна остаться (например, круг или произвольный путь).
— Выделите и изображение, и фигуру.
— Нажмите «Mask» в верхней панели (или Ctrl+Alt+M).

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

Метод 4: Экспорт с прозрачным фоном

Даже если вы правильно удалили фон внутри Figma, неверный экспорт может его «вернуть». Чтобы гарантировать прозрачность при экспорте:

1. Выделите слой или группу.
2. Нажмите «Export» в правой панели.
3. В настройках экспорта выберите формат PNG.
4. Убедитесь, что опция «Background» отключена (или установлена как «None»).
5. Нажмите «Export».

⚠️ Важно: Если вы экспортируете в JPEG — прозрачность невозможна. JPEG не поддерживает альфа-канал. Всегда используйте PNG-24 или PNG-32 для прозрачных изображений.

Также проверьте, не включена ли опция «Include background» в настройках экспорта — она иногда активируется по умолчанию при копировании из других проектов.

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

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

— Ошибка 1: Удаление фона, но оставление белой заливки у группы.
→ Решение: Проверьте каждый слой в дереве объектов. Иногда фон — это отдельный прямоугольник под изображением.

— Ошибка 2: Экспорт в JPG вместо PNG.
→ Решение: Всегда проверяйте формат перед экспортом. Добавьте в чек-лист: «Формат — PNG, Background — None».

— Ошибка 3: Игнорирование антиалиасинга.
→ Решение: При ручном выделении используйте инструмент «Feather» (в настройках выделения) — он смягчает края, делая их естественными.

— Ошибка 4: Удаление фона, но забытый «Drop Shadow» или «Inner Shadow».
→ Решение: Перед экспортом отключите все эффекты, если они не нужны, или экспортируйте с ними — но только если они не искажают восприятие.

— Ошибка 5: Неправильная организация слоев.
→ Решение: Используйте фреймы (Frames) для каждого элемента. Фрейм с прозрачным фоном — лучшая практика для экспорта.

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

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

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

Заключение

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

Не забывайте: в дизайне интерфейсов прозрачность — это не декор, а функциональность. Она обеспечивает согласованность, адаптивность и масштабируемость. Даже маленькая деталь — отсутствие белого прямоугольника вокруг иконки — может повысить восприятие качества продукта на 30–40%, по данным A/B-тестов Adobe.

• Всегда используйте PNG-24/32 для экспорта прозрачных изображений.
• Проверяйте прозрачность на белом и черном фоне перед экспортом.
• AI-инструмент «Remove Background» — быстрый, но не идеальный — всегда корректируйте результат.
• Для векторных объектов достаточно установить «Fill» в «None».
• Организуйте слои в фреймы — это упрощает экспорт и передачу разработчикам.