[Перевод] Механизм экспорта растровых изображений в Figma: как изменяется качество изображения

92fceb4405cf1453f2d0701a79e4de00.png

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

Android-разработчики при экспорте из Figma используют масштабирование x1, x1.5, x2, x3 и x4. iOS-разработчики предпочитают x1, x2 и x3.

Экспорт изображения в Figma

Экспорт изображения в Figma

Но стоит ли всегда ожидать более высокое качество при экспорте с масштабированием из Figma?

Retina дисплеи

Если у вас установлен Retina дисплей, Figma автоматически увеличит плотность пикселей. Это полезно для просмотра дизайна, но после экспорта может возникнуть вопрос: почему изображение при экспорте в x1 выглядит хуже, чем в Figma? Чтобы отключить адаптацию под Retina, перейдите в »Zoom/view options» в правом верхнем углу, затем выберите »Pixel preview» → »1x».

Установка Pixel preiew = 1x

Установка Pixel preiew = 1x

Ниже приведено сравнение изображений с опциями »1x» и »Disabled».

»1x» опция

«Disabled» опция

Если хотите предварительно увидеть, как будет выглядеть изображение после экспорта с масштабированием x1, установите 1x в меню Pixel preview.

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

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

Предположим, дизайнер загрузил растровое изображение размером 200×200 пикселей в Figma, а затем уменьшил его высоту и ширину вдвое. В этот момент Figma хранит оригинальное изображение 200×200 пикселей, но пользователь в Figma видит уменьшенное изображение размером 100×100 пикселей.

Теперь разработчик хочет экспортировать изображение из Figma (где размер изображения 100×100 пикселей) с масштабированием x1, x2 и x4. В результате он получит изображения размерами 100×100 пикселей, 200×200 пикселей и 400×400 пикселей соответственно.

При экспорте изображения с масштабированием x1, Figma обрежет часть пикселей из оригинала, чтобы получить нужный размер. При масштабировании x2 количество пикселей при экспорте будет равно оригинальному изображению, и Figma создаст копию оригинала для экспорта. В случае с x4 Figma будет копировать часть пикселей из оригинала, увеличив количество пикселей, но они будут дублировать уже существующие пиксели. 

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

Таким образом, если в Figma была загружена картинка размером 200×200 px, а вы экспортируете эту картинку с масштабированием x2, вы получите более тяжелую по объему данных картинку, но качество изображения останется прежним. 

Ниже приведено сравнение качества изображения при экспорте изображения с количеством пикселей больше, чем у оригинала.

b0fb1b3e47097cc19a8e8f8075efa14d.png

Максимальное разрешение изображения в Figma

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

© Habrahabr.ru