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

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

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

Подготовка объекта к экспорту

Перед тем как начать экспорт, важно убедиться, что сам объект действительно готов к сохранению без фона. Даже если вы используете правильные настройки, наличие скрытого фона или лишних слоёв может испортить результат. Первое, что нужно проверить — это наличие заднего фона (background) в слоях. Часто дизайнеры добавляют прямоугольник под элемент для удобства просмотра, но забывают его удалять перед экспортом.
Откройте панель слоёв (Layers panel) и внимательно осмотрите структуру. Убедитесь, что ваш объект — это отдельный слой или группа, не перекрытая другими элементами. Если вы работаете с текстом, иконкой или фигурой, убедитесь, что они не вложены во фрейм с заливкой. Иногда фрейм автоматически создаётся при импорте или дублировании, и он может иметь белый фон по умолчанию.
Если объект состоит из нескольких частей, например, композиции из фигур и текста, объедините их в одну группу. Это упростит экспорт и минимизирует риск ошибки. Чтобы сгруппировать элементы, выделите их (удерживая Shift), затем нажмите Ctrl+G (Cmd+G на Mac). Теперь вся группа будет восприниматься как единый объект.

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

Шаги подготовки объекта

1. Выделите нужный элемент или группу элементов.
2. Проверьте панель слоёв на наличие скрытых или невидимых фоновых фигур.
3. Удалите все лишние слои, особенно те, что находятся под объектом.
4. Убедитесь, что родительский фрейм или группа не имеет заливки.
5. При необходимости создайте новый пустой фрейм, поместите в него объект и экспортируйте уже этот фрейм.

Настройки экспорта в Figma

После подготовки объекта можно переходить к экспорту. В Figma это делается через панель свойств справа. Выделите нужный элемент, группу или фрейм. Внизу панели свойств появится секция «Export» (Экспорт). Нажмите «+ Add Export» (Добавить экспорт), чтобы создать новую конфигурацию.
Доступны три основных формата: PNG, JPEG и SVG. Для сохранения изображения без фона выбирайте PNG или SVG. JPEG не поддерживает прозрачность, поэтому даже при правильной настройке вы получите белый фон. Формат PNG идеален для растровых изображений с прозрачностью, а SVG — для векторных, особенно если элемент будет масштабироваться.
После выбора PNG, откройте дополнительные настройки. Здесь важно включить опцию «Transparency» (Прозрачность). По умолчанию она может быть отключена, особенно если вы ранее работали с экспортами в JPEG. Активируйте чекбокс, иначе изображение будет экспортироваться с белым фоном.
Также обратите внимание на параметр Scale (Масштаб). Вы можете выбрать 1x, 2x, 3x и так далее. Это влияет на разрешение изображения. Для веба обычно достаточно 1x или 2x, для мобильных экранов высокого разрешения — 2x или 3x. Чем выше масштаб, тем больше размер файла, но лучше качество.

Если вы экспортируете несколько версий одного элемента (например, в разных размерах), добавьте несколько строк в секции Export. Например, одна строка — PNG 1x с прозрачностью, вторая — PNG 2x с прозрачностью. Figma автоматически создаст оба файла при экспорте.

Как запустить экспорт

• Нажмите на кнопку «Export» рядом с настройками (или используйте сочетание Ctrl+Shift+E).
• Выберите нужный формат и масштаб из списка.
• Укажите папку для сохранения.
• Проверьте файл после загрузки — откройте его в графическом редакторе или браузере.

Типичные ошибки и как их избежать

Несмотря на простоту интерфейса, пользователи часто допускают ошибки при экспорте изображений без фона. Самая распространённая — это забытый фоновый слой. Даже если он скрыт или полупрозрачный, он может экспортироваться вместе с объектом. Всегда сверяйтесь с панелью слоёв.
Вторая ошибка — использование JPEG вместо PNG. Некоторые пользователи выбирают JPEG, потому что он даёт меньший размер файла, но не учитывают, что JPEG не поддерживает альфа-канал (прозрачность). Результат — белый прямоугольник вокруг объекта.
Третья проблема — экспорт из фрейма с заливкой. Даже если сам объект прозрачен, фрейм может иметь цвет фона. Проверьте свойства фрейма: в правой панели найдите раздел «Fill» (Заливка) и убедитесь, что она отключена (иконка заливки серая, а не синяя).

Как проверить результат

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

Продвинутые методы: группы, фреймы и автоматизация

Для профессиональной работы полезно использовать системный подход. Например, создание компонентов с настроенными экспортами. Если вы часто используете одни и те же иконки или логотипы, сделайте из них компоненты в Figma и настройте экспорт один раз. Все экземпляры будут наследовать эти настройки.
Массовый экспорт возможен через плагины. Например, плагин Batch Export позволяет выбрать несколько фреймов и экспортировать их одновременно в нужных форматах. Это экономит время при работе с библиотеками иконок или карточек продуктов.
Ещё один метод — использование Auto Layout и компонентов с вариантами. Вы можете создать компонент с разными состояниями (цвет, размер), настроить экспорт для каждого варианта и экспортировать всё сразу. Это особенно полезно для разработчиков, которым нужны все версии элемента.

Альтернативы экспорту из Figma

Если по каким-то причинам вы не можете экспортировать изображение без фона из Figma, существуют обходные пути. Например, вы можете экспортировать в SVG и открыть файл в редакторе вроде Illustrator или Inkscape, где можно дополнительно очистить код и проверить прозрачность.
Также можно использовать онлайн-сервисы для удаления фона, такие как Remove.bg. Однако это менее надёжно, особенно для векторных или сложных изображений. Лучше решать проблему на уровне дизайна, чем исправлять её потом.

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

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

Заключение

Экспорт изображений без фона в Figma — это простая, но требующая внимания к деталям операция. Ключевые моменты: правильная подготовка слоёв, выбор формата PNG или SVG и обязательное включение опции прозрачности. Ошибки чаще всего возникают из-за невнимательности — например, оставленного фона или использования JPEG.

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