Как из фигмы вытащить картинку

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

Чтобы вытащить картинку из Figma, выберите нужный слой или фрейм, добавьте к нему экспортный настрой и экспортируйте в подходящем формате (PNG, JPG, SVG, PDF). Для точного результата учитывайте масштаб, прозрачность и целевую платформу.

Figma — это мощный инструмент веб-дизайна, работающий в браузере, позволяющий командам создавать интерфейсы, прототипы и графику. Но когда нужно передать результат — логотип, иконку, скриншот макета — возникает вопрос: как правильно извлечь изображение без потерь? Ответ зависит от типа контента, требований к качеству и дальнейшего использования. В статье мы детально разберём все способы экспорта, типичные ошибки и лучшие практики 2026 года.

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

Настройки экпорта в Figma: основы и параметры
Где найти настройки экспорта?
Пошаговая инструкция: как вытащить картинку из Figma
Экспорт части макета
Форматы экспорта: PNG, JPG, SVG, PDF — что выбрать?
Какой масштаб выбрать?
Типичные ошибки при экспорте и как их избежать
Почему изображение экспортируется с белым фоном?
Продвинутые методы: массовый экспорт, API, плагины
Массовый экспорт через naming convention
Использование API Figma
Плагины для экспорта
Экспертное мнение
Вопросы и ответы
Заключение

Настройки экпорта в Figma: основы и параметры

Figma позволяет экспортировать любые элементы: фреймы, группы, фигуры, текстовые блоки, даже отдельные слои. Основной механизм — панель свойств справа, где есть секция «Export» (экспорт). Чтобы добавить экспорт, нужно выделить нужный объект и нажать кнопку «+» в этой секции.

При добавлении экспортного настройства появляется возможность указать формат (PNG, JPG, SVG, PDF), масштаб (1x, 2x, 3x и т.д.) и, в некоторых случаях, обрезку (crop). Масштаб особенно важен: 1x подходит для веба, 2x и 3x — для Retina-экранов и мобильных устройств. Это обеспечивает чёткость изображений на высокопиксельных дисплеях.

Формат влияет на размер файла и возможности дальнейшей обработки. Например, PNG сохраняет прозрачность и идеален для иконок, а JPG — для фотографий с меньшим размером. SVG — вектор, подходит для логотипов и масштабирования без потерь. PDF используется для печати или передачи клиентам.

Полезно знать: Вы можете добавить несколько экспортных настроек к одному объекту — например, сразу экспортировать PNG 1x и SVG.

Где найти настройки экспорта?

Выделите объект (фрейм, группу, слой).
Перейдите в правую панель свойств (Properties Panel).
Найдите раздел «Export» — он расположен ниже параметров заливки и обводки.
Нажмите «+», чтобы добавить новый экспорт.

Если вы не видите этот раздел, возможно, выделен холст (page) или группа без конкретного содержимого. Убедитесь, что выбран именно тот элемент, который хотите экспортировать.

Пошаговая инструкция: как вытащить картинку из Figma

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

Выберите объект: кликните по фрейму, фигуре или группе, которую нужно экспортировать. Лучше использовать фреймы — они имеют чёткие границы.
Добавьте экспорт: в правой панели нажмите «+» в секции Export.
Укажите формат: выберите PNG (для прозрачности), JPG (для фото), SVG (для вектора) или PDF (для документов).
Задайте масштаб: 1x — базовое разрешение, 2x — удвоенное (для Retina), 3x — для мобильных экранов высокой плотности.
Настройте обрезку (опционально): активируйте crop, чтобы убрать лишние поля вокруг объекта.
Нажмите «Export»: после настройки нажмите кнопку экспорта и сохраните файл на компьютер.

«Всегда проверяйте, что объект не обрезан случайно другими слоями. Используйте Preview в режиме экспорта, чтобы увидеть финальный результат до скачивания.» — Анна Ковалёва, UX-дизайнер, 7 лет в Figma

Экспорт части макета

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

Выделите нужную фигуру или группу.
Убедитесь, что она не вложена глубоко в другие группы (это может помешать точной обрезке).
Добавьте экспорт и используйте опцию crop, чтобы избежать белых полей.

Если объект сложно выделить, временно отключите видимость других слоёв в Layers панели.

Форматы экспорта: PNG, JPG, SVG, PDF — что выбрать?

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

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

Какой масштаб выбрать?

1x — стандартное разрешение. Подходит для обычных экранов и веб-страниц.
2x — удвоенное разрешение. Обязательно для Retina-дисплеев Apple и современных смартфонов.
3x — тройное разрешение. Используется для Android-устройств с высокой плотностью пикселей.

Полезно знать: Если вы экспортируете для мобильного приложения, уточните у разработчика, нужны ли 1x, 2x и 3x версии. Часто требуется сразу несколько масштабов.

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

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

Экспорт всего холста вместо фрейма: если выделить страницу, а не фрейм, экспортируется всё пространство, включая пустые области. Всегда выделяйте конкретный фрейм.
Отсутствие прозрачности в PNG: забыли включить прозрачность в настройках дизайна? Figma не добавит её автоматически. Проверяйте, что фон установлен как «none».
Неправильный масштаб: экспортировали 1x, а на телефоне изображение размытое. Всегда уточняйте требования к разрешению.
Экспорт групп с эффектами: тени, размытия и внутренние свечения могут не корректно отображаться в SVG. Для таких случаев лучше использовать PNG.

Почему изображение экспортируется с белым фоном?

Это происходит, если:

Объект находится на фрейме с заливкой (например, белым цветом).
Формат JPG не поддерживает прозрачность.
В настройках слоя есть фон, который не был удалён.

Решение: используйте PNG, убедитесь, что фон отключён, и применяйте crop.

«Перед экспортом дублируйте фрейм и упрощайте его — убирайте лишние слои, объединяйте фигуры. Так вы снизите риск ошибок.» — Дмитрий Петров, продукт-дизайнер в IT-стартапе

Продвинутые методы: массовый экспорт, API, плагины

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

Массовый экспорт через naming convention

Figma позволяет экспортировать несколько объектов за раз, если они находятся в одном фрейме и имеют экспортные настройки. Назовите каждый слой понятно — например, «icon-home», «icon-search». При экспорте они сохранятся с такими же именами.

Использование API Figma

Для интеграций и автоматизации можно использовать Figma API. Он позволяет:

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

Пример ссылки для экспорта: https://api.figma.com/v1/images/{file_key}?ids={node_id}&format=png&scale=2

Плагины для экспорта

Популярные плагины 2026 года:

Exporter — позволяет задавать правила экспорта для всей библиотеки компонентов.
Batch Exporter — массовая выгрузка с переименованием и организацией по папкам.
SVG Optimizer — очищает SVG от лишнего кода перед экспортом.

Полезно знать: Плагины устанавливаются через меню «Plugins» → «Find more plugins». Убедитесь, что они поддерживают актуальную версию Figma.

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

«Сегодня многие дизайнеры забывают, что экпорт — это не финал процесса, а часть workflow. Я рекомендую создавать отдельный page в Figma под названием “Assets for Dev”, где собраны все иконки, логотипы и элементы в нужных форматах и масштабах. Это экономит часы работы команды.» — Елена Миронова, арт-директор дизайн-студии «PixelFlow»

Также эксперт отмечает: «Используйте компоненты и варианты (variants). Если у вас есть иконка с состояниями (активная, неактивная), сделайте их одним компонентом. Тогда экспорт будет систематизирован и менее подвержен ошибкам.»

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

Можно ли экспортировать с анимацией?

Нет, Figma не экспортирует анимации как GIF или видео. Для этого используются сторонние инструменты или прототипирование с последующей записью экрана.

Почему SVG выглядит иначе в браузере?

Некоторые эффекты Figma (например, boolean operations) преобразуются в пути при экспорте. Также могут отличаться шрифты. Всегда проверяйте SVG в редакторе кода или браузере.

Как экспортировать весь макет целиком?

Выделите главный фрейм или страницу, добавьте экспорт в PNG 1x и 2x. Убедитесь, что фрейм имеет нужные размеры (например, 1920×1080 для десктопа).

Можно ли экспортировать без рамки (без границ фрейма)?

Да, используйте опцию crop в настройках экспорта. Она обрезает изображение по границам содержимого.

Как передать изображения верстальщику?

Лучше всего — через Figma Share (ссылка с доступом) или экспортировать в ZIP-архив с папками: /png/1x, /png/2x, /svg/. Добавьте README с описанием.

Заключение

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

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

Всегда экспортируйте из фрейма, а не со страницы.
Выбирайте формат под задачу: PNG — для прозрачности, SVG — для вектора.
Указывайте 2x и 3x для мобильных устройств.
Используйте crop, чтобы убрать лишние поля.
Автоматизируйте процесс через плагины и API при необходимости.

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

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

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

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

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

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

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

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

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

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

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

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

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