Figma как убрать фон

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

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

Что такое фон в Figma: разбираемся с терминологией

Перед тем как убирать фон, важно понять, что именно вы имеете в виду под этим словом. В Figma существует несколько уровней, где может присутствовать фон:

• Заливка (Fill) — цвет внутри фигуры, текста или группы;
• Фон фрейма (Frame Background) — цвет, заданный для всего фрейма;
• Цвет страницы (Page Background) — цвет холста, который не экспортируется;
• Экспортное поведение — формат и настройки при сохранении файла.

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

Чтобы точно определить источник фона, кликните по объекту и проверьте правую панель свойств. Если выделен фрейм — ищите настройку Background. Если выделена фигура — смотрите раздел Fill.

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

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

1. Выделите нужный объект с помощью инструмента «Select» (V).
2. В правой панели найдите секцию Fill.
3. Нажмите на квадрат с цветом рядом с надписью «Fill».
4. В открывшемся цветовом пикере нажмите на значок перечёркнутого глаза (или установите значение Opacity = 0%).

После этого заливка станет полностью прозрачной. Объект останется на месте, но его внутренняя область больше не будет закрашена.

Шаги на примере текста

Иногда текстовые блоки имеют скрытую заливку, особенно если они были стилизованы как кнопки. Чтобы убрать фон у текста:

• Выделите текстовый слой.
• Убедитесь, что в разделе Fill активна заливка (если её нет — ничего делать не нужно).
• Отключите заливку, нажав на иконку «глаз со знаком ×».

Теперь текст будет отображаться только своими символами, без фона.

Фон фрейма: как отключить и зачем это нужно

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

Чтобы убрать фон фрейма:

1. Выделите фрейм (не его содержимое).
2. В правой панели найдите секцию Design.
3. Прокрутите вниз до пункта Background.
4. Нажмите на цвет фона и выберите опцию Transparent или установите Opacity = 0%.

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

Когда это важно?

Прозрачный фрейм особенно нужен:

• При создании компонентов для библиотек (например, иконок);
• Для корректного экспорта PNG с прозрачным фоном;
• При использовании авто-расположения (Auto Layout), чтобы не было лишних цветовых блоков.

Экспертные советы по работе с прозрачностью

Работа с прозрачностью в Figma требует понимания иерархии слоёв и правил наследования. Вот ключевые практики, которые помогут избежать ошибок.

Используйте режим просмотра «Outline»

Включите режим Outline (Ctrl+Alt+O) в верхнем меню, чтобы видеть границы всех фреймов и слоёв. Это поможет быстро находить «скрытые» фоны, особенно если они прозрачны, но всё ещё занимают пространство.

Проверяйте вложенные фреймы

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

Настройка по умолчанию для новых проектов

Чтобы каждый раз не настраивать прозрачность, создайте шаблон с прозрачными фреймами и стандартными настройками экспорта. Сохраните его в своей библиотеке команды.

Ошибки, которые допускают новички

Даже простая задача может вызвать раздражение, если вы не знаете типичных ловушек. Вот самые распространённые ошибки:

• Путаница между Fill и Background: пользователи отключают заливку фигуры, но забывают про фон фрейма.
• Экспорт в JPG вместо PNG: формат JPG не поддерживает прозрачность, поэтому даже при правильных настройках вы получите белый фон.
• Неактивная опция прозрачности при экспорте: нужно вручную включить «Transparent» в настройках экспорта.
• Использование Rectangle как маски: иногда вместо прозрачности добавляют белый прямоугольник — это ошибка.

Как проверить, что фон действительно убран?

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

Как правильно экспортировать элемент без фона

Даже если вы сделали всё правильно в редакторе, неправильный экспорт может «вернуть» фон. Вот как этого избежать:

1. Выделите нужный слой, фигуру или фрейм.
2. В правой панели найдите секцию Export.
3. Нажмите «+ Add Export».
4. Выберите формат PNG.
5. Убедитесь, что опция Transparent активирована (галочка стоит).
6. Нажмите «Export» и сохраните файл.

Альтернативы: SVG и множественный экспорт

Если вы экспортируете иконки или векторные элементы, используйте формат SVG — он по умолчанию поддерживает прозрачность и масштабируется без потерь. Для серии иконок настройте множественный экспорт через плагины, например, Icon Exporter.

Работа с массовыми объектами: чек-лист и автоматизация

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

Чек-лист для массовой обработки

• Убедитесь, что все компоненты находятся в отдельных фреймах.
• Проверьте, что у каждого фрейма отключён фон (Background = Transparent).
• У всех фигур и текстов — прозрачная заливка.
• Настроены одинаковые параметры экспорта (PNG + Transparent).

Автоматизация через плагины

Используйте плагины:

• Batch Styler — массовое изменение заливок.
• Mass Export — одновременный экспорт множества слоёв.
• Remove Background — автоматически убирает фон у выбранных фреймов.

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

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

Заключение

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

• Фон может быть у фигуры, фрейма или при экспорте — проверяйте все уровни.
• Прозрачность задаётся через отключение Fill или установку Background = Transparent.
• Для экспорта обязательно выбирайте PNG и включайте опцию Transparent.
• Используйте плагины для массовой обработки и создания шаблонов.
• Всегда проверяйте результат в стороннем просмотрщике.