Школа
Веб-разработка

Как экспортировать картинки в правильном формате из Фигмы?

14 апр 2022
👁 35669   🗩1
Веб-разработка

Как экспортировать картинки в правильном формате из Фигмы?

14 апр 2022
👁 35669   🗩1
Василий Половнёв
Технический директор бюро
Полезно
 15
15
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

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

Фигма умеет экспортировать один и тот же слой сразу в нескольких форматах и разрешениях, поэтому советую настраивать экспорт и в джипег, и в ПНГ: после экспорта выберете файл поменьше.

Чтобы настроить экспорт отдельного изображения, найдите вкладку Export:

Если нужно сохранить оригинал изображения, а не его кропнутую или изменённую версию, переключитесь во вкладку Inspect, включите свойста элемента таблицей и кликните по имени файла:

СВГ можно экспортировать аналогично или сразу копировать в буфер обмена её код:

Изображения можно экспортировать локально, слой за слоем, или глобально: все изображения, для которых вы настроили экспорт, разом. Чтобы экспортировать все изображения в документе, нажмите ⌘+Shift+E:

После экспорта Фигма отдаст архив с изображениями. Советую обязательно прогнать их через ImageOptim или TinyPNG: они умело оптимизируют и чистят джипеги, ПНГ и даже СВГ

ПНГ‑24 и ПНГ‑8

Когда я говорю о ПНГ, то подразумеваю полноцветный ПНГ‑24. Есть ещё ПНГ‑8 с палитрой: вместо хранения цвета каждого пикселя он хранит его номер в палитре. Размер палитры ограничен 256 цветами. Палитра может быть меньше 256 цветов, а чем она меньше, тем меньше занимает номер цвета отдельного пикселя. Соответственно, если изображение позволяет, ПНГ‑8 даёт хорошую экономию:

ПНГ‑24
234 Кб
ПНГ‑8
120 Кб

Фигма экспортирует в ПНГ‑24, способа экспортировать в ПНГ‑8 нет. Поэтому советую обязательно после экспорта прогонять пнгшки через программы, оптимизирующие изображения: они не только сжимают ПНГ‑24, но и могут поменять формат на ПНГ‑8, если он подходит.

Веб‑разработка
Полезно
 15
15
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Андрей Артемов

Ещё нужно помнить про «ретина фактор» и растровую графику можно сразу эспортировать из фигмы в 1x, 2x, 3x... Чтобы на экранах с высоким разрешением (все современные телефоны, планшеты, ноутбуки) картинки смотрелись не пиксельными, а чёткими.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы