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

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

Зачем нужна прозрачность в дизайне: практические кейсы

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

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

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

Основные способы сделать фон прозрачным в Figma

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

1. Отключение заливки у фрейма или артборда

Это самый простой и надёжный способ. Каждый фрейм и артборд в Figma имеет параметры заливки, которые по умолчанию могут быть белыми.

• Выделите нужный фрейм или артборд в рабочей области.
• В правой панели найдите раздел Fill (Заливка).
• Нажмите на квадрат с цветом и выберите значок «x» или перетащите ползунок непрозрачности (Opacity) до 0%.
• Фон станет прозрачным — это будет видно по характерной серо-серой шахматной текстуре.

Если вы работаете с артбордом, важно помнить: он может иметь собственный цвет фона. Убедитесь, что вы редактируете именно его свойства, а не внутреннего фрейма.

2. Использование компонентов с прозрачным фоном

Когда вы создаёте компоненты (например, кнопки или карточки), важно сразу задавать им правильные свойства. Это экономит время при массовом экспорте.

• Создайте фрейм с нужным содержимым.
• Убедитесь, что у него отключена заливка.
• Превратите в компонент (Ctrl+Alt+K / Cmd+Option+K).
• При использовании экземпляра этот фон останется прозрачным.

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

3. Настройка холста (Canvas)

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

Чтобы убедиться, что холст не блокирует прозрачность:

• Перейдите в режим просмотра слоёв (Layers Panel).
• Найдите объекты, расположенные под всеми фреймами.
• Удалите или скройте их, если они не нужны.

Как экспортировать изображение с прозрачным фоном: пошагово

Даже если фон сделан прозрачным, ошибка может произойти на этапе экспорта. Вот детальный алгоритм, который гарантирует корректный результат.

1. Подготовьте объект: убедитесь, что у фрейма или артборда отключена заливка. Проверьте, что под ним нет скрытых белых фигур.
2. Выберите объект: кликните по нему на холсте или в панели слоёв.
3. Откройте панель экспорта: в правой колонке найдите раздел Export и нажмите «+».
4. Выберите формат: установите PNG. Для векторов можно использовать SVG.
5. Активируйте прозрачность: в настройках экспорта должна быть включена опция Transparency (по умолчанию она активна для PNG и SVG).
6. Экспортируйте: нажмите «Export» и сохраните файл.

Экспорт группы или отдельного слоя

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

• Выделите нужный слой (например, векторную иконку).
• Добавьте экспорт в правой панели.
• Выберите PNG с прозрачностью.
• При экспорте Figma автоматически обрежет холст по границам объекта.

Проверка результата

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

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

Даже опытные дизайнеры иногда сталкиваются с «фантомной» непрозрачностью. Разберём самые частые причины и пути их решения.

Ошибка 1: Формат JPEG вместо PNG

JPEG не поддерживает альфа-канал. Даже если фон прозрачный в Figma, при экспорте в JPG он станет белым.

• Всегда используйте PNG для изображений с прозрачностью.
• SVG — отличная альтернатива для векторной графики.
• Если нужен JPEG — добавьте фон вручную перед экспортом.

Ошибка 2: Скрытый белый прямоугольник под слоями

Иногда дизайнер случайно создаёт белую фигуру и помещает её под всё содержимое. Она не видна, но блокирует прозрачность.

• Проверьте панель слоёв: есть ли объекты под фреймом?
• Скройте или удалите лишние слои.
• Используйте фильтр «Hidden layers», чтобы быстро найти скрытые элементы.

Ошибка 3: Неправильный артборд

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

• Выделите артборд.
• В правой панели найдите параметр Background.
• Установите его в «Transparent» или удалите заливку.

Ошибка 4: Экспорт через скриншот

Некоторые пользователи делают скриншот холста (через Print Screen), ожидая прозрачности. Но скриншот всегда сохраняет текущий фон — обычно белый или серый.

• Никогда не используйте скриншоты для получения прозрачных изображений.
• Только официальный экспорт через панель Figma.
• Для быстрого теста — используйте функцию «Copy as PNG» (правой кнопкой → Copy as PNG).

Советы от профессиональных дизайнеров

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

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

Заключение

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

• Отключайте заливку (Fill) у фреймов и артбордов для прозрачности.
• Экспортируйте только в PNG или SVG — JPEG не поддерживает прозрачность.
• Проверяйте наличие скрытых белых фигур под слоями.
• Используйте «Copy as PNG» для быстрого копирования с прозрачностью.
• Тестируйте результат в стороннем редакторе или браузере.