Белые полосы при экспорте картинок из Figma

28 февр. 2024 г.

1 минута189 слов

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

фигма белые полосы при экспорте — Выгрузили и видим белые полосы у пьедестала. Нам это не надо. И тигру это не надо.

Механизм экспорта картинок из Figma

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

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

Как исправить?

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

фигма дробные значения ширины — Дробные значения ширины у изображения и его элементов.

фигма дробные значения ширины 2 — Исправили на целое значение.

фигма дробные значения ширины 3 — Получили довольного тигра. Нам это надо.

Запоминаем, что округляем

Ширину
Высоту
Координаты

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