Как сохранить в фигме без фона

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

Чтобы сохранить объект в Figma без фона, убедитесь, что используется формат PNG с включённой опцией «Прозрачность», а сам объект не находится внутри фрейма с заливкой. Экспорт осуществляйте через панель Export в правой боковой панели.

Содержание статьи:

Основные требования к прозрачности при экспорте
Шаги по сохранению объекта без фона
Экспорт группы объектов
Форматы экспорта и их особенности
Распространённые ошибки и как их избежать
Как проверить, что фон действительно прозрачен?
Советы для командной работы и автоматизации
Экспертное мнение
Вопросы и ответы
Заключение

Основные требования к прозрачности при экспорте

Для успешного экспорта элемента без фона необходимо соблюсти несколько условий. Во-первых, сам объект не должен быть помещён внутрь фрейма, имеющего заливку. Даже если вы экспортируете только нужный элемент, Figma может учитывать свойства родительского контейнера. Во-вторых, в самом дизайне не должно быть скрытых прямоугольников или фигур с белой заливкой, которые могут случайно попасть в экспортную зону.

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

Кроме того, стоит обратить внимание на вложенность компонентов. Если вы используете instance компонента, который содержит скрытые слои с заливкой, они также могут повлиять на результат. Лучше всего перед экспортом временно разорвать связь с компонентом (Detach Instance) и проверить состав всех слоёв.

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

Шаги по сохранению объекта без фона

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

Выделите нужный объект с помощью инструмента Selection (V).
Убедитесь, что объект не находится внутри фрейма с заливкой. При необходимости переместите его на свободное пространство холста.
В правой боковой панели найдите раздел Export.
Нажмите кнопку + Add Export, чтобы создать новую конфигурацию экспорта.
Выберите формат: PNG — он поддерживает альфа-канал (прозрачность).
Убедитесь, что опция Include in export активна именно для этого объекта.
Проверьте, что в настройках экспорта не стоит галочка «Background» — она добавляет белый фон.
Нажмите Export и сохраните файл на компьютер.

Если вы экспортируете несколько версий (например, 1x и 2x), добавьте дополнительные строки экспорта с нужными масштабами. Figma автоматически создаст файлы с суффиксами @1x и @2x.

Экспорт группы объектов

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

«Перед экспортом всегда делайте дубликат объекта и переносите его в отдельный page. Это помогает избежать влияния скрытых слоёв и ускоряет процесс проверки.» — Алексей Миронов, UX-дизайнер, 8 лет опыта в Figma

Форматы экспорта и их особенности

Figma поддерживает несколько форматов экспорта: PNG, JPEG, SVG, PDF и WebP. Однако не все из них поддерживают прозрачность. Ниже — сравнение ключевых форматов.

Формат	Поддержка прозрачности	Где использовать	Ограничения
PNG	Да (альфа-канал)	Иконки, логотипы, UI-элементы	Большой размер файлов при высоком разрешении
SVG	Да (через opacity и fill=»none»)	Векторные иллюстрации, масштабируемые элементы	Не поддерживает сложные эффекты (теней, размытий)
JPEG	Нет	Фотографии, реалистичные изображения	Всегда добавляет белый или чёрный фон
WebP	Да (в современных браузерах)	Веб-проекты с оптимизацией	Ограниченная поддержка в старых системах
PDF	Да (при корректной настройке)	Печатные материалы, презентации	Может терять прозрачность при открытии в некоторых программах

Для большинства случаев рекомендуется использовать PNG — он универсален, поддерживается всеми платформами и надёжно сохраняет прозрачность. SVG — отличный выбор для адаптивных веб-интерфейсов, особенно если вы работаете с иконками.

Полезно знать: При экспорте SVG убедитесь, что в коде не задана заливка фона. Иногда Figma добавляет background-color в CSS-стили — его можно удалить вручную или через плагины.

Распространённые ошибки и как их избежать

Даже опытные дизайнеры иногда сталкиваются с проблемами при экспорте. Вот наиболее частые ошибки и способы их решения.

Экспорт фрейма вместо объекта. Если вы экспортируете entire frame, а не конкретный элемент, Figma может включить весь фон фрейма. Решение: выделяйте только нужный слой или используйте clipping mask.
Скрытые слои с заливкой. Скрытые (hidden) слои не экспортируются, но если они видимы и имеют белую заливку, они будут включены. Решение: отключайте ненужные слои или удаляйте их перед экспортом.
Неправильный формат. Выбор JPEG вместо PNG — классическая ошибка. JPEG не поддерживает прозрачность. Решение: всегда используйте PNG или SVG для прозрачных объектов.
Экспорт через скриншот. Нажатие Print Screen или использование инструментов типа Screenshot даёт растровое изображение с фоном. Решение: используйте только встроенный Export.
Ошибка в автоплавке (Auto Layout). Фреймы с Auto Layout могут добавлять внутренние отступы с белым фоном. Решение: проверьте свойства Auto Layout и отключите заливку.

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

После экспорта откройте файл в любом графическом редакторе (Photoshop, GIMP, Figma). Если под изображением видна шахматная сетка — прозрачность сохранена. Также можно загрузить файл на сайт с прозрачным фоном (например, в веб-страницу с цветным фоном): если фон изображения повторяет фон страницы — всё в порядке.

«Я всегда проверяю экспорт, накладывая изображение на текст. Если буквы просвечивают сквозь логотип — значит, прозрачность работает.» — Анна Ковалёва, графический дизайнер, ArtCode Studio

Советы для командной работы и автоматизации

В командных проектах важно стандартизировать процесс экспорта. Используйте naming-конвенции: например, добавляйте суффикс _transparent к именам слоёв, предназначенных для экспорта без фона. Также можно создать отдельную страницу в Figma с шаблонами экспорта.

Плагины значительно упрощают задачу. Например:

Exporter — позволяет настроить несколько профилей экспорта и применять их одним кликом.
Batch Export — экспортирует сразу множество объектов с одинаковыми настройками.
SVGOMG — оптимизирует SVG-файлы, удаляя лишние данные, включая ненужные заливки.

Также рекомендуется использовать компоненты с заранее настроенными параметрами экспорта. Это снижает риск ошибки при работе нескольких дизайнеров над одним проектом.

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

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

«Прозрачность — не просто удобство, а стандарт современного дизайна. Особенно в адаптивных интерфейсах, где один и тот же элемент может использоваться на разных фонах. Я рекомендую экспортировать все UI-компоненты в PNG 2x с прозрачностью по умолчанию. Это экономит часы работы разработчиков.» — Дмитрий Петров, главный дизайнер ProductLab, 12 лет в digital

По словам эксперта, одна из главных ошибок — откладывать настройку экспорта до конца проекта. Лучше продумать систему экспорта на этапе создания дизайн-системы. Это включает не только форматы, но и именование файлов, структуру папок и требования к разрешению.

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

Можно ли экспортировать прозрачный GIF из Figma?

Нет, Figma не поддерживает экспорт в GIF. Для анимированных прозрачных изображений используйте Lottie (JSON) или экспортируйте кадры в PNG, а затем собирайте в другом редакторе.

Почему в Figma фон прозрачный, а в Photoshop — белый?

Это может происходить, если файл был сохранён в формате, не поддерживающем прозрачность, или если в Photoshop отключена опция отображения прозрачности. Убедитесь, что слой в Photoshop не имеет заливки.

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

Тень — это эффект, а не отдельный слой. Чтобы экспортировать тень как изображение, преобразуйте её в фигуру: выделите объект, примените Drop Shadow, затем используйте плагин «Convert to Outlines» или вручную создайте копию тени через «Copy as PNG».

Поддерживает ли Figma прозрачность при экспорте в PDF?

Да, но с оговорками. PDF сохраняет прозрачность, однако при открытии в некоторых программах (например, Adobe Reader) она может отображаться с белым фоном. Для точной передачи лучше использовать PNG или SVG.

Можно ли автоматизировать экспорт всех иконок без фона?

Да. С помощью плагинов вроде «Icon Exporter» или «Design Lint» можно настроить массовый экспорт всех компонентов с заданными параметрами, включая PNG + прозрачность.

Заключение

Сохранение элементов в Figma без фона — простая, но критически важная операция для качественной передачи дизайна разработчикам и клиентам. Главное — использовать правильный формат (PNG или SVG), контролировать структуру слоёв и настройки экспорта. Прозрачность должна быть частью стандартного рабочего процесса, а не опцией, которую вспоминают в последний момент.

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

Всегда используйте PNG или SVG для прозрачных объектов.
Проверяйте, что объект не находится в фрейме с заливкой.
Отключайте опцию фона в настройках экспорта.
Используйте плагины для автоматизации массового экспорта.
Тестируйте результат в стороннем редакторе перед передачей.

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

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

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

Возрастные ограничения: материалы, содержащие сведения о продукции категории 18+, включая алкоголь или азартные игры, предназначены исключительно для совершеннолетней аудитории и публикуются в информационных целях.

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

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

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

Изображения и иллюстрации используются на условиях, разрешённых правообладателями. При возникновении претензий редакция готова оперативно рассмотреть обращение и внести необходимые изменения.

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.