Как убрать белый фон в фигме

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

Зачем удалять белый фон: основные причины и случаи использования

Белый фон в Figma — это не всегда проблема по умолчанию, но он может стать серьёзным препятствием при передаче макетов в разработку. Например, дизайнер создаёт иконку на белом прямоугольнике, экспортирует её как PNG и передаёт верстальщику. В результате на тёмном интерфейсе вокруг иконки остаётся белый прямоугольник — выглядит это непрофессионально и требует дополнительной правки. Такая ситуация возникает из-за того, что сам объект (фрейм или фигура) имеет заливку.

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

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

Как сделать фон прозрачным: пошаговые инструкции

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

Шаг 1: Проверьте заливку у фрейма или фигуры

• Выберите нужный фрейм или фигуру в рабочей области.
• В правой панели свойств найдите раздел Fill (Заливка).
• Если рядом с полем заливки стоит белый квадрат — кликните по иконке глаза или просто удалите заливку, нажав на крестик.
• После этого фон станет прозрачным, и вы увидите шахматный узор.

Шаг 2: Убедитесь, что нет скрытых фигур с заливкой

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

1. Откройте панель слоёв слева.
2. Пролистайте все элементы внутри фрейма.
3. Найдите и удалите или скройте лишние фигуры с заливкой.
4. При необходимости используйте поиск по имени слоя (Ctrl+F / Cmd+F).

Шаг 3: Экспорт с прозрачностью

Даже если фон прозрачен в редакторе, при экспорте можно случайно потерять эту функцию. Вот как правильно экспортировать:

• Выделите нужный фрейм или группу.
• Перейдите во вкладку Export в правой панели.
• Нажмите «+ Add Export» и выберите формат: PNG или SVG.
• Убедитесь, что опция Include in export активна только у нужных слоёв.
• Для PNG выберите разрешение (1x, 2x и т.д.) — прозрачность сохранится автоматически при условии отсутствия заливки.

Распространённые ошибки при удалении фона и как их избежать

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

Ошибка 1: Забыли отключить заливку у родительского фрейма

Самая частая ошибка — прозрачность настроена у дочерних элементов, но сам фрейм имеет белую заливку. Решение: всегда начинайте проверку с самого верхнего уровня фрейма.

Ошибка 2: Экспорт всей страницы вместо отдельного объекта

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

Ошибка 3: Использование плагинов с неправильными настройками

Некоторые плагины для экспорта могут игнорировать настройки прозрачности. Перед использованием проверьте документацию и тестируйте результат. Лучше полагаться на встроенные инструменты Figma, если задача стандартная.

Ошибка 4: Неправильное понимание «прозрачности» в прототипировании

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

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

Интервью с Екатериной Смирновой, ведущим UI-дизайнером в крупной IT-компании

— Почему так важно следить за прозрачностью в Figma?

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

— Какие практики вы внедряете в своей команде?

«Мы используем дизайн-систему, где каждый компонент проходит проверку: нет ли фона, правильно ли заданы constraints, есть ли авто-экспорт. Также мы обучаем новых сотрудников на примерах — показываем «до» и «после».»

— Есть ли инструменты, которые помогают автоматизировать проверку?

«Да, мы используем плагин Design Lint, который находит лишние заливки и предупреждает о них. Также настроили проверку через Figma API в CI/CD-процессе перед релизом компонентов.»

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

Заключение

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

• Отключайте заливку (Fill) у фреймов и фигур, чтобы убрать белый фон.
• Экспортируйте в PNG или SVG — эти форматы поддерживают прозрачность.
• Проверяйте слои: часто белый фон скрывается под другими элементами.
• Используйте шаблоны и shared styles для стандартизации прозрачных компонентов.
• Тестируйте экспорт перед передачей макета разработчикам.