Как экспортировать файл с фигмы

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

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

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

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

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

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

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

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

• Слои: отдельные фигуры, текст, иконки. Удобно для извлечения элементов интерфейса.
• Фреймы: основные блоки дизайна, такие как карточки, экраны приложений, модальные окна.
• Страницы: полные вкладки проекта, содержащие несколько фреймов и компонентов.
• Компоненты: переиспользуемые элементы, такие как кнопки, шапки, футеры.
• Прототипы: сцены с анимацией и переходами (экспорт возможен только как видео или PDF).

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

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

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

1. Откройте проект в Figma и выберите нужный объект (слой, фрейм, страницу).
2. В правой панели свойств найдите раздел Export (внизу, под «Design»).
3. Нажмите кнопку + Add Export, чтобы создать новый слот.
4. Настройте параметры: формат (PNG, JPG, SVG, PDF), scale (1x, 2x, 3x) и clipping (crop to content или transparent background).
5. При необходимости добавьте дополнительные слоты для других форматов.
6. Нажмите Export в нижней части панели и выберите папку для сохранения.

Если вы экспортируете несколько объектов одновременно, выделите их с помощью Shift или Ctrl (Cmd на Mac), затем добавьте экспортные слоты. Figma применит одинаковые настройки ко всем выбранным элементам.

Пример: экспорт иконки в нескольких форматах

Допустим, вам нужно экспортировать иконку для мобильного приложения.

• Выберите слой с иконкой.
• Добавьте три экспортных слота:
  • PNG, 1x — для базовых экранов;
  • PNG, 2x — для Retina;
  • SVG — для векторной отрисовки в коде.
• Убедитесь, что включена опция «Transparent background».
• Экспортируйте — Figma создаст три файла с автоматическим именованием.

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

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

Настройки масштаба и обрезки

Особое внимание уделите параметрам:

• Scale: 1x — стандартное разрешение; 2x — в два раза больше пикселей; 3x — для устройств с высокой плотностью пикселей.
• Content:
  • Crop to bounds — обрезает по границам фрейма;
  • Crop to selection — по выделенному контенту;
  • Transparent background — оставляет фон прозрачным (обязательно для PNG и SVG).

Пакетный экспорт и автоматизация

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

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

Для более сложных сценариев подойдут API и плагины. Например, можно настроить автоматическую генерацию ресурсов при каждом коммите в дизайн-систему. Это особенно актуально для крупных команд, где дизайнеры и разработчики работают параллельно.

Использование Figma API для экспорта

Figma предоставляет мощное API, позволяющее программно получать JSON-описание проекта и экспортировать изображения по URL.
Пример использования:

• Получите file key из URL проекта.
• Вызовите endpoint /images/{file_key} с параметрами node_ids, format, scale.
• API вернёт ссылки на изображения, которые можно загрузить автоматически.

Это позволяет интегрировать Figma в CI/CD-процессы, например, автоматически обновлять библиотеку компонентов в Storybook.

Плагины и сторонние инструменты

Плагины значительно расширяют возможности экспорта. Вот наиболее полезные:

• Exporter: позволяет задавать правила экспорта (например, «все иконки → SVG + PNG 2x») и экспортировать одним кликом.
• Batch Styler: помогает стандартизировать имена и слои перед экспортом.
• SVGOMG Figma: оптимизирует SVG-файлы прямо из Figma, уменьшая размер до 60%.
• Figma to Code: генерирует CSS, React или SwiftUI код на основе выбранных элементов — полезно для разработчиков.

Также существуют внешние сервисы, такие как Zeplin, Avocode и Zeroheight, которые импортируют Figma-файлы и предоставляют улучшенные инструменты для экспорта и документации.

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

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

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

Чек-лист перед экспортом

Перед тем как нажать «Export», проверьте:

• Правильно ли названы слои и фреймы?
• Выбран ли нужный формат и масштаб?
• Включен ли прозрачный фон (если нужен)?
• Проверены ли границы обрезки?
• Оптимизированы ли SVG-файлы?

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

Анна делится практикой своей команды: перед релизом они запускают скрипт, который автоматически экспортирует все новые компоненты в SVG и PNG 2x, помещает их в облако и отправляет уведомление разработчикам. Такой подход сокращает время на ручную передачу артефактов на 80%.

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

Заключение

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

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