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

от admin

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

Как сохранить в Figma изображение в формате PNG или JPGКакой растровый формат лучше выбрать для экспортаКак сохранить в Figma SVGКак сохранить в Figma файл PDFКак сохранить проект в Figma в формате FIGСовет эксперта

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

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

Освойте профессию графического дизайнера за 9 месяцев
Сделаете 8 проектов для портфолио, освоите Adobe Illustrator и Figma, научитесь делать простые анимации и сможете брать заказы сразу после курса.Начать учиться бесплатно

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читать:
Что такое генеративный дизайн: преимущества и недостатки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник: Figma

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

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

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

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

Похожие публикации