Как из фигмы сохранить в jpg

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

Основы экспорта в Figma: что нужно знать

Figma — облачный векторный редактор, в котором все элементы создаются динамически и масштабируются без потерь. Однако при экспорте в растровые форматы, такие как JPG, изображение «запекается» в пиксели. Это означает, что выбор правильных настроек экспорта напрямую влияет на итоговое качество.
JPG — это формат с потерями, оптимизированный под фотографии и изображения с плавными переходами цветов. Он не поддерживает прозрачность, поэтому если в вашем дизайне есть полупрозрачные слои или фон должен быть прозрачным, лучше использовать PNG. Но для презентаций, отчётов, публикаций в соцсетях и быстрого просмотра JPG остаётся идеальным выбором.
Каждый объект в Figma можно экспортировать отдельно. Это могут быть целые страницы, фреймы, группы или даже отдельные фигуры. Система экспорта гибкая: вы можете задавать масштаб, качество, формат и сразу экспортировать несколько версий одного объекта (например, 1x и 2x).

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

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

1. Выберите объект для экспорта. Кликните по нужному фрейму, группе или фигуре. Убедитесь, что он выделен синей рамкой.
2. Перейдите в панель свойств справа. Прокрутите вниз до блока «Export» («Экспорт»). Если его нет, убедитесь, что выбран именно объект, а не страница целиком.
3. Нажмите «+ Add Export». Появится новая строка с настройками экспорта.
4. Установите формат: выберите «JPG». По умолчанию может стоять PNG — измените это значение.
5. Настройте масштаб. Обычно используют 1x (оригинальный размер), 2x (для Retina-экранов) или кастомное значение (например, 0.5x для уменьшения).
6. Укажите качество JPG. Figma позволяет выбрать качество от 0 до 100%. Рекомендуется ставить 90–100% для презентаций и публикаций.
7. Нажмите «Export» рядом с настройками. Файл начнёт скачиваться автоматически.

Если нужно экспортировать несколько объектов, повторите процесс для каждого. Альтернативно — используйте сочетание клавиш Ctrl/Cmd + Alt + E, чтобы вызвать окно экспорта напрямую.

Альтернативный способ: экспорт через правую кнопку мыши

Иногда быстрее использовать контекстное меню:

• Выделите нужный фрейм.
• Щёлкните правой кнопкой мыши.
• Выберите пункт «Export…».
• В появившемся окне установите Format → JPG, задайте Scale и Quality.
• Нажмите «Export» и сохраните файл на компьютер.

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

Расширенные настройки экспорта JPG

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

Масштабирование: 1x, 2x, 3x — что выбрать?

• 1x — стандартный размер, подходит для экранов с обычной плотностью пикселей (например, большинство мониторов).
• 2x — удвоенное разрешение, необходимо для Retina-дисплеев и современных смартфонов. Размер файла увеличивается в 4 раза.
• 3x — используется редко, только если требуется максимальная детализация для крупного рендера.

Качество JPG: баланс между размером и чёткостью

Figma не всегда явно показывает уровень сжатия, но при экспорте через API или плагины можно управлять им точнее. В стандартном интерфейсе качество JPG регулируется косвенно — чем выше масштаб, тем «тяжелее» файл, но и меньше артефактов сжатия.

Экспорт нескольких версий за раз

Вы можете добавить несколько строк экспорта для одного объекта:

• Добавьте два пункта в секции Export: один — JPG 1x, второй — JPG 2x.
• При клике на «Export» Figma предложит скачать оба файла одновременно в виде ZIP-архива.

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

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

Даже опытные дизайнеры сталкиваются с проблемами при экспорте. Вот самые частые ошибки и способы их решения.

1. Размытые изображения после экспорта

Причина: неправильно задан масштаб. Если фрейм имеет размер 400×800 пикселей, а вы экспортируете его в 0.5x, итоговое изображение будет 200×400 — и при увеличении станет размытым.
Решение: всегда экспортируйте в 1x или выше, если изображение будет использоваться в крупном формате.

2. Цвета отличаются от оригинала

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

3. Обрезаны края макета

Происходит, если экспортируется не весь фрейм, а группа внутри него, или если включён режим «Crop to content», которого в Figma нет по умолчанию, но могут добавлять сторонние плагины.
Решение: убедитесь, что выделен именно родительский фрейм. Используйте функцию «Fit to frame» (Alt + двойной клик по фрейму), чтобы проверить границы.

4. Шрифты отображаются некорректно

Если шрифт не загружен у вас или у клиента, Figma может заменить его. После экспорта в JPG это уже нельзя исправить.
Решение: конвертируйте текст в кривые (Outline Stroke) или убедитесь, что используется веб-шрифт из Google Fonts, доступный всем.

Экспорт JPG в командной работе и при сдаче макетов

В командах важно стандартизировать процесс экспорта. Это снижает количество ошибок и ускоряет согласование.

• Установите единые правила: всегда 2x, качество 90%, имя файла по шаблону (например, screen-login-v2.jpg).
• Используйте разделение по страницам: одна страница — один экран, вторая — все состояния, третья — иконки.
• Предоставляйте JPG как дополнение к ссылке на Figma. Сам по себе растровый файл не содержит информации о слоях, отступах и взаимодействиях.

Когда JPG незаменим?

• Для вставки в PowerPoint или Keynote.
• Для публикации в соцсетях (Instagram, LinkedIn).
• Для отправки клиенту, который не умеет работать с Figma.
• Для архивации версий дизайна.

Автоматизация экспорта

Figma поддерживает API, что позволяет настраивать автоматический экспорт через скрипты. Например, можно создать бота, который каждую пятницу экспортирует все фреймы с тегом «ready» и заливает их в Google Drive.
Также существуют плагины:

• Batch Export — массовый экспорт множества фреймов.
• JPG/PNG Exporter — расширенные настройки качества.
• Design Lint — проверяет готовность макета к экспорту (шрифты, имена, слои).

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

Современные рабочие процессы всё реже требуют ручного экспорта JPG. Тем не менее, этот формат остаётся важным для коммуникации вне дизайнерской среды.

Однако в ряде случаев JPG — единственный приемлемый формат. Например, при работе с маркетинговыми командами, где дизайнеры не имеют доступа к Figma, или при интеграции в CMS, не поддерживающие вектор.
Рекомендации:

• Используйте JPG только для финальных, утверждённых версий.
• Храните исходники в Figma, а JPG — как производные файлы.
• Подписывайте файлы: включайте номер версии, дату и название экрана.
• Для презентаций собирайте JPG в PDF — это удобнее для просмотра.

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

Заключение

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

• Всегда экспортируйте в 1x или 2x, в зависимости от назначения.
• Устанавливайте качество JPG не ниже 85% для презентаций.
• Не используйте JPG для элементов с прозрачностью — выбирайте PNG.
• Автоматизируйте экспорт при работе с большим количеством макетов.
• Сохраняйте исходники в Figma — JPG должен быть производным, а не основным артефактом.