Как экспортировать файл из figma

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

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

Figma — это не просто графический редактор, а полноценная платформа для совместной работы над дизайн-системами, прототипами и макетами. Одна из её ключевых особенностей — возможность точно контролировать, что и как экспортируется. Экспорт в Figma привязан к конкретным объектам: фреймам, фигурам, группам или слоям. Это означает, что вы не экспортируете весь файл целиком, а выбираете нужные элементы.
Процесс начинается с выделения объекта. После этого в правой панели появляется раздел «Export», где можно задать параметры: формат, масштаб, качество, фон и другие настройки. Важно понимать, что Figma не сохраняет файл локально до тех пор, пока вы явно не нажмёте кнопку экспорта. Все данные остаются в облаке, что обеспечивает безопасность и синхронизацию между участниками проекта.
Доступ к экспорту возможен как через интерфейс, так и через API. Это особенно полезно для команд, которые интегрируют дизайн в CI/CD-процессы. Например, можно настроить автоматическую выгрузку логотипов или иконок при каждом обновлении мастер-ветки.

Какие объекты можно экспортировать

• Фреймы — основной контейнер для макетов. Чаще всего именно фреймы используются для экспорта экранов или компонентов.
• Группы — объединённые слои. Подходят для экспорта отдельных блоков, например, карточек или кнопок.
• Отдельные слои — фигуры, текст, изображения. Удобно для выгрузки иконок или шрифтов.
• Компоненты и экземпляры — можно экспортировать как оригинальный компонент, так и его экземпляр, что полезно при работе с дизайн-системами.

Форматы экспорта: выбор оптимального варианта

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

Когда использовать PNG, а когда — SVG?

Если вы работаете с иконками, логотипами или другими элементами, которые должны корректно отображаться на всех устройствах, предпочтительнее SVG. Этот формат не теряет качества при масштабировании и позволяет управлять цветом через CSS. Однако SVG не поддерживает эффекты теней, размытия и градиентов в полной мере — они могут конвертироваться в растровые области.
PNG стоит выбирать, когда важна максимальная совместимость, особенно если используются эффекты или полупрозрачные области. Например, для экспорта кнопки с тенью и градиентом лучше взять PNG@2x.

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

Экспорт в Figma — простой процесс, но требует внимания к деталям. Ниже приведена пошаговая инструкция, применимая ко всем типам объектов.

1. Выделите объект — кликните по фрейму, группе или слою, который хотите экспортировать.
2. Перейдите в панель «Export» — она находится в правой части интерфейса, под разделом «Design».
3. Нажмите «+ Add Export» — появится новая строка с настройками экспорта.
4. Выберите формат — из выпадающего списка: PNG, JPG, SVG, PDF или JSON.
5. Укажите масштаб — 1x, 2x, 3x или кастомное значение. Для ретина-экранов рекомендуется 2x.
6. Настройте дополнительные параметры — фон (например, белый вместо прозрачного), обрезку (crop) или размер холста.
7. Нажмите «Export» — выберите место сохранения на компьютере.

Массовый экспорт: как выгрузить сразу несколько элементов

Figma позволяет добавлять несколько настроек экспорта к одному объекту. Например, можно экспортировать один и тот же фрейм в PNG@1x и PNG@2x одновременно. Для массового экспорта нескольких разных объектов:

• Выделите все нужные фреймы (удерживая Shift).
• В панели «Export» добавьте нужные форматы.
• При экспорте Figma создаст отдельную папку с файлами, именованными по названию фреймов.

Плагины и сторонние инструменты для автоматизации

Хотя базовые функции экспорта в Figma мощные, для сложных проектов часто требуется автоматизация. Плагины позволяют ускорить процесс, стандартизировать вывод и интегрировать дизайн с внешними системами.
Один из самых популярных — Zeplin for Figma. Он автоматически экспортирует макеты, генерирует спрайты и предоставляет разработчикам доступ к цветам, шрифтам и отступам. Другой — Exporter, который позволяет задавать правила экспорта по тегам и папкам.
Для программистов и DevOps подойдёт Figma API. С его помощью можно запрашивать JSON-представление файла, извлекать изображения или даже генерировать документацию. Например, команда может настроить GitHub Action, которая при каждом коммите в ветку design/master экспортирует все иконки в формате SVG.

Топ-3 плагина для экспорта

• Assets Exporter — позволяет группировать ассеты по категориям и экспортировать одним кликом.
• Iconify — автоматически конвертирует векторные иконки в оптимизированные SVG с поддержкой тем.
• Auto Export — настраивает триггеры: при изменении компонента — автоматическая выгрузка в указанную папку.

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

Даже опытные пользователи допускают ошибки при экспорте. Они могут привести к увеличению размера файлов, потере качества или проблемам на этапе верстки.
Одна из самых частых — экспорт всего холста вместо фрейма. Это создаёт огромные PNG с пустым фоном. Решение: всегда оборачивайте контент в фрейм и экспортируйте именно его.
Другая ошибка — игнорирование масштаба. Экспорт в 1x для мобильного интерфейса делает иконки размытыми на современных экранах. Рекомендация: используйте 2x для iOS и 1.5x–3x для Android в зависимости от плотности пикселей.
Также распространена проблема неправильного фона при экспорте PNG. По умолчанию он прозрачный, но если в проекте используется тёмная тема, клиент может не заметить элементы. Лучше явно указывать фон в настройках экспорта.

Проверочный чек-лист перед экспортом

• Выделен нужный фрейм, а не весь страница?
• Правильно ли задан масштаб (1x, 2x, 3x)?
• Указан ли фон (особенно для PNG и JPG)?
• Названия слоёв понятны и соответствуют содержанию?
• SVG оптимизирован и не содержит лишних путей?

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

Эффективный экспорт — это не просто техническая операция, а часть дизайн-процесса. Качественная выгрузка экономит время разработчиков, снижает количество правок и повышает доверие к дизайнеру.
Важно стандартизировать подход. Создайте шаблон проекта с готовыми настройками экспорта: например, все иконки экспортируются в SVG и PNG@2x, экраны — в PNG@1x и PDF. Это устраняет неоднозначность и делает процесс предсказуемым.
Также стоит внедрять систему именования. Например, использовать префиксы: «ico/», «img/», «screen/». Это помогает при массовом экспорте и последующей сортировке файлов.
Для командной работы полезно настроить shared plugin library. Все участники используют одни и те же плагины с одинаковыми настройками, что исключает расхождения в форматах и качестве.

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

Заключение

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

• Всегда экспортируйте фреймы, а не весь холст.
• Используйте SVG для векторных элементов и PNG@2x для растровых.
• Называйте слои осмысленно для корректного именования файлов.
• Автоматизируйте массовый экспорт через плагины или API.
• Проверяйте результат перед передачей третьим лицам.