Как в фигме сохранить фрейм как картинку

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

Базовый способ экспорта фрейма как изображения

Figma предоставляет интуитивно понятный интерфейс для экспорта любых объектов, включая фреймы. Чтобы начать, выделите нужный фрейм с помощью инструмента Selection (V) или щёлкните по нему в слоях слева. После этого в правой панели свойств активируется раздел «Design», где находится блок «Export».
Если вы не видите кнопки «Add Export», значит, выделен не фрейм, а группа или фигура. Убедитесь, что элемент действительно является фреймом (Frame) — он должен иметь чёткие границы и отображаться в иерархии как Frame, а не Group. Нажмите «Add Export», чтобы создать первый пресет экспорта.
Система предложит выбрать формат: PNG, JPG, SVG или PDF. Для большинства случаев подойдёт PNG с прозрачным фоном или JPG для фотографий. Вы можете задать масштаб: 1x (оригинальный размер), 2x (для Retina-экранов), 3x и выше. Это особенно важно, если изображение будет использоваться на устройствах с высоким DPI.
После настройки пресета нажмите «Export» внизу панели. Откроется стандартное окно сохранения файла, где нужно указать папку и подтвердить действие. Экспортированный файл будет точно соответствовать границам фрейма — всё, что находится за его пределами, обрежется.

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

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

Настройки экспорта: форматы, разрешение и качество

Правильный выбор параметров экспорта напрямую влияет на качество и применимость изображения. Figma поддерживает четыре основных формата: PNG, JPG, SVG и PDF. Каждый из них имеет свои сценарии использования.
PNG идеален для интерфейсов, иконок и элементов с прозрачностью. Он использует lossless-сжатие, поэтому не теряет качество при сохранении. JPG, напротив, применяется для фотографий и изображений с градиентами — он даёт меньший размер файла, но с потерями. SVG подходит для векторной графики, особенно если изображение будет масштабироваться без потерь. PDF используется редко — в основном для печатных материалов или передачи макетов клиентам.
Масштаб экспорта — ключевой параметр. 1x соответствует оригинальному размеру, 2x — удвоенному (например, 400×300 пикселей станет 800×600). Это необходимо для устройств Apple и других с высокой плотностью пикселей. Figma позволяет задавать несколько пресетов одновременно: например, экспортировать один и тот же фрейм сразу в 1x и 2x PNG.

Как задать имя файла при экспорте

Figma позволяет переименовать экспортируемый файл прямо в интерфейсе. По умолчанию он берёт название фрейма, но вы можете изменить его в поле «File name» рядом с пресетом. Это особенно полезно при массовом экспорте — например, вы можете назвать файлы как `header-mobile@2x.png`, `card-promo@1x.jpg` и т.д.
Также можно использовать переменные: `{filename}`, `{page}`, `{frame}`. Например, строка `{page}-{frame}@2x` автоматически сгенерирует имя вроде `Home-Slider@2x.png`. Это помогает стандартизировать имена и упрощает дальнейшую работу.

Массовый эксппорт нескольких фреймов

Если вам нужно экспортировать десятки фреймов — например, карточки товаров или экраны мобильного приложения — делать это по одному неэффективно. Figma предлагает два решения: групповой экспорт через selection и использование плагинов.
Первый способ — выделить несколько фреймов одновременно (удерживая Shift или Ctrl), затем в панели экспорта добавить пресет. При нажатии «Export» система предложит сохранить каждый фрейм отдельно, с именем, соответствующим названию слоя. Все файлы будут экспортированы с одинаковыми настройками.
Второй способ — использовать функцию «Export as» в контекстном меню. Щёлкните правой кнопкой по фрейму (или выделению) и выберите «Export as…». Здесь можно быстро выбрать формат и масштаб без перехода в правую панель. Удобно для единичных или быстрых операций.

Экспорт через страницы и слои

Если фреймы организованы по страницам (например, Page 1 — Mobile, Page 2 — Desktop), можно экспортировать целые страницы. Однако будьте осторожны: при этом экспортируется вся область холста, а не только содержимое фреймов. Чтобы экспортировать только фреймы, лучше использовать именно выделение.
Альтернатива — создать специальную страницу «Exports», где разместить все фреймы, подлежащие выгрузке, с одинаковыми отступами и именами. Такой подход часто используется в дизайн-системах и ускоряет процесс согласования с разработчиками.

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

Figma поддерживает более 10 000 плагинов, многие из которых оптимизируют экспорт. Вот наиболее популярные:

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

Использование плагинов особенно оправдано при работе с дизайн-системами, когда нужно экспортировать иконки, кнопки или карточки в нескольких состояниях и размерах. Например, Batch Export позволяет задать правило: «для всех фреймов с префиксом “icon-” экспортировать в PNG 1x, 2x и SVG».

Как установить плагин для экспорта

1. В Figma нажмите значок «Plug-ins» в верхнем меню.
2. Выберите «Browse plugins» и найдите нужный (например, «Batch Export»).
3. Нажмите «Install» и дождитесь загрузки.
4. Запустите плагин через меню Plug-ins → Installed → [название].
5. Следуйте инструкциям интерфейса: выделите фреймы, задайте настройки, запустите экспорт.

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

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

• Экспортируется весь холст, а не фрейм. Причина: выделена страница или группа, а не фрейм. Решение: убедитесь, что выделён именно фрейм (проверьте панель слоёв).
• Обрезаны части элементов. Это происходит, если внутренние объекты выходят за границы фрейма. Решение: включите «Clip content» в настройках фрейма или расширьте границы.
• Плохое качество при 2x. Убедитесь, что исходные элементы векторные или имеют достаточное разрешение. Растровые изображения при увеличении могут размываться.
• Прозрачность не сохраняется. Выбран JPG вместо PNG. JPG не поддерживает альфа-канал. Всегда используйте PNG, если нужен прозрачный фон.
• Неправильные имена файлов. Figma берёт название слоя. Переименуйте фрейм перед экспортом или используйте шаблоны имён.

Цветовые профили и точность отображения

Figma работает в sRGB — стандартной цветовой модели для веба. При экспорте PNG и JPG изображения сохраняются в sRGB, что гарантирует корректное отображение на большинстве устройств. Однако при печати или работе с широким гамутом (Adobe RGB) могут возникнуть расхождения.
Если вы готовите макет для печати, рекомендуется экспортировать в PDF и указать CMYK-профиль уже в программе верстки (InDesign, Illustrator). Figma пока не поддерживает CMYK напрямую, но PDF-экспорт сохраняет векторные данные и позволяет конвертировать цвета на следующем этапе.

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

При экспорте фреймов в Figma следует придерживаться трёх ключевых принципов. Во-первых, стандартизируйте процессы: используйте единые пресеты экспорта для всей команды. Это устраняет несоответствия и ускоряет согласование. Во-вторых, всегда экспортируйте с учётом контекста использования — веб, мобильное приложение или печать требуют разных подходов. В-третьих, автоматизируйте рутину: если вы экспортируете более 10 элементов в неделю, внедрение плагинов окупится за несколько дней.
Для разработчиков важно, чтобы ассеты были правильно названы и структурированы. Используйте понятную систему имён: `button-primary-large@2x.png`, `icon-close-small.svg`. Это упрощает интеграцию в код и снижает количество вопросов.
Представьте, что ваш макет — это продукт, который вы передаёте дальше. Чем меньше усилий потребуется от получателя, тем эффективнее коммуникация. Поэтому перед экспортом проверяйте: всё ли внутри фрейма, нет ли лишних слоёв, корректно ли масштабирование.

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

Заключение

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

• Всегда экспортируйте именно фреймы, а не группы, чтобы контролировать границы обрезки.
• Используйте PNG для прозрачности и качества, JPG — для фото, SVG — для векторов.
• Настройте пресеты экспорта и шаблоны имён для единообразия.
• Автоматизируйте массовый экспорт с помощью плагинов.
• Проверяйте результат перед отправкой — делайте тестовый вывод.