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

Выгрузить картинку из Figma можно несколькими способами: через панель экспорта в правой боковой панели, используя опцию «Export» у выделенного слоя или фрейма, либо с помощью горячих клавиш. Главное — правильно выбрать формат (PNG, JPG, SVG, PDF), настроить разрешение и масштаб, а также убедиться, что объект корректно выделен. Рекомендуется использовать именованные фреймы для удобства массовой выгрузки.

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

Как выгрузить картинку из Figma: базовые шаги

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

• Откройте ваш Figma-файл и перейдите на страницу с нужным элементом.
• Щёлкните по объекту, который хотите выгрузить. Убедитесь, что он выделен — вокруг него появится синяя рамка.
• В правой боковой панели перейдите на вкладку «Design» (значок квадрата).
• Найдите раздел «Export» — он расположен под настройками заливки, обводки и тени.
• Нажмите кнопку «+», чтобы добавить параметры экспорта.

После этого откроется окно настроек, где вы сможете указать формат, масштаб и имя файла. По умолчанию Figma предлагает экспорт в 1x, что соответствует исходному размеру. Для ретина-экранов стоит добавить 2x или даже 3x. Имя файла можно изменить — это особенно полезно при работе с множеством элементов.

Шаги для экспорта одного элемента

1. Выделите нужный фрейм или слой.
2. В секции «Export» нажмите «+».
3. Выберите формат: PNG, JPG, SVG или PDF.
4. Установите масштаб: 1x, 2x, 3x.
5. При необходимости задайте имя файла.
6. Нажмите «Export» и сохраните изображение на устройство.

Форматы и настройки экспорта: PNG, JPG, SVG, PDF

Выбор формата напрямую влияет на качество, размер и применимость изображения. Figma поддерживает четыре основных формата: PNG, JPG, SVG и PDF. Каждый из них имеет свои сценарии использования.

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

Настройка масштаба и качества

Масштаб (1x, 2x, 3x) определяет разрешение экспортируемого изображения. 1x — это базовое разрешение, 2x — в два раза больше пикселей по каждой оси. Это критично для Retina-дисплеев, где плотность пикселей выше.

• Для мобильных интерфейсов рекомендуется экспортировать в 1x и 2x.
• Для десктопных приложений — 1x и 2x, иногда 3x.
• Для печати лучше использовать PDF с высоким DPI.

JPG позволяет регулировать качество — от 0 до 100%. При значении ниже 70% могут появиться сжатия, особенно на градиентах. PNG не имеет настройки качества — он всегда сохраняется без потерь.

Массовая выгрузка: как экспортировать несколько элементов сразу

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

• Сгруппируйте все объекты, которые нужно выгрузить, на одной странице.
• Убедитесь, что каждый фрейм имеет заданный export-параметр (например, PNG 1x).
• Выделите все фреймы с помощью Shift + клик или рамкой.
• В разделе «Export» нажмите кнопку «Export selected».
• Figma соберёт все файлы в ZIP-архив и предложит его скачать.

Подготовка к массовой выгрузке

Чтобы процесс прошёл гладко, следуйте этим правилам:

• Называйте фреймы понятно: «icon-home», «button-primary», «banner-mobile».
• Не оставляйте пустые или скрытые слои в фреймах — они могут попасть в экспорт.
• Используйте одинаковые настройки экспорта для однотипных элементов.
• Перед выгрузкой проверьте, что все фреймы имеют установленный export.

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

Даже опытные пользователи Figma сталкиваются с типичными проблемами при экспорте. Знание этих «подводных камней» поможет сэкономить время и избежать разочарований.

Ошибка 1: Изображение размытое или пиксельное

Это происходит, когда масштаб экспорта не соответствует исходному размеру. Например, если вы экспортируете 100×100 px элемент в 1x, но он предназначен для Retina-экрана, он будет выглядеть размыто. Решение — всегда экспортировать в 2x для таких случаев.

Ошибка 2: Прозрачность не сохраняется

Если вы экспортировали PNG, но фон стал белым — вероятно, вы случайно включили фон при экспорте или использовали JPG. JPG не поддерживает прозрачность. Убедитесь, что выбран PNG и в настройках нет опции «Include background».

Ошибка 3: Элемент обрезан или не полностью виден

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

Ошибка 4: Невозможно найти кнопку Export

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

• Проверьте уровень выделения: должен быть активен фрейм, а не страница.
• Убедитесь, что вы находитесь во вкладке «Design», а не «Prototype».
• Обновите браузер — некоторые функции могут не работать в устаревших версиях.

Продвинутые методы: плагины и API для автоматизации

Для крупных проектов ручной экспорт становится утомительным. Figma предлагает решения для автоматизации: плагины и API.

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

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

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

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

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

• Получите personal access token в настройках аккаунта Figma.
• Найдите ID файла и ID целевого слоя (node ID).
• Отправьте GET-запрос на endpoint /images/{file_key} с параметрами format, scale и ids.
• API вернёт URL для скачивания изображения.

Автоматизация особенно актуальна для CI/CD-процессов, когда изображения должны обновляться в репозитории при каждом изменении в Figma.

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

«Многие дизайнеры считают экспорт простой операцией, но на практике от него зависит качество финального продукта. Я видел, как из-за неправильно выгруженного SVG ломался интерфейс на iOS. Ключ — системный подход: именование, структура, проверка.»

— Мария Ковалёва, главный дизайнер в IT-стартапе, 10 лет опыта в Figma

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

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

Заключение

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

• Экспорт работает только на уровне фреймов и групп, а не страниц.
• PNG и SVG — лучшие форматы для веба, JPG — для фотографий.
• Используйте 2x для Retina-экранов, особенно на мобильных устройствах.
• Массовую выгрузку делайте через выделение нескольких фреймов с настроенными export-параметрами.
• Автоматизируйте процесс с помощью плагинов или Figma API в крупных проектах.