Как из фигмы скачать изображение

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

Как экспортировать изображение в Figma: базовый алгоритм

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

После выделения откройте панель свойств справа. Внизу появится блок «Export». Если его нет — убедитесь, что вы выделили именно векторный объект или группу, а не текст или фон. Кликните по кнопке «+» рядом с «Export» и выберите нужный формат: PNG, JPG, SVG или PDF. Для веба чаще всего используют PNG или JPG, для логотипов — SVG.

Затем укажите масштаб. По умолчанию Figma предлагает 1x, но для Retina-экранов и высокодетализированных интерфейсов критически важно экспортировать в 2x или даже 3x. После выбора параметров нажмите «Export» — файл скачается автоматически. Если нужно экспортировать несколько вариантов, добавьте несколько настроек: например, PNG 1x и PNG 2x — Figma сохранит оба файла в архиве.

Какие форматы выбрать: PNG, JPG, SVG, PDF — сравнение

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

Для веб-дизайна рекомендуется использовать PNG 2x для всех интерфейсных элементов и SVG для логотипов и иконок. JPG — только если вы экспортируете фото с фона или сложный градиент, где PNG увеличит вес в 3–5 раз. SVG — золотой стандарт для масштабируемых элементов: он не размывается на 4K-экранах и загружается быстрее любого растра.

Масштаб и разрешение: как не потерять качество

Масштаб — один из самых недооцениваемых параметров при экспорте. Многие дизайнеры экспортят всё в 1x, потому что «вроде бы смотрится нормально». Но на устройствах с высоким пиксельным плотностью (iPhone, MacBook, Android-флагманы) изображения будут выглядеть размытыми, если не экспортированы в 2x или 3x.

Figma позволяет задавать масштаб вручную: 1x, 2x, 3x, 4x — и даже кастомные значения (например, 1.5x). При этом важно понимать: масштаб относится к исходному размеру объекта. Если вы сделали кнопку 48×48 пикселей, то 2x даст вам 96×96 пикселей — идеально для Retina-экранов.

Для веба:
— 1x — для базовых сайтов, где важна скорость
— 2x — стандарт для большинства современных интерфейсов
— 3x — только для специфичных устройств (например, iPad Pro или iPhone 15 Pro Max)

Для печати:
— Экспортируйте в PDF или PNG 300 DPI (через масштаб 3x или 4x), но убедитесь, что исходный макет создан с учётом реальных размеров (например, 3000×2000 пикселей для A4).

Представьте, что вы экспортируете логотип 100×100 пикселей в 1x для веба. На экране с плотностью 2x он будет отображаться как 200×200 физических пикселей — но Figma не добавит деталей. Результат — размытый логотип. Решение? Создайте логотип в 200×200 пикселей и экспортируйте в 1x — тогда он будет чётким и на всех экранах.

Массовый экспорт: как скачать все изображения сразу

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

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

Второй — через «Export» в режиме «Multiple». Кликните по кнопке «+» рядом с экспортом — появится возможность добавить несколько настроек для одного объекта. Например, для иконки вы можете добавить PNG 1x, PNG 2x, SVG и даже PDF. Все они сохранятся в одном архиве, что идеально для разработчиков.

Для сложных проектов с сотнями элементов используйте плагины, например:
— Batch Export — позволяет экспортировать по тегам, слоям и страницам
— Export Kit — создаёт структурированные папки по типам элементов
— Unsplash Exporter — если нужно экспортировать фоновые изображения с привязкой к внешним библиотекам

Автоматический экспорт: настройка через нейминг

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

Синтаксис прост:
— `.png` — экспортирует как PNG
— `@2x.png` — экспортирует в 2x масштабе
— `.svg` — как вектор
— `@2x.svg` — вектор в 2x

Пример:
— `button-primary.png` → экспортирует кнопку в PNG 1x
— `icon-home@2x.png` → экспортирует иконку в 2x
— `logo.svg` → экспортирует логотип в векторе

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

Для ещё большей автоматизации используйте плагин Figma to Code или Zeplin — они не только экспортируют, но и генерируют CSS, React-код или Android-спецификации.

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

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

• Экспорт с неправильного слоя — выделяете фон, а не контент. Решение: всегда выделяйте именно объект, который нужно сохранить. Используйте «Select All in Frame» (Ctrl/Cmd + A), если работаете в фрейме.
• Игнорирование масштаба — экспорт в 1x на Retina-устройствах. Решение: всегда проверяйте, что для интерфейсных элементов установлен 2x.
• Использование JPG для иконок — теряется прозрачность. Решение: для всех иконок и логотипов — только PNG или SVG.
• Неправильный нейминг — «button» вместо «button-primary.png». Решение: используйте шаблон нейминга в стиле BEM или Atomic Design.
• Экспорт скрытых слоёв — Figma экспортирует только видимые объекты, но если вы забыли скрыть тестовые элементы — они попадут в файл. Решение: перед экспортом скройте всё лишнее через «Hide» (Cmd/Ctrl + Shift + H).

Часто дизайнеры экспортируют изображения в 4x, думая, что «лучше больше». Но это увеличивает размер файла в 16 раз — и разработчики начинают жаловаться на медленную загрузку. Всегда следуйте принципу «оптимального масштаба»: 1x для базовых экранов, 2x для мобильных и десктопных интерфейсов, 3x — только если требуется печать или 4K-дисплеи.

Экспертное мнение: как дизайнеры оптимизируют экспорт

Анастасия Павлова — старший UI/UX-дизайнер в международной команде, работающей с продуктами для 10 млн пользователей — делится своим подходом:

Она также рекомендует создавать отдельные страницы для экспорта: «Не смешивайте макеты и финальные элементы. Создайте страницу “Exports” и перетаскивайте туда только те элементы, которые нужны разработчикам. Это упрощает жизнь и снижает риск ошибок».

Вопросы и ответы: самые частые проблемы

• Почему Figma не показывает кнопку “Export”?
  Это происходит, когда вы выделили неэкспортируемый объект: текст без обводки, фон, или объект внутри скрытой группы. Убедитесь, что вы выделили векторный слой, фрейм или группу. Также проверьте, не заблокирован ли слой (иконка замка справа).
• Как экспортировать с прозрачным фоном?
  Используйте PNG или SVG. JPG не поддерживает прозрачность. В Figma убедитесь, что фон слоя или фрейма не имеет цвета — он должен быть белым или прозрачным (в настройках фрейма выберите «Transparent»).
• Можно ли экспортировать анимации из Figma?
  Нет. Figma не поддерживает экспорт анимаций в видео или GIF. Для анимаций используйте Lottie (экспорт в JSON) или плагины вроде “LottieFiles” — они конвертируют анимации в формат, совместимый с вебом.
• Почему скачанный файл слишком большой?
  Вы, скорее всего, экспортировали PNG в 3x или 4x без необходимости. Проверьте масштаб: для веба достаточно 2x. Также убедитесь, что не включены ненужные слои. Используйте инструменты вроде TinyPNG или Squoosh для сжатия без потерь.
• Как экспортировать всю страницу целиком?
  Выделите фрейм (или весь холст), затем нажмите «Export». Figma экспортирует всё, что находится внутри границ фрейма. Но будьте осторожны: если фрейм слишком большой, файл может весить десятки мегабайт. Лучше разбивать на части.

Заключение

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

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

• Всегда экспортируйте иконки и логотипы в SVG или PNG 2x — это гарантирует чёткость на всех экранах.
• Используйте автоматический экспорт через нейминг: имя.png, имя@2x.svg — это ускоряет работу команды.
• Не экспортируйте всё в 4x — это бессмысленно для веба и замедляет загрузку.
• Проверяйте, что экспортируются только видимые и нужные слои — скройте тестовые элементы перед экспортом.
• Для массового экспорта используйте плагины: Batch Export, Export Kit, LottieFiles — они превращают рутину в автоматизированный процесс.