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

Убрать фон в Figma можно несколькими способами, в зависимости от типа объекта: слоя, фигуры, текста или артборда. Основные методы — использование прозрачности (Opacity), удаление заливки (Fill), применение масок или экспорт с прозрачным фоном. Ключевое — понимать разницу между фоном холста, артборда и отдельного элемента.

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

Разница между фоном холста, артборда и слоя

В Figma существует три уровня, где может находиться фон: холст (canvas), артборд (artboard) и отдельный слой (layer). Путаница между ними — основная причина проблем с прозрачностью. Холст — это общее пространство проекта, он всегда имеет серый или шахматный фон, который нельзя изменить. Этот фон не экспортируется. Артборд — рабочая область, имитирующая экран или страницу. У него может быть цветной или прозрачный фон. Слой — любой объект внутри артборда: фигура, текст, группа.

Если вы видите белый фон вокруг вашего дизайна, скорее всего, он задан на уровне артборда. При экспорте этот фон будет сохранён, если не отключить его. Чтобы проверить, выберите артборд и посмотрите в правую панель свойств. Там будет раздел «Background» с настройкой заливки (Fill). Если она активна и белая — это и есть ваш «ненужный» фон.

Когда какой фон использовать?

• Холст: используется только для организации проекта. Не влияет на экспорт.
• Артборд: задаёт контекст. Например, мобильный экран с чёрным фоном. Можно сделать прозрачным, если нужна гибкость.
• Слой: любой элемент интерфейса. Его фон управляется через Fill и Opacity.

Выбор зависит от задачи. Для иконок и логотипов лучше использовать прозрачный артборд. Для макетов экранов — цветной, чтобы имитировать реальные условия.

Как убрать фон слоя или фигуры

Чтобы убрать фон у отдельного слоя — например, у прямоугольника, круга или текста — нужно отключить заливку. Выделите объект, перейдите в правую панель свойств и найдите блок «Fill». Нажмите на квадрат с цветом и выберите значок «×» или просто снимите галочку рядом с заливкой. Объект станет прозрачным.

Если у объекта несколько заливок, отключите все. Иногда дизайнеры случайно добавляют дополнительную заливку белого цвета, создавая иллюзию фона. Также можно использовать прозрачность (Opacity). Установите значение 0%, и слой исчезнет полностью. Но будьте осторожны: Opacity влияет на весь слой, включая обводку и тени.

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

Пример: подготовка логотипа для экспорта

Допустим, вы создали логотип из текста и иконки. Чтобы он был готов к использованию на сайтах и презентациях:

• Группируйте все элементы логотипа.
• Убедитесь, что ни у одного слоя нет белой заливки.
• Отключите фон артборда (см. следующий раздел).
• Добавьте экспортный слой (Export Settings) с форматом PNG и включённой прозрачностью.

Теперь при экспорте фон будет прозрачным.

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

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

Выберите артборд в дереве слоёв или на холсте. В правой панели найдите блок «Background». По умолчанию там может быть установлен белый цвет. Нажмите на значок «×» или снимите галочку рядом с Fill. Фон станет прозрачным — вы увидите шахматный паттерн.

Настройка экспортных параметров

Даже при прозрачном фоне важно правильно настроить экспорт. Выделите артборд или слой, который хотите экспортировать. Внизу правой панели найдите раздел «Export». Нажмите «+» и добавьте новый экспорт.

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

Экспертные советы по работе с фонами

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

Другой подход — использование фреймов вместо артбордов для небольших элементов. Фреймы (Frames) ведут себя как группы, но поддерживают экспорт. Они не имеют фона по умолчанию, что снижает риск ошибки.

1. Создайте фрейм (F) вокруг нужных слоёв.
2. Отключите фон (если есть).
3. Настройте экспорт: PNG с прозрачностью.
4. Используйте как компонент или экспортируйте отдельно.

Работа с командой: стандарты именования и структуры

В командной среде важно соблюдать единые правила. Например:

• Артборды с фоном называются с префиксом BG_, например BG_Login_Screen.
• Артборды без фона — ICN_Logo, BTN_Primary.
• В документации указывается, что все компоненты должны быть с прозрачным фоном.

Это снижает количество ошибок при передаче макетов разработчикам.

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

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

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

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

• Фон всех слоёв отключён (Fill = off).
• Фон артборда отключён.
• Нет скрытых белых фигур под объектами.
• Экспортный формат — PNG или SVG с прозрачностью.
• Объект находится в пределах границ экспортного слоя.

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

Заключение

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

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