Figma как экспортировать проект

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

Основы экспорта: что, откуда и зачем

Экспорт в Figma — это процесс преобразования выбранных элементов дизайна в файлы, пригодные для использования вне платформы. Это могут быть статичные изображения, векторные графики, PDF-документы или даже архивы с компонентами. Экспорт возможен на уровне отдельного слоя, фрейма, группы или всей страницы. Каждый уровень имеет свои особенности и ограничения.
Процесс начинается с выделения объекта. После этого в правой панели свойств появляется секция «Export» (Экспорт). По умолчанию она пуста, но при нажатии кнопки «+» можно добавить один или несколько слотов экспорта. Важно понимать, что экспорт не затрагивает весь проект целиком — только те части, к которым явно применены настройки.
Разные проекты требуют разных подходов. Дизайнер мобильного приложения может экспортировать иконки в PNG@2x и SVG, веб-дизайнер — сохранять баннеры в JPG с высоким сжатием, а UX-исследователь — генерировать PDF с аннотациями для презентации заказчику. Отсутствие чёткой стратегии приводит к дублированию файлов и путанице в версиях.

Когда использовать экспорт?

• Передача разработчикам: предоставление ресурсов в нужных форматах и размерах.
• Презентации: создание PDF или PNG-слайдов для демонстрации.
• Интеграция с другими системами: импорт в Adobe Illustrator, Sketch или CMS.
• Архивирование: сохранение версий дизайна на случай отката.

Форматы и настройки экспорта: выбор под задачу

Выбор формата — ключевой этап, влияющий на качество, размер и совместимость файлов. Figma поддерживает четыре основных формата: PNG, JPG, SVG и PDF. Каждый из них решает определённый круг задач.
PNG идеален для графики с прозрачностью, иконок, логотипов и интерфейсных элементов. Он использует lossless-сжатие, то есть не теряет данные при сохранении. JPG, напротив, применяет lossy-сжатие и подходит для фотографий и изображений с плавными переходами цветов. Его минус — отсутствие прозрачности.
SVG — векторный формат, незаменимый для масштабируемой графики. Подходит для логотипов, иллюстраций и компонентов, которые будут использоваться на сайтах. PDF используется для многостраничных документов, таких как дизайн-системы, презентации или технические спецификации.

Настройки разрешения: 1x, 2x, 3x — что это значит?

Figma предлагает выбор разрешения: 1x, 2x, 3x. Это множители относительно базового размера объекта. Например, если фрейм 100×100 px, то:

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

Для мобильных устройств часто требуется 2x и 3x (Retina-экраны), а для веба — достаточно 1x. При экспорте SVG разрешение не влияет, так как вектор масштабируется без потерь.

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

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

1. Откройте проект в Figma и перейдите на нужную страницу.
2. Выделите фрейм или слой, который хотите экспортировать. Используйте инструмент Select (V).
3. В правой панели найдите раздел «Export». Если он скрыт, прокрутите вниз до конца панели свойств.
4. Нажмите «+», чтобы добавить слот экспорта.
5. Выберите формат: PNG, JPG, SVG или PDF.
6. Укажите разрешение: 1x, 2x или 3x. Можно добавить несколько слотов для разных разрешений.
7. Настройте дополнительные параметры: для JPG — качество (от 0 до 100%), для PNG — сжатие (не влияет на качество).
8. Нажмите «Export» рядом с нужным слотом, чтобы сохранить файл локально.

Если вы экспортируете несколько файлов, повторяйте шаг 8 для каждого слота. Figma не объединяет слоты в один клик — каждый экспорт запускается отдельно.

Как экспортировать с фоном или тенью?

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

• Увеличьте размер фрейма, чтобы вместить эффекты.
• Или создайте новый фрейм-обёртку с достаточными отступами.
• Альтернатива — используйте плагин «Export with Effects», который корректно обрезает с учётом внешних эффектов.

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

Ручной экспорт десятков иконок или карточек продуктов — трудоёмкая задача. К счастью, Figma предлагает решения для автоматизации.
Первый способ — групповой экспорт. Выделите несколько фреймов (удерживая Shift), затем в панели экспорта добавьте слот. Все выбранные объекты будут экспортированы по тем же настройкам. Файлы сохранятся в отдельные файлы с именами фреймов.
Второй способ — использование компонентов. Если все элементы являются экземплярами одного компонента, можно экспортировать сам компонент. Тогда при обновлении источника изменения автоматически попадут в новые экспортные файлы.
Третий способ — плагины. Самые популярные:

• Batch Export — экспортирует всё выделенное с настройками формата и разрешения.
• Icons Generator — создаёт набор иконок в разных форматах и размерах.
• Export Artboards to PDF — генерирует PDF из всех страниц или фреймов.

Автоматизация через API (для продвинутых)

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

• Получает список всех фреймов с тегом «export».
• Экспортирует их в PNG@2x и SVG.
• Архивирует и отправляет по email.

Это особенно полезно для регулярных релизов дизайн-систем.

Экспорт прототипов и интерактивных макетов

Прототипы в Figma нельзя экспортировать как исполняемые файлы (например, HTML), но есть способы сохранить их поведение и структуру.
Наиболее распространённый метод — экспорт в виде видео или GIF. Для этого:

• Протестируйте прототип в режиме презентации.
• Запишите экран с демонстрацией взаимодействий.
• Обрежьте и сохраните как MP4 или GIF.

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

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

Даже опытные дизайнеры допускают ошибки при экспорте. Вот самые частые:

• Экспорт с неправильным разрешением: забывают указать 2x для Retina-экранов. Решение — создать шаблон с предустановленными слотами экспорта.
• Потеря прозрачности: экспортируют PNG как JPG. Решение — всегда проверять формат перед сохранением.
• Обрезка теней и блюров: фрейм слишком мал. Решение — использовать padding или внешний фрейм.
• Кривые имена файлов: Figma берёт название слоя. Если оно нечитаемое — файлы сложно найти. Решение — называть фреймы осмысленно (например, „button-primary“, „icon-menu“).
• Экспорт всего проекта целиком: вместо конкретных элементов. Решение — выделять только нужное, использовать страницы для организации.

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

1. Правильно ли назван фрейм?
2. Все ли эффекты (тени, блюры) полностью видны?
3. Выбран ли нужный формат (PNG/SVG для иконок, JPG для фото)?
4. Указано ли правильное разрешение (1x, 2x, 3x)?
5. Есть ли необходимость в нескольких форматах?
6. Проверены ли цвета (особенно в CMYK для печати)?

Экспертное мнение: лучшие практики экспорта

Профессиональные дизайнеры выработали ряд устойчивых практик, которые повышают эффективность и снижают количество ошибок.
Первая — стандартизация имён и структуры. Все фреймы, подлежащие экспорту, должны иметь единый префикс (например, „export/“) или находиться на отдельной странице «Resources». Это упрощает массовый выбор.
Вторая — использование переменных и компонентов. Если иконка — это компонент, её можно экспортировать один раз, а затем обновлять централизованно. Это особенно важно для дизайн-систем.
Третья — документирование процесса. Команда должна иметь внутреннюю инструкцию: какие форматы, разрешения и имена использовать для разных типов проектов.

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

Заключение

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

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