Сайт в разработке Наполняем разделы и правим ошибки — что-то может выглядеть или работать не так. Если заметили — позвоните или напишите.

Как удалить фон в figma

Как удалить фон в figma — пошагово разбираем, как убрать заливку, прозрачность и лишние объекты, чтобы быстро получить чистый макет.

Раздел: Figma

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

Удаление заливки у объекта

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

  1. Выберите слой на холсте или в панели слоев.
  2. Справа откройте блок Fill.
  3. Отключите заливку через значок видимости или удалите ее.
  4. Если есть обводка, проверьте блок Stroke, чтобы она не имитировала фон.

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

Когда фон — это отдельный слой

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

  • Откройте список слоев.
  • Найдите элемент, который лежит позади содержимого.
  • Удалите его клавишей Delete или спрячьте значок видимости.
  • Проверьте, не является ли он частью компонента или фрейма.

Если фон входит в состав компонента, удаление на одном экземпляре может быть недоступно или временно. В этом случае нужно либо перейти к основному компоненту, либо сделать override, если структура это позволяет. Если объект внутри заблокирован, сначала снимите блокировку.

Фон у фрейма и у страницы

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

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

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

Что делать, если нужен прозрачный экспорт

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

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

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

Если нужно быстро понять, как удалить фон в figma, начните с проверки, является ли он заливкой, отдельным объектом или частью фрейма. Сначала выключите Fill, затем удалите подложку из слоев и только после этого тестируйте экспорт: так проще избежать ситуации, когда фон кажется убранным, но в готовом файле он все еще остается.

}{

Другие ответы

SSL и безопасность

Как создать ssl сертификат windows

Практический разбор запроса «как создать ssl сертификат windows»: что можно сделать в Windows, какие есть варианты, как проверить результат и избежать типичных ошибок.

PHP

PHP какой тип

Коротко и по делу: разберём запрос php какой тип, покажем, где в PHP есть типы данных, как их проверять и почему вопрос бывает неоднозначным.

CSS

Как задать css в html

Практическое объяснение, как задать css в html: способы подключения, приоритеты, частые ошибки и проверка результата для страницы без лишней теории.

Заявка

Расскажите о проекте

Свяжемся в течение рабочего дня, зададим уточняющие вопросы и предложим варианты. Без навязчивых звонков.

Форма обратной связи

Отвечаем в рабочие дни с 10:00 до 19:00

Написать в Telegram