Экспорт в Figma: JPG, PNG, SVG — что и когда выбирать?

Правильный выбор формата при экспорте из Figma - это критически важный этап подготовки макета к разработке или публикации. Ошибка на этом шаге может привести к "мыльным" изображениям, чрезмерному весу страницы или искажению пропорций элементов. Понимание разницы между растровой и векторной графикой позволяет дизайнеру оптимизировать ресурсы, обеспечивая высокую скорость загрузки сайта или приложения без потери визуального качества. В этом руководстве мы детально разберем особенности JPG, PNG и SVG, чтобы вы точно знали, какой формат выбрать для каждой конкретной задачи.

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

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

Выбор между ними зависит от сложности изображения. Фотографии с миллионами цветовых переходов невозможно представить в векторе без колоссальной потери детализации или огромного веса файла. С другой стороны, логотипы и простые иконки в растре будут выглядеть плохо на экранах с высоким разрешением (Retina), поэтому здесь безусловное преимущество у векторов. Figma предоставляет гибкие инструменты для работы с обоими типами данных, позволяя переключаться между ними в зависимости от целей проекта.

Формат JPG (или JPEG) является стандартом для хранения фотографий и сложных изображений с плавными переходами цветов. Главная особенность этого формата - сжатие с потерями. Алгоритм удаляет часть данных, которые человеческий глаз почти не замечает, что позволяет значительно уменьшить размер файла. Это делает JPG идеальным выбором для фоновых изображений, баннеров и галерей, где важна скорость загрузки страницы.

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

Когда стоит выбирать JPG в Figma:

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

Формат PNG (Portable Network Graphics) использует сжатие без потерь, что означает полное сохранение всех деталей исходного изображения. Его главным преимуществом является поддержка альфа-канала, что позволяет создавать изображения с прозрачным фоном. Это делает PNG незаменимым при создании элементов интерфейса, которые должны накладываться на любой фон без белых рамок.

Существует два основных вида PNG: PNG-8 и PNG-24. Первый поддерживает ограниченную палитру (до 256 цветов) и весит меньше, второй поддерживает миллионы цветов и обеспечивает идеальное качество. В Figma при обычном экспорте создаются качественные файлы, которые сохраняют четкость каждой линии. Это делает PNG отличным выбором для скриншотов, сложных иллюстраций с прозрачностью и элементов, где важна идеальная резкость.

Основные сценарии использования PNG:

1. Изолированные объекты: товары для интернет-магазина, персонажи, элементы декора.
2. Сложные изображения с прозрачностью, которые слишком детализированы для SVG.
3. Скриншоты интерфейсов для презентаций, где важна точность отображения каждого пикселя.
4. Графика, в которой присутствуют полупрозрачные области (градиенты с переходом в прозрачность).

SVG (Scalable Vector Graphics) - это не просто картинка, а XML-код, который описывает геометрию объекта. Браузер читает этот код и рисует изображение "на лету". Это обеспечивает абсолютную четкость на любом уровне масштабирования. Если вы создали иконку в Figma, экспорт в SVG позволит ей оставаться идеально резкой и на обычном мониторе, и на 4K-дисплее.

Одним из огромных преимуществ SVG является возможность управления ими через CSS или JavaScript. Разработчик может изменить цвет иконки при наведении курсора или анимировать путь линии прямо в коде. Кроме того, текстовые данные внутри SVG остаются индексируемыми поисковыми системами, что полезно для SEO. Однако стоит помнить, что слишком сложные векторные файлы (например, с тысячами мелких точек или сложными масками) могут перегрузить процессор устройства при отрисовке.

Используйте SVG для следующих целей:

• Иконки и пиктограммы любого размера.
• Логотипы компании и брендинга.
• Простые плоские иллюстрации (flat design).
• Анимированные элементы интерфейса, созданные с помощью векторов.
• Декоративные разделители, волны и геометрические паттерны.

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

Процесс экспорта в Figma максимально упрощен, но имеет свои нюансы. Чтобы экспортировать объект, нужно выделить его и в правой панели в разделе Export нажать на "плюс". Здесь можно выбрать формат и множитель размера (1x, 2x, 3x и т.д.). Множитель особенно важен для растровых форматов (PNG, JPG), так как для экранов с высокой плотностью пикселей (Retina) требуются изображения в два или три раза большего размера, чтобы они не выглядели размытыми.

Важной функцией является возможность именования слоев. Если вы называете слой с припиской @2x или @3x, некоторые системы сборки автоматически распознают это. Также рекомендуется группировать элементы, которые должны быть экспортированы вместе, в один фрейм или компонент. Это позволяет экспортировать целые блоки интерфейса одним кликом, сохраняя внутренние отступы и пропорции.

При экспорте в SVG в Figma есть опция "Include id attribute". Если она включена, в коде файла будут сохранены названия слоев из Figma. Это может быть полезно для разработчиков, чтобы они могли обращаться к конкретным частям иконки через ID для анимации. Однако для чистоты кода часто рекомендуют удалять лишние метаданные с помощью сторонних оптимизаторов.

Экспорт из Figma - это только половина дела. Файлы, полученные напрямую, часто содержат лишнюю информацию, которая увеличивает их вес. Для JPG и PNG рекомендуется использовать сервисы сжатия, такие как TinyPNG или Squoosh. Они позволяют уменьшить размер файла на 50-80% без видимой потери качества за счет более эффективного пересчета цветовых палитр.

Для SVG основным инструментом является SVGOMG. Этот сервис удаляет невидимые элементы, лишние пробелы и упрощает координаты путей, что делает код файла чище и быстрее. Оптимизация векторов важна не только для скорости загрузки, но и для стабильности работы браузера, так как слишком тяжелые SVG могут вызвать "тормоза" при скроллинге страницы.

Основные правила оптимизации:

1. Всегда проверяйте вес файла перед загрузкой на сервер.
2. Используйте формат WebP как современную альтернативу JPG и PNG (хотя Figma не экспортирует в него напрямую, это можно сделать через конвертеры).
3. Для SVG удаляйте все неиспользуемые маски и скрытые слои перед экспортом.
4. Следите за тем, чтобы растровые изображения не превышали разумных пределов (например, 200-500 КБ для баннеров).

Работа с иконками требует особого подхода. Главное правило: иконки всегда должны быть в SVG. Чтобы иконка корректно отображалась, она должна быть вписана в квадратный фрейм (например, 24x24 или 32x32 пикселя). Это гарантирует, что при замене одной иконки на другую в коде сайта, размер элемента не "прыгнет", а центрирование останется идеальным.

При создании иллюстраций в Figma часто используется комбинация методов. Например, основной контур может быть векторным (SVG), а сложные текстуры или тени - растровыми (PNG). В таком случае иллюстрацию лучше экспортировать либо как один качественный PNG, либо передать разработчику по частям, чтобы он собрал их в верстке. Использование Boolean Operations (объединение, вычитание форм) позволяет создавать сложные векторы, которые при экспорте в SVG превращаются в один чистый путь (Path), что значительно облегчает код.

Советы по подготовке графики:

• Объединяйте все векторные части иконки в один слой (Flatten), чтобы избежать появления множества мелких тегов в SVG.
• Избегайте использования сложных эффектов размытия (Blur) в SVG, так как они могут рендериться по-разному в разных браузерах. Для таких эффектов лучше использовать PNG.
• Проверяйте, чтобы все обводки (Strokes) были преобразованы в заливки (Outlines), чтобы при масштабировании толщина линий не менялась неожиданным образом.

Передача макетов в разработку - это процесс коммуникации. Чтобы разработчик не задавал лишних вопросов, стоит подготовить "библиотеку ассетов". Вместо того чтобы заставлять программиста искать нужную иконку в огромном макете, создайте отдельную страницу "Assets", где все элементы будут аккуратно разложены по категориям и именованы по единому стандарту (например, ic_search_main.svg, bg_hero_desktop.jpg).

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

Чек-лист по передаче ассетов:

• Все иконки переведены в кривые и упакованы в квадратные фреймы.
• Фотографии сжаты и имеют осмысленные названия.
• Для всех растровых элементов созданы версии @2x и @3x для Retina-дисплеев.
• Все векторные элементы проверены на отсутствие "мусорных" точек и лишних узлов.

Самая частая ошибка - экспорт иконки без фрейма. Если вы выделите только векторный контур и нажмете Export, Figma вырежет изображение точно по границам объекта. В итоге иконка шириной 21px и высотой 23px будет иметь разные размеры, и в верстке она "поедет". Всегда помещайте иконку во фрейм фиксированного размера.

Другая проблема - экспорт сложных градиентов и эффектов слоя (Drop Shadow, Inner Glow) в SVG. Некоторые браузеры могут некорректно отображать сложные фильтры SVG, что приведет к появлению черных квадратов или исчезновению теней. В таких случаях безопаснее экспортировать элемент в PNG с прозрачностью, пожертвовав масштабируемостью ради визуальной стабильности.

Также часто забывают о цветовых пространствах. Хотя Figma работает в sRGB, при экспорте в JPG для печати или специфических нужд могут возникнуть расхождения в цветах. Всегда проверяйте итоговый файл в обычном просмотрщике изображений или браузере перед отправкой в работу. Помните, что PNG-24 весит больше, чем JPG, и если вы экспортируете огромный фоновый баннер в PNG, страница будет грузиться очень долго, что негативно скажется на пользовательском опыте и SEO-показателях сайта.