Как в фигме удалить фон

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

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

Фон в Figma — это не просто декоративный элемент. Он влияет на восприятие дизайна, совместимость с платформами и качество экспорта. Представьте, что вы создали кнопку с тенями и градиентом, но при экспорте в PNG она оказывается на белом прямоугольнике. Такой фон мешает интеграции в веб-интерфейсы, где фон может быть цветным, градиентным или даже анимированным. В мобильных приложениях, особенно с темной темой, белый фон может вызвать визуальный диссонанс и снизить доступность.

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

Как удалить фон у отдельного слоя

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

1. Выделите нужный слой в дереве объектов или на холсте.
2. Перейдите в панель свойств справа.
3. Найдите раздел «Fill» (Заливка).
4. Кликните по цветному квадрату — откроется палитра.
5. Выберите значок «None» («Нет») — он выглядит как пустой квадрат с красной диагональю.
6. Фон исчезнет, а сам объект останется с границами, тенями и другими эффектами.

Если вы не видите панель свойств — нажмите Cmd + Option + 2 (Mac) или Ctrl + Alt + 2 (Windows).

Также можно использовать альтернативный метод: щёлкните правой кнопкой по слою → «Remove Fill» (Удалить заливку). Этот способ особенно удобен при работе с множеством объектов — вы можете выбрать несколько слоёв и удалить фон у всех сразу.

Как убрать фон страницы (Frame)

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

Чтобы убрать фон страницы:

1. Выделите фрейм (он выделяется синей рамкой, если вы кликаете вне слоёв).
2. Перейдите в панель свойств справа.
3. Найдите поле «Background Color» (Цвет фона).
4. Нажмите на цветной квадрат.
5. Выберите «None» — фон исчезнет.

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

Также можно быстро отключить фон фрейма через контекстное меню: правый клик по фрейму → «Remove Background».

Как сделать фон прозрачным для экспорта

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

Чтобы гарантировать прозрачный фон при экспорте:

1. Убедитесь, что у всех слоёв и фреймов отключена заливка (Fill = None).
2. Убедитесь, что Background Color фрейма также установлен в «None».
3. Выделите объект или фрейм, который нужно экспортировать.
4. Перейдите в панель Export (Экспорт) справа.
5. Выберите формат PNG.
6. Убедитесь, что параметр «Background» не включён (если он есть — он должен быть отключён).
7. Нажмите «Export».

Если вы экспортируете SVG — прозрачность сохраняется автоматически, если в файле нет скрытых слоёв с белой заливкой.

Также полезно проверить результат: откройте экспортированный PNG в любом редакторе (например, Preview на Mac или Paint.NET на Windows) и убедитесь, что фон действительно прозрачный — вы должны видеть серую шахматную сетку.

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

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

• Ошибка 1: Удалили заливку слоя, но забыли про фон фрейма. Результат: при экспорте всё равно белый фон. Решение: Всегда проверяйте оба параметра — Fill и Background Color.
• Ошибка 2: Использовали «Opacity» вместо «None». Прозрачность 0% — это не то же самое, что отсутствие заливки. Объект всё ещё существует в структуре и может влиять на производительность. Решение: Всегда удаляйте заливку полностью, а не снижайте прозрачность.
• Ошибка 3: Экспортировали в JPEG. Фон стал белым, хотя вы всё удалили. Решение: Для прозрачности используйте только PNG или SVG. JPEG не поддерживает альфа-канал.
• Ошибка 4: Фон был скрыт под другим слоем. Вы думали, что он удалён, но на самом деле он просто перекрыт. Решение: Проверяйте дерево слоёв — включите режим «Isolate» (выделение одного слоя) через Cmd + Shift + Click.

Экспертное мнение: когда фон — не враг

Анна подчёркивает, что в 40% случаев, когда клиенты просят «убрать фон», на самом деле им нужен не прозрачный, а нейтральный фон — например, светло-серый (#F5F5F5) для лендингов или тёмно-серый (#121212) для тёмных интерфейсов. В таких случаях лучше заменить фон, а не удалять его.

Также она рекомендует всегда создавать два варианта макетов: один с прозрачным фоном (для разработчиков), другой — с брендовым фоном (для презентаций). Это экономит время и снижает количество правок.

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

Заключение

Удаление фона в Figma — это базовая, но критически важная задача, которая определяет качество вашего дизайна в реальном мире. От того, насколько точно вы настроите прозрачность, зависит, как ваш макет будет выглядеть на сайте, в приложении или на печатном носителе. Главное — не полагаться на визуальное восприятие, а проверять свойства: Fill и Background Color. Не забывайте о формате экспорта — PNG и SVG сохраняют прозрачность, а JPEG — нет.

• Всегда проверяйте и Fill, и Background Color — оба могут быть источником фона.
• Для экспорта используйте только PNG или SVG, если нужна прозрачность.
• Удаляйте фон у компонентов в режиме редактирования, а не в экземплярах — иначе вы рискуете сломать дизайн-систему.
• Создавайте отдельные версии макетов: с фоном для презентаций, без — для разработки.
• Не заменяйте фон прозрачностью, если он нужен для контекста — иногда лучше заменить цвет, чем удалять.