Как сохранять в Figma: разбираем разные форматы и способы

Рассказываем, как сохранять и экспортировать файлы и проекты в Figma в разных форматах.

Как сохранить в Figma изображение в формате PNG или JPG

Работа с экспортом файлов из Figma осуществляется на правой панели в блоке Export. Чтобы увидеть параметры экспорта, нужно нажать на иконку «Плюс». Чтобы выбрать нужный формат экспорта, нужно кликнуть на поле с форматом и выбрать нужное значение в выпадающем списке. После этого надо нажать кнопку «Export».

По умолчанию выбирается формат выгрузки PNG. Источник: Figma

Первое поле — это масштаб выгружаемого изображения. Эта опция доступна только для растровых форматов JPG и PNG.

При экспорте можно настроить масштаб 0.5х, 1х, 2х и другие — это изменит размер итогового изображения. Источник: Figma

Второе поле Suffix заполнять не обязательно — это дескриптор, который будет добавлен к имени файла после экспорта. Его удобно использовать, чтобы упорядочить экспортированные ресурсы без необходимости изменять имя слоя. Например, если дизайнер экспортирует фрейм с надписью «HomePage» в формате PNG и вводит в поле Suffix текст «Драфт», имя экспортируемого файла будет «HomePageдрафт.png».

Если необходимо выгрузить макет сразу в нескольких масштабах, нужно ещё раз нажать на иконку «Плюс».

Figma автоматически добавит второй масштаб для выгрузки и задаст ему суффикс. Источник: Figma

Дизайнер может заранее посмотреть, как будет выглядеть макет после выгрузки. Для этого нужно перейти во вкладку «Preview». Если выбрано несколько объектов, параметр предварительного просмотра не отображается.

Опция позволяет увидеть, как будет выглядеть макет после экспорта, и «выловить» неточности: например, лишние элементы. Источник: Figma

Осваивать тонкости работы с Figma и другие профессиональные навыки можно самостоятельно, но комфортнее это делать при поддержке команды экспертов. Такой формат практикуют на курсе «Графический дизайнер» в Яндекс Практикуме. Начать учиться можно бесплатно, а оплатить весь девятимесячный курс — в рассрочку.

Зарабатывайте с помощью творчества — уметь рисовать не обязательно

Пройдите бесплатную вводную часть курса «Графический дизайнер», чтобы попробовать себя в профессии

Попробовать

Какой растровый формат лучше выбрать для экспорта

PNG — это растровый формат, который поддерживает сжатие без потери качества и прозрачность. PNG лучше всего использовать для экспорта изображений с прозрачностью, например полупрозрачных градиентов. Также этот формат подходит для графики, содержащей изображения и текст, например логотипы, диаграммы или иллюстрации. Важно помнить, что при экспорте в формате PNG файл будет большего размера, чем при экспорте в формате JPG.
JPG (или JPEG) — это растровый формат, который сжимает элементы с потерей качества. Сжатие с потерями уменьшает размер файла за счёт безвозвратного удаления данных, но снижает качество изображения. Файлы в формате JPG не поддерживают прозрачность, а сжатие может повлиять на читаемость любого текста. Если изображение содержит текст или прозрачность, лучше выбирать для экспорта форматы PNG или SVG.

Как сохранить в Figma SVG

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

Чтобы сохранить макет в SVG, нужно выбрать этот формат во вкладке экспорта.

При экспорте в формате SVG выбрать размер изображения не получится, так как SVG — векторный формат. Источник: Figma

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

Среди дополнительных параметров сохранения — Игнорировать перекрывающиеся слои, Включить ограничивающую рамку, Включить атрибут «id» и другие. Источник: Figma

Чтобы экспортировать сразу несколько объектов, надо их выделить, выбрать формат и нажать Export. В этом случае дизайнер получит не один файл, а несколько: на кнопке Export будет указано количество слоев, например «Export 3 layers». Figma сохранит их в одну папку.

При выгрузке нескольких объектов в PDF получим отдельные PDF-файлы. Источник: Figma

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

Включая и отключая чекбоксы объектов, можно гибко настраивать только нужные для экспорта объекты. Источник: Figma

Как сохранить в Figma файл PDF

В Figma есть функция выгрузки всех фреймов со страницы в формате PDF. Такой вариант будет удобен, например, для экспорта всех слайдов презентации. Чтобы выгрузить их в один PDF-файл, нужно зайти в главное меню в левом верхнем углу и выбрать File — Export frames to PDF.

В этом случае все существующие на странице фреймы будут выгружены в один PDF-файл. Источник: Figma

Как сохранить проект в Figma в формате FIG

Все проекты в Figma имеют расширение файла .fig. Чтобы сохранить проект в формате FIG, нужно зайти в главное меню в левом верхнем углу и выбрать File — Save local copy.

Источник: Figma

Совет эксперта

Ирина Бушуева

Не стоит забывать о разнообразии форматов экспорта, которые дает Figma. При выборе формата экспорта из Figma нужно в первую очередь учитывать качество изображения. Если в объекте есть прозрачность или градиент, лучше выгружать в PNG. При экспорте для печати лучше использовать PDF. Важно помнить, что выбор формата экспорта во многом зависит от цели, для которой создаётся файл.

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

Статью подготовили: