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

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

Как убрать фон у слоя в Figma

Чтобы убрать фон у любого объекта — будь то прямоугольник, текст, иконка или группа — открой панель свойств справа. В разделе «Fill» вы увидите цвет заливки, градиент или изображение. Нажмите на значок заливки (квадрат с цветом) и выберите опцию «None». Это мгновенно уберёт фон. Если вы не видите панель свойств — убедитесь, что объект выбран: кликните по нему на канвасе. Если выбрано несколько слоёв — заливка отключится у всех сразу.

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

1. Выберите слой или группу, у которого нужно убрать фон.
2. Перейдите в панель свойств справа (если её нет — нажмите Cmd/Ctrl + 1).
3. Найдите раздел Fill.
4. Нажмите на цветной квадрат рядом с «Fill».
5. Выберите None из списка или нажмите крестик (✕) в правом углу поля заливки.
6. Проверьте результат: фон исчез, а контуры или текст остались.

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

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

Если вы хотите визуально убрать белый фон с канваса для удобства работы — перейдите в меню View → Canvas → Background Color и выберите Transparent. Это изменит только внешний вид интерфейса, а не сам дизайн. Так вы сможете лучше видеть наложения, тени и прозрачные элементы.

Как проверить, прозрачный ли фон канваса

• Включите режим «Grid»: Cmd/Ctrl + G. Если сетка видна сквозь «фон» — он прозрачный.
• Поместите под ваш дизайн слой с чёрным цветом. Если он не виден — фон белый. Если чёрный слой виден — фон прозрачный.

Фон и заливка: в чём разница

Многие думают, что «фон» — это что-то глобальное, как в Photoshop. В Figma этого нет. Всё, что вы называете фоном, — это заливка слоя. Даже если вы создали прямоугольник на весь экран и назвали его «Фон» — это просто слой с заливкой. Удалите его — и фон исчезнет. Нет отдельной функции «удалить фон всего дизайна».

Важно понимать:
— Фон — это не системный элемент, а результат применения заливки.
— Канвас — это рабочая область, которая может быть прозрачной, но не является частью дизайна.
— Слои — единственные объекты, которые можно редактировать, перемещать и экспортировать.

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

Ошибки при удалении фона — одни из самых распространённых в Figma. Вот основные:

Ошибка 1: Удаляю слой «Фон» — а он не тот

Пользователь создаёт прямоугольник, называет его «Фон», но забывает, что он может быть под другими слоями. Когда он удаляет его — дизайну ничего не меняется, потому что реальный фон — это заливка кнопки или карточки.
Решение: Используйте режим «Outline» (Cmd/Ctrl + Shift + O), чтобы увидеть все слои без заливки. Тогда вы поймёте, где именно находится «видимый» фон.

Ошибка 2: Экспортирую как JPG — и получаю белый фон

JPG не поддерживает прозрачность. Даже если вы убрали все заливки, экспортируя в JPG, Figma автоматически наложит белый фон.
Решение: Всегда выбирайте формат PNG для прозрачных фонов. В настройках экспорта убедитесь, что стоит галочка «Transparency».

Ошибка 3: Не вижу, что заливка применена к группе

Если вы выделили группу, но не видите заливку — возможно, она применена к одному из внутренних слоёв.
Решение: Раскройте группу в панели Layers, найдите слой с заливкой и отключите её там. Или выделите всю группу → нажмите «None» — это отключит заливку у всех элементов внутри.

Как экспортировать с прозрачным фоном

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

Пошаговый алгоритм

1. Убедитесь, что все слои в выбранной области не имеют заливки (Fill = None).
2. Выделите область, которую нужно экспортировать (можно использовать Cmd/Ctrl + Shift + A для выделения всех слоёв в группе).
3. В панели экспорта справа нажмите «+» и выберите формат PNG.
4. Убедитесь, что опция Transparency включена (галочка стоит).
5. Нажмите «Export» и скачайте файл.

Продвинутые техники: маски, группы и компоненты

Для сложных случаев — например, когда фон нужно убрать только в определённой зоне — используйте маски. Создайте форму, поместите её поверх объекта, выделите оба слоя и нажмите Cmd/Ctrl + Shift + M. Это обрежет только видимую часть, оставив остальное прозрачным.

Если вы работаете с компонентами — убедитесь, что фон не закреплён как часть основного компонента. Лучше выносить фон в отдельные варианты (Variants), чтобы можно было переключать его включённым/выключенным. Например:
— Вариант 1: Фон включён (для веба)
— Вариант 2: Фон выключен (для мобильного UI)

Также полезно использовать режим «Isolate» — двойной клик по группе. Это позволит вам редактировать только её содержимое, не рискуя случайно изменить фон соседних слоёв.

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

Часто задаваемые вопросы

Заключение

Убрать фон в Figma — это не про удаление канваса или настройку интерфейса. Это про понимание архитектуры слоёв. Фон — это заливка, и её можно отключить одним кликом. Главное — не путать визуальное представление с реальной структурой дизайна. Всё, что вы видите — слои. Всё, что вы экспортируете — тоже слои. Если вы научитесь работать с ними как с элементами, а не как с «фоном», ваша работа станет быстрее, точнее и профессиональнее.

• Фон — это заливка слоя, а не свойство канваса.
• Для прозрачности используйте Fill = None и экспорт в PNG с включённой прозрачностью.
• Проверяйте все слои в режиме Outline, чтобы не пропустить скрытые заливки.
• Используйте маски и компоненты для сложных сценариев управления прозрачностью.
• JPG не поддерживает прозрачность — всегда выбирайте PNG для UI-элементов.