Как экспортировать макет из figma

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

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

Основные форматы экспорта в Figma

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

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

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

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

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

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

Как экспортировать макет пошагово

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

1. Выделите нужный объект. Это может быть фрейм, группа, фигура или весь холст. Убедитесь, что выделено именно то, что нужно экспортировать. Горячая клавиша F помогает быстро создать фрейм.
2. Перейдите в правую панель свойств. Прокрутите вниз до раздела «Export». Если его нет, нажмите «+ Add export preset».
3. Выберите формат. Нажмите на выпадающее меню и выберите PNG, JPG, SVG или PDF. Можно добавить несколько пресетов для разных целей.
4. Укажите разрешение. По умолчанию стоит 1x. Для ретина-экранов добавьте 2x или 3x. Это особенно важно для PNG и JPG.
5. Настройте имя файла. Введите понятное название, например, «button-primary-active@2x.png». Это упростит работу разработчиков.
6. Нажмите Export. Выберите место сохранения на компьютере. Figma позволяет экспортировать сразу несколько объектов с одинаковыми настройками.

Если вы работаете с компонентами, экспортировать можно как весь компонент, так и отдельные его состояния. Например, кнопка в состояниях «default», «hover», «active» может быть экспортирована как набор файлов с понятной номенклатурой.

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

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

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

При экспорте векторных объектов (SVG) разрешение не влияет на качество, так как вектор масштабируется бесконечно. Однако при экспорте в PNG или JPG игнорирование 2x может привести к размытости на современных устройствах.

Для адаптивных проектов рекомендуется экспортировать ключевые элементы (логотип, иконки) сразу в нескольких разрешениях. Это экономит время и гарантирует корректное отображение на всех устройствах.

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

Экспорт для разработчиков: Dev Mode и код

Один из главных плюсов Figma — возможность напрямую передавать данные разработчикам через режим «Dev Mode». Он доступен при переключении вкладки справа от «Design».

В Dev Mode разработчик видит:

• Точные значения отступов, размеров и расстояний между элементами
• Цвета в HEX, RGB, HSL и других форматах
• Шрифты, включая семейство, размер, насыщенность и межстрочный интервал
• Эффекты: тени, размытие, непрозрачность
• Код CSS, Swift, XML (Android) и Flutter

Это значительно ускоряет процесс верстки и снижает количество вопросов. Разработчик может просто скопировать стиль кнопки и вставить его в код.

Для полного экспорта данных:

1. Откройте файл в Figma
2. Выберите нужный фрейм
3. Переключитесь на вкладку «Dev Mode»
4. Нажмите на интересующий элемент
5. Скопируйте нужные значения или код

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

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

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

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

• Zeplin Export — экспортирует макеты в Zeplin, популярный инструмент для передачи данных разработчикам.
• Avocode Sync — аналогичная интеграция с Avocode, поддерживающая экспорт слоёв и стилей.
• Batch Export — позволяет экспортировать десятки фреймов за один клик с предустановленными настройками.
• Icons to SVG — автоматизирует конвертацию иконок в SVG с оптимизацией.
• Content Reel — не для экспорта, но помогает использовать реальные данные, что делает макеты более точными перед экспортом.

Автоматизация особенно важна при регулярной передаче обновлённых макетов. Например, после правок в дизайн-системе можно запустить Batch Export и получить все иконки в 1x, 2x и 3x без ручной работы.

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

Частые ошибки и как их избежать

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

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

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

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

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

Заключение

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

• Выбирайте формат экспорта в зависимости от цели: PNG для интерфейсов, SVG для векторов, PDF для презентаций.
• Всегда указывайте 2x или 3x для ретина-экранов при экспорте растровых изображений.
• Используйте Dev Mode для точной передачи стилей и расстояний разработчикам.
• Автоматизируйте массовый экспорт с помощью плагинов, таких как Batch Export.
• Проверяйте цвета, прозрачность и структуру SVG перед отправкой.