Как сохранять в figma в png

Если нужно быстро отправить макет, иконку или скрин интерфейса, важно понимать, как сохранять в figma в png без потери нужного качества. В Figma это делается через экспорт, но результат зависит от того, что именно вы выделили: фрейм, группу, слой или несколько объектов сразу. Ниже — рабочая последовательность и моменты, из-за которых PNG иногда получается обрезанным, слишком большим или с прозрачным фоном.

Экспорт через панель справа

Самый надёжный способ — выбрать объект на холсте и открыть правую панель. Внизу есть раздел Export. Он отвечает за выгрузку в нужный формат.

• Выделите фрейм, группу или элемент, который хотите сохранить.
• В правой панели найдите блок Export.
• Нажмите знак «+» и выберите PNG.
• При необходимости задайте масштаб: 1x, 2x, 3x и т. д.
• Нажмите Export и укажите папку на компьютере.

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

Как выбрать правильный масштаб и фон

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

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

Если у элемента прозрачный фон, PNG сохранит прозрачность. Это удобно для логотипов и иконок. Но если нужен белый или любой другой фон, добавьте под объект прямоугольник нужного цвета и отправьте его в нижний слой внутри фрейма. Иначе при экспорте фон останется пустым.

Экспорт нескольких объектов сразу

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

1. Выделите нужные элементы с зажатым Shift.
2. Либо поместите их в один фрейм, если они должны экспортироваться вместе.
3. Добавьте PNG в Export для каждого объекта, если нужно получить отдельные файлы.
4. Нажмите Export для всей группы или поочерёдно для каждого слоя.

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

Почему PNG может получиться неудачным

Даже если вы поняли, как сохранять в figma в png, итоговый файл не всегда выглядит идеально. Чаще всего мешают три причины:

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

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

Если коротко, как сохранять в figma в png: выделите нужный объект, добавьте PNG в Export, настройте масштаб и нажмите Export. Для точного результата заранее проверьте, что именно вы экспортируете, нужен ли прозрачный фон и не слишком ли велико изображение. Тогда PNG получится именно таким, как вы задумали, и его можно будет сразу использовать в макете, на сайте или в презентации.