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

Экспорт изображений из Figma — это базовая, но критически важная операция для дизайнеров, разработчиков и продуктовых команд. Несмотря на кажущуюся простоту, от правильности экспорта зависит качество вёрстки, скорость интеграции макетов и соответствие финального продукта оригинальному дизайну. Всё, что вам нужно, — выделить нужный слой или фрейм, выбрать формат (PNG, JPG, SVG, PDF) и настройки сжатия, после чего использовать встроенный экспорт через панель справа. Главное — не забывать о масштабах (1x, 2x, 3x) и оптимизации для веба и мобильных устройств.

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

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

Базовый экспорт изображений: пошаговая инструкция

Чтобы экспортировать любой элемент из Figma, необходимо сначала выделить его на холсте. Это может быть фрейм, фигура, текст, группа или символ. После выделения в правой панели откройте вкладку «Design». Прокрутите вниз до раздела «Export» — он расположен под «Fill», «Stroke» и «Effects».

Если раздел пуст, нажмите кнопку «+» — появится форма настройки экспорта. Здесь вы выбираете формат (по умолчанию PNG), масштаб (1x) и, при необходимости, задаёте префикс имени файла. Figma автоматически предложит имя на основе названия слоя, но его можно изменить.

После настройки нажмите «Export» внизу панели. Файл будет загружен на ваш компьютер. Если вы работаете с несколькими артефактами, можно добавить несколько строк экспорта для одного слоя — например, одновременно PNG 1x и SVG.

Как экспортировать часть фрейма

Иногда нужно получить не весь фрейм, а конкретный элемент — например, иконку или логотип. В этом случае выделите нужный слой (или группу) и примените те же шаги. Figma экспортирует только выделенное, игнорируя остальное содержимое фрейма.

Для точного выделения используйте сочетание Shift + клик или рамку выделения. Также можно временно скрыть другие слои в панели «Layers», чтобы не промахнуться.

Экспорт с прозрачным фоном

Прозрачность поддерживается только в форматах PNG и SVG. Если вы экспортируете элемент с прозрачным фоном, убедитесь, что в настройках экспорта выбран соответствующий формат. Для PNG также важно, чтобы сам слой не имел фона — проверьте свойства «Fill».

Форматы экпорта: PNG, JPG, SVG, PDF — когда и зачем

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

Особенности экспорта SVG

SVG в Figma экспортируется с сохранением путей, но не всегда идеально чисто. Иногда в код попадают лишние группы или стили. Рекомендуется минифицировать SVG перед использованием в продакшене — для этого подойдут онлайн-инструменты вроде SVGOMG.

Также важно: если вы используете шрифты, они не встраиваются в SVG автоматически. При отображении на сайте может возникнуть расхождение, если шрифт не загружен. Чтобы избежать этого, конвертируйте текст в кривые до экспорта (выделите текст → Object → Convert to Outlines).

Когда использовать PDF

PDF чаще всего применяется для презентаций, прототипов и печатных материалов. Вы можете экспортировать одну страницу или сразу несколько. При экспорте PDF Figma сохраняет векторные элементы, что гарантирует качество при увеличении.

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

Масштабирование: 1x, 2x, 3x — как выбрать правильный

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

Это критически важно для ретина-дисплеев (Retina, 4K, OLED), где пиксельная плотность выше. Например, иконка 24×24 px должна экспортироваться в 48×48 px (2x) и 72×72 px (3x), чтобы выглядеть чётко на современных экранах.

В Figma можно добавить несколько строк экспорта для одного слоя: одна — PNG 1x, вторая — PNG 2x, третья — PNG 3x. При экспорте все три версии будут загружены одновременно.

Как Figma рассчитывает размеры

Figma использует систему координат в пикселях. Когда вы указываете 2x, программа умножает ширину и высоту фрейма на 2. Например, фрейм 100×100 px станет 200×200 px при экспорте 2x. Это происходит автоматически — вам не нужно менять размеры вручную.

Обратите внимание: если вы работаете в потоке с разработчиками, уточните, в каких единицах они ожидают ресурсы. На iOS принято использовать pt (points), где @2x и @3x — стандарт. На Android используют dp, и масштабы могут отличаться (mdpi, hdpi, xhdpi и т.д.).

Пакетный экспорт: экономия времени при работе с множеством элементов

Когда нужно экспортировать десятки иконок, карточек или компонентов, ручной способ становится неэффективным. Figma позволяет экспортировать несколько элементов за раз — достаточно выделить их одновременно (Shift + клик) и настроить экспорт.

Однако есть нюанс: если у каждого элемента разные настройки экспорта, Figma применит параметры первого выделенного. Поэтому рекомендуется предварительно настроить экспорт для каждого слоя отдельно.

Лучший способ — использовать компоненты и варианты. Если вы создали библиотеку иконок как компоненты, можно экспортировать всю страницу целиком. Для этого перейдите в меню File → Export и выберите нужные фреймы.

Экспорт всей страницы

Figma позволяет экспортировать не только отдельные слои, но и целые страницы. Это удобно для создания сводных документов, презентаций или архивации. В режиме просмотра (View mode) нажмите три точки в правом верхнем углу и выберите «Export».

Доступные форматы: PNG, JPG, PDF. Можно выбрать качество (low, medium, high) и ориентацию (portrait/landscape). Экспорт страницы в PDF — хороший способ показать прототип клиенту без доступа к Figma.

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

Профессионалы часто маркируют фреймы для экспорта, добавляя к названию суффикс @2x или .png. Например: «Button-primary@2x» или «Logo-icon.png». Это не влияет на функционал, но помогает команде быстрее ориентироваться.

Также можно использовать плагины вроде «Batch Export» или «Exporter», которые позволяют настраивать правила экспорта по шаблонам.

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

Figma имеет мощную экосистему плагинов, многие из которых автоматизируют экспорт. Они особенно полезны при работе с дизайн-системами, иконками или частыми релизами.

Популярные плагины:

• Batch Export — массовое экспортирование слоёв с сохранением структуры папок.
• Exporter — настройка сложных правил экспорта, включая имена файлов, форматы и пути.
• SVG Export Optimizer — очистка SVG от лишних данных перед скачиванием.
• Copy Image — быстрое копирование изображения в буфер обмена без сохранения на диск.

Установка плагинов: откройте панель «Plugins» (Ctrl/Cmd + P), найдите нужный, нажмите «Install». После этого он появится в меню плагинов.

Распространённые ошибки и как их избежать

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

• Экспорт без учёта масштаба — использование 1x для всех устройств, что приводит к размытым изображениям на ретина-экранах.
• Выбор JPG для иконок с прозрачностью — фон становится белым или пиксельным.
• Экспорт текста как растра вместо SVG — теряется возможность редактирования и масштабирования.
• Игнорирование оптимизации SVG — файл содержит лишние группы и стиль, замедляя загрузку сайта.
• Экспорт фреймов с обрезанными элементами — часть контента не попадает в изображение.

Чтобы избежать этих проблем, следуйте чек-листу перед экспортом:

1. Проверьте, все ли элементы внутри фрейма.
2. Убедитесь, что прозрачность нужна — и выберите PNG или SVG.
3. Добавьте 2x и 3x для растровых изображений.
4. Конвертируйте текст в кривые при экспорте SVG.
5. Используйте плагины для очистки и оптимизации.

Почему изображение получилось размытым?

Основная причина — неправильный масштаб. Если вы экспортировали 1x, а используете на дисплее 2x, система растягивает изображение, и оно теряет чёткость. Решение — всегда предоставлять @2x и @3x версии.

Ещё одна причина — сжатие JPG. Даже при высоком качестве могут появляться артефакты. Для интерфейсов лучше использовать PNG или SVG.

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

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

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

Заключение

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

• Всегда экспортируйте растровые элементы в 1x, 2x и 3x для поддержки всех устройств.
• Используйте PNG для прозрачности, SVG — для масштабируемой графики, JPG — для фото.
• Конвертируйте текст в кривые перед экспортом SVG.
• Оптимизируйте SVG перед загрузкой на сайт.
• Автоматизируйте процесс с помощью плагинов Batch Export и SVG Export Optimizer.