Кроссплатформенный графический редактор Figma широко используется и проджект-менеджерами, и маркетологами, и разработчиками для создания дизайнов. Благодаря возможностям программы, можно не только создавать проекты и хранить их в собственном облаке, но и совместно работать над файлами в онлайн-режиме или скачивать их на любое устройство. О том, как сохранять из Фигмы любые форматы изображений и файлов, и пойдет речь ниже.

Экспорт: быстрая инструкция

Любой макет или изображение из Figma можно сохранить на ПК буквально за 2 щелчка мыши. Для этого здесь предусмотрена специальная функция Export. Чтобы ей воспользоваться, выберите элемент или весь проект, который хотите сохранить, кликнув по нему правой кнопкой мыши. В правой части экрана появится меню, в самом низу которого есть кнопка экспорт. Она выглядит как «Export НАЗВАНИЕ ВЫБРАННОГО ЭЛЕМЕНТА».

Сразу под кнопкой «Export» имеется и меню предпросмотра. Нажав на нее, вы можете оценить, как будет выглядеть выбранный объект, до сохранения и, при необходимости, отредактировать его.

Возможности редактора позволяют сохранить картинки из Фигмы с изменением масштаба. Для этого под кнопкой экспорта нажмите выпадающее меню, где по умолчанию стоит 1Х. Если его не изменить, то объект сохранится в масштабе 1 к 1. Значение 2Х соответственно увеличит изображение в 2 раза, а 0,5Х — уменьшит.

Сохраняем файлы в формате JPG

Формат jpg подходит для экспорта любых изображений, макетов и фото из редактора на ПК. Чтобы выбрать разрешение .jpg для сохранения своего объекта, необходимо:

• выделить нужный элемент или проект полностью;
• в правом меню нажать на блок Export;
• выбрать из выпадающего списка форматов .jpg;
• установить масштаб;
• нажать кнопку «Export НАЗВАНИЕ ОБЪЕКТА».

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

Как экспортировать из Фигмы файл PNG?

Если формат JPG больше подходит для изображений со сложными переходами цветов, то для картинок с прозрачным фоном предпочтительней выбирать разрешение .png. Он эффективней сжимает изображения без потери качества.

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

Кроме того, перед сохранением можно настроить прозрачность фона. Для этого в правом меню в настройках экспорта нажмите на кнопку «Background» и выберите параметр «None». Убрать заливку можно и через меню свойств выделенного объекта, нажав на вкладку «Fill».

Сохраняем векторный файл

Векторные изображения не имеют пикселей и используются для дальнейшей обработки в других редакторах. Такой формат имеет разрешение .svg. Чаще всего в нем сохраняют созданные в Фигме с помощью встроенных инструментов простые фигуры и элементы, нарисованные с применением пера и карандаша. Для сохранения в этом формате выберите .svg в меню экспорт и укажите путь для файла на ПК.

Экспорт многостраничного документа

Коммерческие предложения, брошюры, объемные макеты и даже презентации или портфолио, созданные с помощью Figma, удобней всего просматривать в формате .pdf. Перед тем, как выгрузить из Фигмы многостраничный документ, необходимо:

• открыть меню в левом верхнем углу;
• нажать на кнопку «File»;
• выбрать команду «Export Frames to PDF»;
• указать путь для сохранения файла.

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

Другие возможности меню «File»

Меню «File» имеет расширенный функционал. Так, вы можете экспортировать макеты в формате HTML и CSS для дальнейшей работы с кодом. Для этого в Figma используется плагин Anima.

Если вы хотите продолжить работу над проектом или отдельными изображениями в редакторе Photoshop, необходимо сохранить файлы в формате .psd. Для этого воспользуйтесь «родным» для Фигмы форматом .fig и экспортируйте нужные элементы на компьютер при помощи команды «Save local copy». Когда экспорт будет завершен, воспользуйтесь онлайн-сервисом для конвертации, например Photopea.

Массовый экспорт из Фигмы

Для того чтобы скачать масштабный проект из множества изображений, наведите порядок в слоях. Возможности редактора позволяют сохранять отдельные элементы в собственные папки. Для этого нужно переименовать каждый объект и через слэш / указать номер или название папки. Соответственно, объект с названием 1/Taptop будет сохранен в папку 1 под названием Taptop в указанном вами формате. Для массового экспорта выделите нужные элементы в левом меню, а справа нажмите на кнопку «экспорт».

Сохранить большое количество выделенных элементов можно с помощью горячих клавиш: меню экспорта откроет последовательное нажатие на Ctrl + Shift + E.

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