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

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

Чтобы изображение стало прозрачным в Figma, оно должно быть в формате PNG с альфа-каналом или SVG. Если фон нужно удалить — используйте маски, клиппинг или внешние инструменты для выделения. Прямого «удаления фона» в Figma нет.

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

Какие форматы поддерживают прозрачность
Как правильно загрузить изображение с прозрачностью
Как убрать фон с изображения в Figma
Метод 1: Использование маски (Masking)
Метод 2: Клиппинг (Clipping with Vector Networks)
Метод 3: Внешняя обработка
Работа с прозрачностью в векторных объектах
Групповая прозрачность
Слои и порядок отрисовки
Экспорт изображений с прозрачным фоном
Типичные ошибки и как их избежать
Чек-лист перед публикацией
Экспертное мнение
Вопросы и ответы
Заключение

Какие форматы поддерживают прозрачность

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

Основные форматы, которые работают с прозрачностью:

PNG — самый популярный выбор. Поддерживает полупрозрачные пиксели (альфа-канал), идеален для логотипов, иконок, интерфейсов.
SVG — векторный формат, где прозрачность задаётся через атрибуты fill-opacity или stroke-opacity. Отлично подходит для масштабируемых элементов без потери качества.
GIF — поддерживает бинарную прозрачность (пиксель либо прозрачен, либо нет), но не подходит для сложных изображений из-за ограничения в 256 цветов.

Форматы, которые не поддерживают прозрачность:

JPG/JPEG — всегда имеет белый или чёрный фон, в зависимости от контекста.
BMP — редко используется, неэффективен, прозрачность не поддерживается.

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

Формат	Поддержка прозрачности	Качество	Где использовать
PNG	Да (полная)	Высокое	Иконки, логотипы, UI-элементы
SVG	Да (векторная)	Бесконечное	Логотипы, иллюстрации, масштабируемые объекты
GIF	Частично (бинарная)	Низкое	Анимации, простые изображения
JPG	Нет	Высокое (без прозрачности)	Фотографии, баннеры

Как правильно загрузить изображение с прозрачностью

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

Первое — убедитесь, что исходный файл действительно содержит альфа-канал. Это можно проверить в любом графическом редакторе (Photoshop, GIMP, Affinity Photo). Если вы видите шахматный фон — значит, прозрачность есть.

Процесс загрузки в Figma:

Откройте ваш Figma-документ.
Перетащите файл PNG или SVG прямо в область канваса.
Убедитесь, что изображение отображается на серой шахматной текстуре — это визуальный индикатор прозрачного фона.
Если фон белый — возможно, сам файл был сохранён без прозрачности.

«Всегда проверяйте исходник перед загрузкой. Иногда дизайнеры экспортируют PNG «с фоном», чтобы было удобнее смотреть в проводнике, но потом забывают пересохранить с прозрачностью.» — Алексей Миронов, UX/UI-дизайнер, 8 лет опыта

Если вы работаете с командой, установите единые правила именования и экспорта: например, `icon-home-transparent.png` вместо просто `home.png`.

Как убрать фон с изображения в Figma

Figma — это не Photoshop. У него нет встроенного инструмента «удалить фон», как в Remove.bg или Canva. Однако есть несколько рабочих методов, позволяющих добиться прозрачности.

Метод 1: Использование маски (Masking)

Маскирование — самый распространённый способ скрыть ненужные части изображения.

Шаги:

Загрузите изображение в Figma.
Нарисуйте фигуру (прямоугольник, круг, кривую) поверх области, которую хотите оставить видимой.
Выделите сначала фигуру, потом изображение (через Shift+клик).
Нажмите правой кнопкой → Create Mask или Ctrl+Alt+M (Cmd+Option+M на Mac).

Теперь всё, что находится за пределами фигуры-маски, становится невидимым. Это не настоящая прозрачность, но визуально эффект тот же.

Метод 2: Клиппинг (Clipping with Vector Networks)

Подходит для сложных форм. Вы можете использовать векторные пути как клиппинг-маску.

Создайте векторный контур вокруг нужного объекта с помощью Pen Tool.
Сгруппируйте его с изображением (Select + Ctrl+G).
Щёлкните правой кнопкой → Mask with [Shape].

Метод 3: Внешняя обработка

Если нужно полноценное удаление фона:

Используйте сервисы: Remove.bg, Adobe Express, Fotor.
Обработайте изображение, скачайте как PNG с прозрачностью.
Загрузите в Figma — фон будет уже прозрачным.

Полезно знать: Figma не изменяет пиксели изображения — он только маскирует или обрезает отображение. Настоящее удаление фона происходит вне платформы.

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

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

Чтобы сделать векторный объект прозрачным:

Выделите фигуру.
В правой панели найдите раздел Fill.
Рядом с цветом есть ползунок Opacity (непрозрачность). Установите значение ниже 100%.
Для полной прозрачности — 0%.

Также можно использовать RGBA-цвета: например, чёрный с 50% прозрачности — это #00000080.

Групповая прозрачность

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

Создайте группу (Ctrl+G).
В панели свойств измените Opacity для группы — это повлияет на все элементы внутри.

Это удобно для затемнения блоков, модальных окон или overlay-слоёв.

Слои и порядок отрисовки

Не забывайте, что прозрачность работает в связке со слоями. Объект с 0% opacity будет невидим, но займёт место в стеке. Если нужно полностью убрать элемент — лучше использовать Visibility (глаз в слоях) или удалить.

«Прозрачность — не про эстетику, а про коммуникацию. Полупрозрачные элементы мягко сигнализируют пользователю: «это второстепенно». Используйте её осознанно.» — Анна Петрова, продукт-дизайнер, Head of Design в EdTech-стартапе

Экспорт изображений с прозрачным фоном

Правильный экспорт — финальный этап. Даже если вы сделали всё верно, неправильные настройки экспорта могут испортить результат.

Шаги:

Выделите нужный объект или группу.
В правой панели найдите секцию Export.
Нажмите «+ Add Export».
Выберите формат: PNG или SVG.
Убедитесь, что опция Transparent background активна (для PNG она включена по умолчанию, если фон прозрачный).

Для SVG:

При экспорте SVG в Figma сохраняются все атрибуты, включая opacity.
Если вы используете SVG в коде, убедитесь, что в CSS не задан фон.

Полезно знать: При экспорте в JPG прозрачность автоматически заменяется белым фоном. Это поведение нельзя изменить — выбирайте PNG, если нужна прозрачность.

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

Даже опытные дизайнеры допускают ошибки при работе с прозрачностью. Вот самые частые:

Ошибка 1: Загрузка JPG вместо PNG. Результат — белый фон, который невозможно убрать. Решение — всегда используйте PNG для элементов с прозрачностью.
Ошибка 2: Слишком много масок. Избыток масок усложняет редактирование. Лучше заранее подготовить изображение в другом редакторе.
Ошибка 3: Путаница между Opacity и Visibility. Opacity=0 оставляет объект в DOM, он может мешать кликам. Для полного скрытия используйте видимость.
Ошибка 4: Экспорт в неподходящем формате. Например, SVG с растровыми слоями может потерять качество. Проверяйте каждый экспорт.

Чек-лист перед публикацией

Формат исходника — PNG или SVG?
Фон действительно прозрачный (шахматный узор)?
Использованы ли лишние маски?
Настройки экспорта: правильный формат и включена ли прозрачность?
Проверено на светлом и тёмном фоне — хорошо ли смотрится?

«Прежде чем отправлять макет разработчику, положите ваш прозрачный элемент на красный фон. Если границы «плывут» или появляется ореол — значит, в изображении остались артефакты.» — Дмитрий Ковалёв, tech lead, frontend-разработчик

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

«В Figma нет magic wand, и это хорошо. Когда дизайнер вынужден вручную создавать маски или использовать внешние инструменты, он лучше понимает структуру элемента. Это делает процесс более осознанным. Но для массовой обработки фона я рекомендую автоматизацию: API Remove.bg + скрипт загрузки в Figma через плагин.» — Екатерина Смирнова, UX-архитектор, 12 лет в digital

Она также отмечает, что в 2025 году появилось больше плагинов для Figma, которые интегрируются с AI-сервисами по удалению фона. Например, Background Remover и Pixeltrue позволяют удалять фон прямо в интерфейсе Figma, хотя технически они отправляют изображение на внешний сервер.

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

Можно ли сделать прозрачным фон фотографии прямо в Figma?

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

Почему после экспорта PNG фон стал белым?

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

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

Нет. Figma не работает с анимированными форматами, кроме Lottie (через плагины). GIF загружаются как статичные кадры.

Что делать, если маска «съедает» часть изображения?

Проверьте размер и положение маски. Возможно, она меньше оригинала. Также убедитесь, что вы не применяли Transform (например, scale), который мог исказить пропорции.

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

Разработчики должны использовать background: transparent; или не задавать фон вообще. SVG с opacity должен корректно отображаться, если не переопределён CSS.

Заключение

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

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

Только PNG и SVG поддерживают прозрачность в Figma.
Figma не удаляет фон — используйте маски или внешние сервисы.
При экспорте всегда выбирайте PNG для прозрачного фона.
Проверяйте результат на разных фонах перед передачей в разработку.
Автоматизация через плагины экономит время при массовой обработке.

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

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

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

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

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

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

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

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

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

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

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

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

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