Как сохранить изображение в figma

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

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

Основные шаги экспорта изображения

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

Пошаговая инструкция

1. Откройте Figma-файл и перейдите на нужную страницу.
2. Выделите фрейм, слой или группу, которую хотите сохранить.
3. В правой панели найдите раздел «Export» и нажмите «+ Add export».
4. Выберите формат: PNG, JPG, SVG или PDF.
5. Укажите масштаб: 1x (для экранов), 2x (для Retina), 3x (для высоких DPI).
6. При необходимости измените имя файла.
7. Нажмите «Export» и выберите место для сохранения на компьютере.

Если вы экспортируете несколько версий одного элемента (например, 1x и 2x), добавьте два параметра экспорта. Figma позволит скачать все варианты сразу.

Форматы для сохранения: PNG, JPG, SVG, PDF

Выбор формата напрямую влияет на качество, размер и применимость изображения. Каждый формат имеет свои особенности, и важно понимать, где и зачем его использовать.
PNG — один из самых популярных форматов в дизайне. Он поддерживает прозрачный фон и сжатие без потерь. Идеально подходит для иконок, логотипов, интерфейсных элементов. Минус — большой размер при высоком разрешении.
JPG — используется для фотографий и изображений с плавными переходами цветов. Не поддерживает прозрачность, но обеспечивает хорошее сжатие. Подходит для баннеров, слайдов, печатных материалов, где важна скорость загрузки.
SVG — векторный формат, который масштабируется без потери качества. Лучше всего подходит для веба: логотипов, иллюстраций, иконок. Файл легкий и легко редактируется в коде. Но не поддерживается в старых браузерах (IE8 и ниже).
PDF — универсальный формат для печати и документации. Позволяет сохранить несколько страниц, шрифты и векторную графику. Часто используется для презентаций, технической документации и передачи макетов клиентам.

Настройка качества и разрешения

Качество изображения при экспорте зависит от двух факторов: масштаба (scale) и исходного размера объекта. Figma предлагает три стандартных значения: 1x, 2x и 3x. Они соответствуют плотности пикселей на разных устройствах.
1x — базовое разрешение, подходит для обычных экранов (например, Full HD). 2x — удвоенная плотность, используется в Retina-экранах Apple и современных смартфонах. 3x — тройное разрешение, применяется в высококачественных мобильных дисплеях (например, Samsung Galaxy S20 и выше).
Если вы экспортируете иконку 100×100 пикселей:

• 1x → 100×100 px
• 2x → 200×200 px
• 3x → 300×300 px

Размер файла увеличивается пропорционально квадрату масштаба. Поэтому PNG 3x может быть в 9 раз больше, чем 1x. Это важно учитывать при массовом экспорте.

Как выбрать правильный масштаб?

• Для веб-сайтов — 1x и 2x.
• Для мобильных приложений — 1x, 2x, 3x (зависит от платформы).
• Для печати — используйте PDF с высоким DPI (через специальные настройки).
• Для презентаций — 2x PNG или PDF.

Также можно задать кастомный масштаб, например, 0.5x для миниатюр или 4x для детализированных иллюстраций. Для этого в поле масштаба введите нужное значение вручную.

Массовый экспорт: как сэкономить время

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

• Batch Export — позволяет выбрать несколько фреймов и экспортировать их одним кликом.
• Exporter — даёт расширенные настройки: именование по маске, выбор формата, масштаба.
• Automate for Figma — продвинутый инструмент для автоматизации задач, включая экспорт.

Второй способ — использовать встроенные возможности. Вы можете создать отдельную страницу, куда скопируете все нужные элементы, настроить экспорт для каждого и затем экспортировать всё сразу. Figma позволяет скачивать несколько файлов одновременно.
Третий способ — генерация ссылки на просмотр. Через меню «Share» вы можете опубликовать проект и дать доступ к просмотру. Пользователи смогут сами экспортировать нужные элементы, если у них есть права.

Чек-лист для быстрого массового экспорта

1. Создайте отдельную страницу «Export Assets».
2. Сгруппируйте все нужные элементы в фреймы с понятными названиями.
3. Добавьте параметры экспорта для каждого фрейма.
4. Установите плагин Batch Export.
5. Выделите все фреймы и запустите экспорт.
6. Проверьте имена и форматы файлов.

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

Даже опытные пользователи допускают ошибки при экспорте изображений. Вот самые распространённые:
Ошибка 1: Экспорт всего холста вместо нужного элемента.
Если вы не выделили конкретный фрейм, Figma может экспортировать весь холст. Это приводит к большим файлам и лишним данным.
Решение: всегда выделяйте нужный фрейм или группу перед настройкой экспорта.
Ошибка 2: Неправильный формат для задачи.
Сохранение фотографии в PNG или логотипа в JPG снижает качество или увеличивает размер.
Решение: используйте таблицу соответствия форматов (см. выше).
Ошибка 3: Отсутствие прозрачности, когда она нужна.
Если фон должен быть прозрачным, но вы экспортируете в JPG — он станет белым.
Решение: выбирайте PNG или SVG при необходимости прозрачности.
Ошибка 4: Забытые стили текста и шрифты.
При экспорте в PNG/JPG шрифты встраиваются в изображение. Но если они не загружены, могут отображаться некорректно.
Решение: используйте стандартные шрифты или преобразуйте текст в кривые (Outline Stroke) перед экспортом.
Ошибка 5: Большой размер файла.
Это происходит при экспорте 3x PNG или неоптимизированного SVG.
Решение: используйте оптимизаторы (например, SVGO для SVG) или ограничьте масштаб.

Типичные проблемы и решения

• Не появляется панель Export — убедитесь, что выделён фрейм или группа, а не отдельный слой.
• Экспортированный файл пустой — возможно, элемент находится за границами фрейма. Проверьте обрезку (clipping).
• SVG не открывается в редакторе — попробуйте экспортировать с опцией «Include ‘id’ attributes» или использовать другой парсер.
• Цвета отличаются от оригинала — проверьте цветовой профиль. Figma использует sRGB, но некоторые программы могут его игнорировать.

Советы от экспертов: лучшие практики

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

Используйте систему именования. Например: `icon-home-24px@2x.png` или `logo-primary-color.svg`. Это упрощает поиск и организацию файлов.
Если вы работаете в команде, настройте shared library. Все компоненты будут доступны для экспорта из любого проекта, и изменения синхронизируются автоматически.
Автоматизация — ключ к продуктивности. Настройте шаблоны экспорта через плагины или скрипты. Например, Automate for Figma позволяет назначать горячие клавиши для быстрого экспорта.

Кейс: экспорт для разработки

Команда разработчиков получила макет с 50 иконками. Дизайнер экспортировал их вручную в PNG 1x и 2x, но забыл про SVG. Разработчики потратили 3 часа на конвертацию.
Решение: в следующий раз использовали плагин Exporter, который автоматически генерировал SVG, PNG 1x и 2x с правильными именами. Время подготовки сократилось до 10 минут.

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

Заключение

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

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