Как выгрузить из фигмы

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

Основные форматы экспорта: что выбрать и когда

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

Для каждого формата есть свои особенности. При экспорте в PNG можно указать разрешение: 1x, 2x, 3x — это критично для адаптации под Retina-экраны. SVG сохраняет векторную структуру, но требует аккуратного подхода к группировке слоёв. Если внутри фигмы используется текст, его стоит конвертировать в кривые (outline), чтобы избежать проблем со шрифтами при открытии в других редакторах.

Как выгрузить макет из Figma по шагам

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

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

Если нужно выгрузить сразу несколько фреймов, можно использовать массовый экспорт. Для этого зажмите Shift, выделите нужные фреймы, затем в правой панели добавьте параметры экспорта. Figma создаст ZIP-архив с файлами, названными по именам фреймов.

Экспорт страницы целиком

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

Экспорт в PDF: нюансы

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

Экспертные советы по эффективному экспорту

Чтобы экспортировать макеты из Figma быстро и без ошибок, необходимо соблюдать ряд практик. Во-первых, используйте систему имён: называйте фреймы понятно, например, «Login_Screen_Mobile», а не «Frame 1». Это особенно важно при массовом экспорте.

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

Подготовка к верстке

Если макет предназначен для передачи верстальщику, важно не только выгрузить изображения, но и обеспечить доступ к исходным данным. В этом помогает режим «Developer» (Разработчик), доступный в правой панели. Он показывает CSS-стили, тени, отступы, цвета и шрифты. Разработчик может скопировать свойства напрямую, а вы можете выгрузить данные в виде JSON через API.

Работа с сетками и гайдлайнами

Перед экспортом убедитесь, что все элементы выровнены по сетке. Используйте функцию Auto Layout — она не только упрощает верстку, но и делает экспорт более предсказуемым. При наличии Auto Layout Figma корректно передаёт размеры и отступы в режиме Developer.

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

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

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

Проблемы со шрифтами

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

Некорректные тени и эффекты

Тени, размытия и градиенты могут отображаться иначе в других программах. Например, тень с радиусом 10px в Figma может быть интерпретирована иначе в Photoshop. Чтобы избежать этого, используйте режим просмотра «Outline» и убедитесь, что эффекты не выходят за границы фрейма.

Работа с командой и передача разработчикам

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

Режим «Developer» — ключевой инструмент для взаимодействия. Он позволяет копировать CSS, iOS Swift, Android XML и даже Flutter-код. Это экономит время и снижает количество ошибок при реализации. Кроме того, можно включить опцию «Show constraints» и «Spacing», чтобы разработчик видел, как элементы должны вести себя при изменении размера.

Создание design system для экспорта

Если вы работаете над крупным продуктом, создайте design system с компонентами, стилями текста и цветовыми переменными. Это обеспечит согласованность при экспорте и упростит передачу данных. Например, экспортируя кнопку, вы гарантированно получите одинаковые отступы и цвета во всех состояниях.

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

Перед отправкой макета добавьте комментарии к спорным элементам: «Здесь анимация», «Цвет фона #FFFFFF», «Шрифт должен быть жирным». Это предотвратит недопонимание и сэкономит время на согласования.

Автоматизация и интеграции

Для частого экспорта можно использовать Figma API. Он позволяет программно получать данные о файлах, слоях, стилях и даже запускать экспорт. Это полезно при интеграции с CI/CD, системами документации или внутренними инструментами компании.

Плагины также играют важную роль. Например, «Tokens Studio» помогает экспортировать дизайн-токены (цвета, отступы, шрифты) в JSON, SCSS или другие форматы. «Iconify» автоматизирует выгрузку иконок в SVG-спрайты.

Интеграция с Jira, Notion и Zeplin

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

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

По его словам, лучшие практики включают стандартизацию именования, использование Auto Layout и регулярное обновление design system. Он также отмечает, что автоматизация экспорта через API окупается уже на втором проекте среднего масштаба.

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

Заключение

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

• Выбирайте формат экспорта в зависимости от цели: PNG, SVG, PDF или JPG.
• Всегда готовьте макет: называйте фреймы, используйте Auto Layout и компоненты.
• Для работы с разработчиками используйте режим Developer и общие ссылки.
• Избегайте частых ошибок: проверяйте границы фреймов, шрифты и эффекты.
• Автоматизируйте процесс через API, плагины и интеграции с Jira, Notion и др.