Как в figma сохранить в jpg

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

Основы экспорта в JPG: как это работает

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

Где находится панель экспорта

После выделения любого фрейма, группы или слоя в правой панели интерфейса Figma появляется раздел «Design». Прокрутите вниз до блока «Export». Там вы увидите кнопку «+ Add export» — это начало настройки экспорта. По умолчанию объект не имеет профилей экспорта, поэтому их нужно добавлять вручную.
Если панель справа не отображается, убедитесь, что вы действительно выделили объект. Курсор должен быть активен на холсте, а не в текстовом поле или панели слоёв. Также проверьте, не свёрнута ли правая панель — её можно раскрыть горячей клавишей D или кликом по значку карандаша в верхней панели.

Пошагово: как сохранить изображение в JPG

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

1. Откройте ваш проект в Figma. Убедитесь, что вы находитесь на нужной странице (page) и в нужном фрейме. Если макет большой, воспользуйтесь поиском по имени (Ctrl+F) или навигацией в левой панели.
2. Выделите объект для экспорта. Кликните по фрейму, группе или слою. Лучше всего экспортировать именно фреймы — они имеют чёткие границы и предсказуемое поведение при рендеринге.
3. Перейдите в правую панель и найдите секцию «Export». Если там нет кнопки «Add export», нажмите «+ Add export», чтобы создать новый профиль.
4. Выберите формат JPG. В выпадающем списке рядом с полем «Format» установите значение «JPG». Обратите внимание: если вы ранее добавляли PNG или SVG, убедитесь, что редактируете нужный профиль.
5. Настройте масштаб (Scale). По умолчанию стоит 1x. Для высококачественных изображений (например, для печати или Retina-экранов) выберите 2x или 3x. Увеличение масштаба повышает разрешение, но и размер файла тоже растёт.
6. Нажмите «Export». Кнопка появится под настройками. После клика браузер начнёт загрузку файла. Название файла будет соответствовать имени фрейма, если не задано иное.

Как экспортировать несколько фреймов сразу

Figma позволяет экспортировать несколько объектов за один раз. Для этого:

• Удерживайте Shift и выделяйте нужные фреймы на холсте;
• Перейдите в панель «Export»;
• Добавьте профиль экспорта (JPG, 1x);
• Нажмите «Export all» — все выбранные фреймы будут сохранены как отдельные JPG-файлы.

Это особенно удобно при подготовке слайдов презентации или набора баннеров.

Изменение имени файла при экспорте

По умолчанию Figma использует имя фрейма как название файла. Чтобы изменить его:

• После добавления профиля экспорта нажмите на поле «File name»;
• Введите желаемое имя (без расширения — оно добавится автоматически);
• При экспорте нескольких объектов можно задать шаблон: например, «banner-{name}-{scale}».

Это помогает избежать путаницы при работе с десятками артефактов.

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

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

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

Когда выбирать JPG

• Вы готовите скриншот дизайна для отправки клиенту по email;
• Нужно загрузить обложку поста в соцсеть (Instagram, Facebook);
• Создаёте PDF-презентацию, куда вставляются растровые изображения;
• Работаете с фотографиями или градиентами, где важна плавность переходов.

Альтернативы: когда JPG не подходит

Если в макете есть прозрачные области, например, логотип на прозрачном фоне — используйте PNG. Для иконок, кнопок, лого в вебе — SVG. Эти форматы сохраняют чёткость на всех экранах и не теряют качество при масштабировании.

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

Даже опытные пользователи Figma иногда сталкиваются с проблемами при экспорте. Ниже — частые ошибки и способы их решения.

Экспорт не работает: нет кнопки Export

Самая распространённая причина — невыделенный объект. Убедитесь, что вы кликнули по фрейму или слою на холсте. Если вы находитесь в режиме редактирования текста или фигуры, панель свойств покажет не «Design», а «Text» или «Shape». Нажмите Esc, чтобы выйти из режима редактирования.
Также проверьте, не находитесь ли вы в режиме «Prototype» — в нём панель справа показывает настройки взаимодействий, а не дизайн. Переключитесь обратно на «Design» в верхней панели.

Сохраняется не тот фрагмент

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

• Увеличьте фрейм вручную;
• Используйте Auto Layout, чтобы контент автоматически подстраивался;
• Создайте новый фрейм поверх нужной области и экспортируйте его.

Низкое качество изображения

Если картинка выглядит размытой, проверьте масштаб экспорта. 1x может быть недостаточно для современных экранов. Используйте 2x для Retina-дисплеев. Также учтите: JPG сжимает данные, и при высокой степени компрессии теряются детали. Figma не даёт настроить уровень сжатия напрямую, но вы можете:

• Экспортировать в PNG для максимального качества;
• Конвертировать PNG в JPG уже на компьютере с помощью специальных инструментов (например, Photoshop или Squoosh.app), где можно регулировать качество.

Чёрный фон вместо прозрачного

JPG не поддерживает прозрачность. Если в дизайне был прозрачный фон, он станет белым или чёрным при экспорте в JPG — зависит от настроек просмотра. Чтобы сохранить прозрачность, обязательно выбирайте PNG или SVG.

Советы для профессионалов: эффективный экспорт в работе

Профессиональные дизайнеры используют экпорт не как разовую операцию, а как часть рабочего процесса. Вот несколько продвинутых практик.

• Используйте плагины для массового экспорта. Плагины вроде «Batch Export» или «Exporter» позволяют экспортировать десятки фреймов по шаблону, задавать префиксы, папки и форматы. Это спасает часы при подготовке документации.
• Настройте именование по системе. Например: «[тип]-[страница]-[устройство]-[масштаб]». Пример: banner-home-mobile-2x.jpg. Такие имена легко сортировать и искать.
• Экспортируйте в папку проекта. Создайте в Google Drive или локальной папке раздел «Exports», куда складывайте все версии. Добавьте дату в имя файла при необходимости: hero-2026-03-16.jpg.
• Используйте комбинации форматов. Один клик — и вы получаете JPG (для презентации), PNG (для разработки) и SVG (для адаптивности). Это достигается через несколько профилей экспорта на одном фрейме.

Горячие клавиши для быстрого экспорта

• Shift + E — быстро добавить профиль экспорта к выделенному объекту;
• Ctrl + Alt + E (Win) или Cmd + Option + E (Mac) — открыть меню экспорта;
• D — переключиться на панель Design (где находится Export).

Запомните их — они ускорят работу в разы.

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

При экспорте в JPG главное — понимать контекст использования. Если изображение пойдёт в печать или на большую презентационную панель, 1x может быть недостаточно. Всегда уточняйте требования к разрешению. Для цифровых каналов достаточно 72–150 PPI, но при увеличении масштаба (2x, 3x) плотность растёт пропорционально.
Не экономьте на качестве при передаче материалов клиенту. Даже если он просит «просто скриншот», отправляйте хорошо оформленный JPG с чёткими границами и подходящим разрешением. Это повышает доверие и демонстрирует профессионализм.
Автоматизация — ваш союзник. Настройте шаблоны, используйте плагины, создайте систему именования. Чем чаще вы экспортируете, тем больше времени можно сэкономить через стандартизацию.

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

Заключение

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

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