Как убрать фон в figma

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

Зачем убирать фон в Figma

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

Кроме того, многие компании и платформы (например, Figma Community, Iconscout, NounProject) требуют загрузки изображений именно с прозрачным фоном. Это не просто рекомендация — это техническое требование. Даже если вы работаете над макетом, а не над финальным файлом, прозрачный фон даёт больше гибкости при демонстрации и тестировании. Представьте, что вы показываете клиенту кнопку с тенью и полупрозрачным градиентом — если фон белый, вы теряете ощущение глубины и реалистичности.

Метод 1: Удаление цвета фона

Самый простой способ убрать фон — если он представляет собой заливку цвета или градиента. Выделите фрейм или группу, перейдите в панель свойств справа и найдите раздел «Fill». Если там указан цвет (например, #FFFFFF или #E5E5E5), кликните по значку корзины рядом с ним — заливка исчезнет. Если вы видите «No fill» — фон уже прозрачный.

Этот метод подходит для прямоугольников, фреймов, групп, созданных вручную. Но не работает, если фон — это изображение, вставленное как слой. В таком случае вы увидите не «Fill», а «Image» в списке свойств.

Как проверить, что фон убран

После удаления заливки включите сетку в Figma: Ctrl/Cmd + Shift + G. Если вы видите серо-белую шахматную решётку под вашим элементом — фон действительно прозрачен. Если остаётся белый или цветной фон — значит, вы не удалили заливку полностью, или есть другой слой под ним.

Ошибки при этом методе

• Не удаляете заливку у всех слоёв внутри группы — проверяйте каждый элемент в дереве слоёв.
• Забываете, что фрейм может иметь фон, а содержимое — нет. Всегда выбирайте сам фрейм, а не его содержимое.
• Путаете «Fill» с «Background» — в Figma нет отдельного поля «Background», только «Fill».

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

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

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

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

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

Плюсы и минусы маскирования

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

Даже если вы убрали фон в интерфейсе, экспорт может сохранить белый фон по умолчанию. Это частая ошибка новичков. Чтобы избежать её, настройте экспорт правильно.

Настройка экспорта

• Выделите слой, фрейм или группу, которую хотите экспортировать.
• В панели свойств найдите раздел «Export».
• Выберите формат: PNG — только он поддерживает прозрачность.
• Убедитесь, что галочка «Transparent background» активна (она включена по умолчанию, но проверьте).
• Укажите масштаб: 1x, 2x или 3x — в зависимости от требований к качеству.
• Нажмите «Export».

Что делать, если фон всё равно белый?

• Откройте экспорт в новом окне — возможно, вы смотрите на предварительный просмотр с белым фоном браузера.
• Откройте файл в Photoshop, GIMP или онлайн-редакторе типа Photopea — там прозрачность будет видна сразу.
• Проверьте, не добавлен ли фон на уровне фрейма — иногда дизайнеры забывают, что фрейм может иметь заливку, даже если содержимое прозрачно.

Метод 4: Плагин Remove Background

Для сложных изображений с волосами, полупрозрачными краями или неоднородным фоном ручная маска неэффективна. Здесь на помощь приходят плагины. Figma поддерживает десятки сторонних инструментов, и один из самых популярных — Remove Background.

Как установить и использовать

1. Перейдите в меню Plugins → Browse plugins.
2. Найдите «Remove Background» (разработчик: Figma Team).
3. Установите плагин и перезагрузите Figma, если потребуется.
4. Выберите изображение, фон которого нужно удалить.
5. Запустите плагин: Plugins → Remove Background → Run.
6. Плагин автоматически распознаёт объект и убирает фон, оставляя только основной элемент.

Ограничения плагина

• Не идеально работает с очень мелкими деталями (например, тонкие кисти, сетки, прозрачные стёкла).
• Требует хорошего контраста между объектом и фоном.
• Не поддерживает анимированные или видео-слои.

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

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

• Не проверяют экспорт. Убрали фон в интерфейсе — забыли про настройки экспорта. Результат: белый фон в финальном PNG.
• Используют JPG вместо PNG. JPG не поддерживает прозрачность. Никогда не экспортируйте логотипы или иконки в JPG.
• Удаляют только верхний слой, а фон остаётся ниже. Проверяйте дерево слоёв — часто фон — это отдельный прямоугольник под изображением.
• Путают маску и обрезку. Маска — это временная обрезка. Обрезка (Crop) удаляет пиксели навсегда. В Figma нет функции Crop для изображений — только Mask.
• Не сохраняют исходный файл. После маскирования или удаления фона сохраняйте копию с исходным изображением — вдруг понадобится правка.

Чек-лист перед экспортом

• Фон — «No fill»?
• Все слои в группе проверены?
• Экспорт — PNG, прозрачность включена?
• Проверено в другом редакторе?

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

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

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

Заключение

Удаление фона в Figma — это не просто технический приём, а фундаментальный навык для любого дизайнера, работающего с цифровыми интерфейсами. От правильного экспорта до использования масок и плагинов — каждый метод имеет своё место. Главное — не полагаться на интуицию, а следовать системе: проверяйте заливки, используйте маски для сложных объектов, экспортируйте только в PNG с прозрачностью и всегда проверяйте результат в другом редакторе.

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

• Удаляйте заливку в панели свойств — это базовый шаг.
• Для сложных изображений используйте маски или плагин Remove Background.
• Всегда экспортируйте в PNG с включённой прозрачностью.
• Проверяйте результат в другом редакторе — не полагайтесь на предварительный просмотр.
• Сохраняйте исходные файлы — маски и плагины не заменяют оригиналы.