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

Выгрузить картинку из Figma можно несколькими способами: через панель экспорта в правой боковой панели, используя контекстное меню слоя или артборда, либо с помощью командной строки и плагинов. Основной и самый надёжный метод — выделить нужный элемент, открыть панель Export и выбрать формат (PNG, JPG, SVG, PDF), качество и размеры. Для автоматизации и массовой выгрузки подойдут плагины вроде Image Exporter или команды через Figma CLI.

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

Figma — это мощный векторный редактор, ориентированный на совместную работу, но его возможности не ограничиваются дизайном интерфейсов. Одна из ключевых задач пользователей — корректная и быстрая выгрузка графических элементов. Процесс экспорта начинается с выделения нужного слоя, группы или артборда. В правой панели интерфейса находится раздел «Design», где располагается блок «Export».
Если вы не видите этот блок, убедитесь, что выбран инструмент «Move» (стрелка) и действительно выделён нужный объект. Кликните по значку «+» рядом с надписью Export, чтобы добавить новую настройку экспорта. После этого появится возможность выбрать формат файла: PNG, JPG, SVG, PDF или даже JSON (для данных). Также можно задать множитель масштабирования: 1x, 2x, 3x и так далее.
Для большинства случаев достаточно одной настройки экспорта. Например, если вы работаете с логотипом, который будет использоваться на сайте, установите формат PNG и множитель 2x. Это обеспечит чёткость изображения на экранах с высоким разрешением. Нажав кнопку «Export», вы скачаете файл напрямую в папку «Загрузки» вашего устройства.

Пошаговый алгоритм простого экспорта

1. Откройте Figma-файл и найдите нужный слой, фрейм или артборд.
2. Кликните по нему, чтобы выделить (или используйте Shift для множественного выбора).
3. Перейдите в правую панель, прокрутите до блока «Export».
4. Нажмите «+», чтобы добавить настройку экспорта.
5. Выберите формат (например, PNG) и множитель (1x, 2x и т. д.).
6. При необходимости измените имя файла в поле «File name».
7. Нажмите кнопку «Export» и сохраните файл на устройство.

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

Форматы и настройки экспорта: что выбрать и почему

Выбор формата при экспорте напрямую влияет на качество, размер файла и сферу использования. Figma поддерживает пять основных форматов: PNG, JPG, SVG, PDF и WEBP. У каждого есть свои особенности, преимущества и ограничения.
PNG — лучший выбор для изображений с прозрачным фоном. Подходит для иконок, логотипов, элементов интерфейса. Файл остаётся качественным при многократном редактировании, так как используется без потерь. Однако размер может быть больше, чем у JPG. Для веба рекомендуется использовать PNG-8 при простой цветовой гамме.
JPG идеален для фотографий и сложных изображений с плавными переходами. Он сильно сжимает данные, но теряет информацию при каждом сохранении. Прозрачность не поддерживается. Используйте JPG, если важен малый размер файла, а фон всегда будет однотонным.
SVG — векторный формат, который не теряет качества при масштабировании. Подходит для адаптивных сайтов, мобильных приложений и систем иконок. Figma позволяет экспортировать как отдельные фигуры, так и целые группы в SVG. При этом важно проверять код после экспорта: иногда он содержит лишние стили или комментарии.
PDF используется реже, но незаменим при подготовке презентаций, прототипов для клиента или печатных макетов. Можно экспортировать один артборд или сразу весь документ. PDF сохраняет векторные объекты и шрифты, но требует дополнительной обработки в программах вроде Adobe Acrobat.
WEBP — современный формат от Google, сочетающий малый размер и высокое качество. Поддерживается большинством браузеров, но не всеми старыми устройствами. Отлично подходит для веб-сайтов, где критична скорость загрузки.

Настройки множителя масштабирования

Figma предлагает три стандартных значения: 1x, 2x и 3x. Это связано с плотностью пикселей на экранах устройств. Например, iPhone с Retina-дисплеем использует 2x или 3x, поэтому элементы должны быть вдвое или втрое больше по пикселям.
Если вы экспортируете иконку размером 24×24 пикселя, то при 2x она станет 48×48. Это гарантирует чёткость на современных экранах. Для веба часто хватает 1x и 2x. В iOS-приложениях требуется 1x, 2x, 3x; в Android — mdpi, hdpi, xhdpi и другие, что можно эмулировать через соответствующие множители.

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

Ручной экспорт десятков иконок или карточек — трудоёмкая задача. К счастью, Figma позволяет автоматизировать процесс. Один из способов — использовать функцию «Smart Annotate» или организовать элементы в виде сетки с единым префиксом имени.
Лучший подход — применить структурированную навигацию по слоям. Называйте артборды и группы понятно: например, «icon/email», «card/product-small». Затем выделите все нужные фреймы, добавьте настройку экспорта и нажмите «Export all». Figma создаст ZIP-архив со всеми файлами, сохраняя иерархию имён.
Если вы работаете с компонентами, особенно с вариантами (variants), можно экспортировать каждый вариант отдельно. Для этого откройте режим Instance, выделите нужный вариант и примените экспорт. Альтернатива — использовать плагины, которые автоматически пробегаются по всем слоям с определённым тегом.

Экспорт через командную строку (Figma CLI)

Для продвинутых пользователей доступен Figma Command Line Interface — инструмент, позволяющий управлять проектами через терминал. С его помощью можно запрашивать данные по API, включая экспорт изображений.
Шаги:

• Установите Node.js и npm.
• Установите пакет figma-export через npm install -g figma-export.
• Получите Personal Access Token в настройках аккаунта Figma.
• Выполните команду с указанием ID файла и параметров экспорта.

Пример команды:

figma-export images :fileId --output ./output --format png --scale 2

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

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

Figma имеет открытый API, что породило богатую экосистему плагинов. Многие из них упрощают экспорт. Например:

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

Установка плагина: откройте панель плагинов (квадрат внизу панели инструментов), найдите нужный по названию, нажмите «Install». После этого плагин появится в списке и будет доступен через контекстное меню.

Интеграция с внешними сервисами

Некоторые команды используют Notion, Jira или Confluence для документации. Плагины вроде Figma to Notion позволяют вставлять не только ссылки, но и экспортированные изображения напрямую. Это ускоряет создание гайдов и спецификаций.
Другой вариант — использование Zapier или Make (Integromat) для автоматической выгрузки новых артбордов в Google Drive или Dropbox. Настройка триггера по событию «новый файл» или «обновление тега» делает процесс непрерывным.

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

Даже опытные пользователи сталкиваются с проблемами при экспорте. Вот самые распространённые:

• Прозрачность заменяется на белый фон. Причина: выбран JPG вместо PNG. Решение — всегда использовать PNG или SVG при необходимости прозрачности.
• Элементы обрезаны или смещены. Происходит, если экспортируется группа с отрицательными координатами. Решение — выделите объекты и используйте «Fit to selection» в панели свойств.
• SVG содержит лишние стили. Figma по умолчанию экспортирует fill и stroke как атрибуты, а не CSS. Решение — используйте плагин SVG Extractor или вручную очищайте код.
• Низкое качество при 1x. Иногда объекты выглядят размыто. Причина — нечётные размеры или смещение на полпикселя. Решение — привязывайте элементы к сетке и используйте целые значения.

Экспертная практика: профессиональные советы по работе с экспортами

Профессионалы подходят к экспорту системно. Они создают внутренние стандарты: какие форматы использовать, как называть файлы, где хранить ресурсы. Например, иконки экспортируются в трёх форматах: SVG (основной), PNG 2x (резерв), WEBP (оптимизация).
Автоматизация — ключевой принцип. Эксперты настраивают шаблоны с предустановленными экспортами. Артборд с названием «Export / Icons / 24px» уже содержит три настройки: SVG, PNG 2x, PNG 1x. Это исключает ошибки и ускоряет процесс.
Другая практика — использование компонентов с метаданными. Через плагины можно извлекать не только изображения, но и информацию о состоянии, назначении, авторе. Это помогает при передаче макетов в разработку.
Для команд важна согласованность. Все дизайнеры используют один набор плагинов и следуют гайдлайну по экспорту. Это снижает нагрузку на разработчиков и уменьшает количество запросов «а где иконка?».

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

Заключение

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

• Для прозрачности выбирайте PNG или SVG, для фото — JPG или WEBP.
• Всегда экспортируйте минимум в двух разрешениях: 1x и 2x.
• Используйте плагины для массовой выгрузки и оптимизации SVG.
• Организуйте слои и имена объектов перед экспортом.
• Тестируйте изображения в реальной среде: на сайте, в приложении, на устройстве.