Какие форматы поддерживает figma

Импорт и экспорт форматов в Фигме. Конвертирование дизайн-макетов в разные форматы

Есть большой список программ в которых UI/UX дизайнеры создают макеты для сайта. Figma, Sketch, Adobe XD, Photoshop – это лишь небольшой список самых популярных из них. Каждое приложение имеет свои достоинства, которых нет у других. Поэтому иногда необходимо иметь возможность переместить дизайн-макет, сделанный в одной программе, для редактирования его в другой. В данной статье мы затронем способы конвертирования между форматами, в частности для Фигмы. Так как в свете последних событий это является наиболее актуальным.

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

Импортировать мы можем почти любые картинки, Sketch файлы и сами файлы Фигмы (.fig)

Экспортировать можно в PDF (но только фреймы, находящиеся в рутовой папке) – это нужно в основном для того, чтобы презентовать ваш макет.

Так-же фигма позволяет экспортировать в PNG и SVG выбранный набор элементов. Делается это через контекстное меню (ПКМ -> Copy/Past as)

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

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

Если стрелка входит в определенный формат, то это означает, что “исходящий” формат можно стандартными средствами преобразовать во “входящий”. К примеру файлы фотошопа (.psd) могут зачитываться при помощи Adobe Illustrator и Sketch. Или к примеру Фигма может зачитывать Sketch файлы.

Отдельно нужно сказать про EPS и SVG форматы. Они не имеют конкретной программы, которая их создает. Поэтому для них входящая стрелка означает, что “источник” умеет экспортировать в этот формат. К примеру, Sketch умеет экспортировать в формат EPS.

На основе данной диаграммы также можно сделать вывод, что все программы умеют импортировать SVG и почти все экспортировать. Поэтому его можно назвать самым удачным “промежуточным” форматом.

Для того чтобы сконвертировать Фигму в HTML есть 2 способа. Бесплатный и условно-бесплатный. Начнем со второго.

К условно-бесплатным способам можно отнести различный плагины или web-конвертеры, которыми вы можете воспользоваться, но только пока действует бесплатная пробная версия, дальше придется платить. Одним из примеров может быть AnimaApp.

Бесплатный способ более интересный (сложный). Состоит он в следующем -вам нужно экспортировать ваш дизайн-макет в PDF, с помощью стандартных средств Фигмы, после чего найти инструмент, для просмотра пдфника в вебе (Только не используйте стандартный просмотрщик, вам нужен ресурс, который преобразует ваш документ в HTML страничку. Например этот – PDF Viewer). Как можете видеть на картинке ниже, после импорта, ваш PDF превратился в HTML верстку.

После этого скачайте весь сайт при помощи Ctrl + S и вы получите файлы сайты. Теперь осталось дело за малым) Отделить HTML код вашего макета от остальной части скаченного сайта.

Есть вот такой плагин (Protoship Teleport), который позволяет экспортировать любую HTML страничку в Adobe XD файлы. Для этого вам нужно скачать расширение для Google Chrome, а также расширение для самого Adobe XD. Можно посмотреть на странице плагина. Вот так это выглядит:

Отдельное внимание нужно уделить следующему инструменту для экспорта дизайн-макетов в готовые проекты. С помощью данного приложения вы НЕ сможете преобразовать файл из одного дизайн формата в другой. Оно предназначено для конвертирования дизайн-макета в готовый интерактивный проект. Таким образом вы сможете создать дизайн в Figma, Sketch или др. Приложении и на основе него сделать готовую HTML страничку или Android приложение. При этом вы получите не сплошной HTML, а проект созданный c использованием фреймворка (Например с помощью React). Естественно звучит это все слишком хорошо, чтобы быть бесплатным.

Если вам нужен бесплатный рабочий способ, с помощью которого можно преобразовать дизайн из одного формата в другой, то конвертируйте в SVG, после чего вы можете использовать этот файл в любом редакторе. Минусы данного подхода очевидны – далеко не вся информация может быть сконвертированна (например древовидная структура).

Если же вам в первую очередь нужно качество и вы не готовы делать постобработку дизайн-макетов, то пользуйтесь платными плагинами.

Считаете ли вы SVG формат приемлемым для перемещения из одного редактора в другой ? Напишите об этом в комментариях.

Как быстро экспортировать векторную графику из Figma на сайт

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

Вводные данные

Figma поддерживает полноценную работу со следующими форматами изображений:

• JPG — самый популярный формат и для веб-разработчиков, и для дизайнеров. В нем сохраняют фотографии, растровые изображения, готовые макеты сайтов и многое другое.
• PNG — второй по популярности формат. В нем сохраняются преимущественно элементы с прозрачным фоном, а также некоторый вектор.
• SVG — популярный формат для экспорта векторных изображений — иконок, иллюстраций, элементов интерфейса и так далее. Чаще всего используется веб-разработчиками.
• PDF — используется в веб-разработке очень редко, в основном только в тех случаях, когда на сайт нужно, например, вставить презентацию или какое-то большое изображение.
• FIG — это встроенный формат Фигмы для сохранения рабочего проекта на компьютере с возможностью последующего редактирования.

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

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

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

Экспорт графики из Figma для сайта

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

Быстрый экспорт

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

• Изменить масштаб от изначальных значений оригинала. Изначально установлено значение 1X — это значит, что выбранные элементы будут сохраняться в размере 1 к 1. Вы можете уменьшить размер, выбрав значение меньше единицы или увеличить, выбрав соответствующий масштаб, например, 2X.
• Выбрать формат экспорта. По умолчанию стоит JPG, но в выпадающем списке можно выбрать любой другой, поддерживаемый Figma.

Закончив с настройками нажмите кнопку “Exporting page”. Изображения по умолчанию сохраняются в корневую папку вашего проекта с тем названием, которое установлено в панели слоев. Если нужно, чтобы изображение сохранялось в отдельную папку, то пропишите его название по такому шаблону: название_папки/название_изображения, например, icon/time_icon. В представленном примере изображение будет экспортировано в папку “icon” с названием “time_icon”.

Окошко экспорта графики в Figma

Дальнейшие варианты экспорта графики из шаблона в Figma на сайт будут рассматриваться на основе встроенного инструмента быстрого экспорта.

Когда можно и нужно экспортировать в JPG и PNG

Эти форматы стараются все реже использовать при верстке сайтов, так как они плохо поддаются масштабированию при изменении размеров экрана. Однако некоторые типы изображений добавить на сайт можно только в форматах JPG и PNG:

• Фотографии. Они могут быть фоном, иллюстрацией к тексту, аватаром пользователя, превью. Если прозрачного фона у них нет, то рекомендуется выполнить сохранение в формате JPG.
• Изображения с прозрачным фоном. Для них, вне зависимости от того, для чего они требуются в шаблоне, нужно использовать формат PNG.

Пример, когда необходим экспорт в PNG

Иллюстрации, нарисованные в векторе, и иконки настоятельно рекомендуется добавлять либо в виде SVG, либо специальных иконочных шрифтов. Дело в том, что их масштабирование критически важно для корректного отображения страницы, поэтому веб-мастера больше не добавляют их на сайт в виде PNG или JPG.

Что касается тех, изображений, которые экспортируются в виде растровых форматов, то их добавление на страницу самое простое — либо в качестве отдельного HTML-тэга, либо в виде фона у блока в свойствах CSS.

Экспорт векторной графики из Figma для сайта

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

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

Добавление иконок из Figma

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

Далее рассмотрим 4 возможных варианта переноса векторной графики из Figma в верстку сайта, в том числе и один с использованием невекторного формата PNG.

Способ 1: Вставить SVG как обычное изображение

Самый простой вариант, так как от вас потребуется только экспортировать изображение в SVG-формате в корневую папку сайта и добавить его с помощью тэга img в HTML-разметку.

Вот три примера вставки SVG в качестве обычного изображения в верстку:

Это очень простой вариант вставки напрямую, но подходит только для сравнительно несложных иконок, потому что:

• если вставлять иконку как SVG-код, то конечный код может получится очень и очень объемным — чем сложнее иконка, тем объемнее код;
• если иконка вставляется через тэг img или свойства CSS, то большинство ее характеристик нельзя менять.

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

Пример работы с SVG-иконкой в панели отладки

Способ 2: Добавление иконок в виде текстур

Единственный вариант, когда иконки из Figma можно экспортировать в PNG или JPG. Этот вариант рекомендуется использовать в тех случаях, когда возможности экспортировать SVG или добавить его в верстку не представляется возможным. Суть заключается в том, что вы создаете один общий файл с иконками, которые будут присутствовать на странице. В этом файле их нужно расположить на одинаковом расстоянии друг от друга, плюс, сделать одинакового размера.

Пример заготовки текстур иконок

Если в макете используется много разных иконок, то на подготовку может уйти немало времени. Однако сам код будет сравнительно небольшим, так как используется только класс для добавления иконки:

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

Способ 3: Использовать готовый сервис с иконками

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

Каталог иконок Eva Icons

У такого подхода есть много очень серьезных плюсов:

• все иконки из макета подключаются к сайту максимально легко;
• свойства иконок, например, цвет, очень легко можно изменить в CSS;
• запись в коде может занимать буквально одну строку.

Однако здесь есть пара серьезных минусов:

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

Способ 4: Самостоятельно преобразовать иконки в шрифт

Ничего сложного в этом нет, так как существуют специальные сервисы, преобразующие набор SVG-иконок в шрифт. Дальше от вас потребуется просто подключить полученный шрифт к верстке и работать с ним так, как вы работаете, например, с FontAwesome. Преобразовать SVG-файлы в иконочный шрифт можно с помощью сервиса icomoon. Он бесплатен.

Автоматическое преобразование SVG-иконок в шрифт

Из преимуществ такого подхода можно выделить:

• цвета иконок легко меняются через CSS-свойства;
• размер легко изменяется через свойство font-size, плюс, можно установить систему наследования размеров;
• HTML и CSS минимизируется, так как используется только один небольшой класс для добавления иконки, плюс, ссылка на подключение самого шрифта.

Из минусов можно отметить долгую подготовку исходных файлов для последующей конвертации в шрифт.

Импорт графики из Figma в HTML/CSS

Пока эта функция работает не совсем корректно, но позволяет сэкономить время на написании стилей и создании HTML-каркаса некоторых элементов интерфейса и дизайна. В самой Figma по умолчанию нет нужного инструментария, но его можно получить, добавив специальные плагины. К сожалению, они все платные, например, AnimaApp.

Главная страница AnimaApp

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

Заключение

Figma имеет удобный инструмент для импорта любой графики из рабочего шаблона, в том числе и векторной в SVG-формате. SVG же можно без проблем использовать как в верстке (в чистом виде или преобразованном), так и для открытия в других редакторах, если в этом возникнет необходимость. Также из Figma легко экспортировать растровую графику в JPG и PNG форматах.

Как сохранять в Фигме: форматы JPG, PNG, PDF, SVG, FIG

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

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

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

Быстрая инструкция по экспорту файлов в Фигме

Любое изображение, картинку, фото, фрейм, макет, файл или проект целиком можно экспортировать с помощью функции экспорта. Выберите нужный элемент и нажмите напротив надписи «Export» иконку «+». После этого вы сможете выбрать нужный формат.

Нажав на надпись «Prewie» вы можете сделать предварительный просмотр экспортируемого элемента. Чтобы сохранить элемент на компьютер нажмите на кнопку «Export НАЗВАНИЕ ВЫБРАННОГО ЭЛЕМЕНТА».

Изменение масштаба экспортируемых файлов

Если хотите сохранить проект размерами в 2 раза меньше, то стоит выбрать другой масштаб. Изначально стоит 1X — это значит, что ваш проект будет сохранятся один к одному.

Если для макета размерами 1920 x 1000 px, поставить значение 0.5X, то масштаб сохраненного файла будет в два раза меньше (960 x 500 px). Аналогично объект увеличится в 2 раза, если поставить 2X.

Сохранить проект или картинку в Figma в формате JPG

Формат JPG — это растровый формат. Элементы сохраняются с расширением «.jpg».

Формат JPG подходит для сохранения:

• Фото.
• Картинок.
• Изображений.
• Дизайн макетов.

Инструкция по экспорту из Figma в JPG на компьютер:

Чтобы сохранить любой объект, проект или дизайн макет в Figma выделите его. К примеру возьмем первый экран Landing Page. В правой панели нажмите на иконку плюсика напротив надписи «Export». Выберите из списка формат JPG. После этого нажмите на кнопку экспорта и выберите место для сохранения на компьютере.

Сохранение из фигмы файлов в формате PNG

PNG — это растровый формат изображений. Отличие PNG от JPG состоит в том, что этот формат подходит для сохранения изображений с прозрачным фоном.

Инструкция как сохранять в фигме в PNG на компьютер:

Выберите изображение или картинку для экспорта. Для наглядности возьмем изображение женщины, которая расположена в круге. Нажмите плюс рядом с надписью «Export» в правой панели и выберите формат PNG из списка.

Если нажмем на экспорт и сделаем предпросмотр нажав на надпись «Prewie», то будет видно, что вокруг изображения появился фон в виде шахматной доски. Это означает прозрачность.

Экспорт в формате SVG

SVG — это векторный формат изображений. Векторный формат отличается от растрового, тем, что в нем нет пикселей. Если вы увеличите JPG или PNG, то будет появляться зернистость в виде пикселей. С форматом SVG этого не происходит.

В дальнейшем вы сможете редактировать эти изображения в других графических редакторах, таких как Adobe Illustrator, Inkscape, Affinity Designer, Inscape и других.

Формат SVG подходит, если нужно сохранить:

• Иконки.
• Простые фигуры созданные в Figma с помощью инструментов «Shape tools» (прямоугольники, круги, линии, многоугольники)
• Иллюстрации.
• Элементы созданные с помощью пера или карандаша в фигме.

Как сохранять в фигме в SVG:

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

Как сохранить в Фигме в формате PDF

PDF подходит для экспорта различных документов или презентаций.

Чтобы сохранить элементы из фигмы в формате PDF есть 2 варианта — экспортировать каждый элемент отдельно, либо создать 1 файл с множеством страниц. Рассмотрим каждый из этих вариантов по отдельности.

Экспорт из фигмы в PDF с множеством страниц.

Формат PDF подходит если вы хотите создать:

• Презентацию.
• Какой-либо документ в формате A4.
• Книгу.
• Брошюру.
• Маркетинг кит.
• Коммерческое предложение.

Пошаговая инструкция по созданию PDF файлов:

Для примера экспортируем несколько моих работ и создадим небольшое портфолио (подойдет для отправки заказчику).

1. Чтобы сделать экспорт в PDF с множеством страниц нажмите на меню «гамбургер» слева, сверху.
2. Выберите «File» —> «Export Frames to PDF» и сохраните на рабочий стол.

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

Экспорт в PDF выбранных элементов:

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

Как сохранить проект в Фигме в формате FIG (внутренний формат)

Чтобы сохранить файл во внутреннем формате фигмы с расширением «.fig» сверху нажмите на вкладку «File» и выберите пункт «Save As .fig…».

Импорт файлов в Figma в формате «.fig»

Файл в формате «.fig» можно загрузить в фигму, если перейти во все ваши проекты раздел «Drafts» и перетащить к остальным проектам. Также есть иконка «Import» сверху, справа.

Массовый экспорт из Figma

Если у многих элементов уже был нажат плюсик экспорта, то можно массово их экспортировать нажав на сочетание горячих 3 клавиш «Ctrl + Shift + E». Появится специальное окно экспорта.

Как называть файлы, чтобы сохранить их в разные папки при экспорте

Если вы сохраняете файлы для разработки сайтов, то лучше называть их на английском языке. Например «Woman», «Illustration» и т.д.

Если хотите сохранить файл в отдельную папку то переименуйте слой следующим образом:

• 1/Wooman
• 2/Landing Page
• 3/Illustration

Файлы сохранятся в отдельные папки на вашем компьютере с названиями «1», «2», «3».

Далее поговорим о форматах и для каких элементов они подходят.

Важное дополнение:

Если вы хотите передать макет вашему заказчику, то нет необходимости сохранять всё на компьютер и отправлять (это прошлый век). Проще поделиться ссылкой на ваш проект. Это можно сделать нажав на кнопку сверху, справа «Share» (1) и скопировав ссылку (2).

Также можно поделиться вашим проектом в режиме презентации. Для этого нажмите на иконку «Play», сверху, справа. Затем нажмите на кнопку «Share prototype» и скопируйте ссылку нажав на «Copy link»

P.S. В этой статье вы узнали о том, как сохранять файлы в Figma в различных форматах.

Хотите получить бонусный урок быстрому созданию дизайн макетов Landing Page в Figma? Жмите на эту ссылку и получите 24 раздела для прототипирования и дизайна Landing Page в Figma.

Функция экспорта в Figma

Список доступных форматов для экспорта, как лучше экспортировать проект для верстки, или клиента. Как оптимизировать файлы. Все это вы найдете в данной статей.

Основные вопросы:

Как делать в Figma экспорт элементов или групп? Какие виды объектов можно экспортировать в figma и как сохранить в фигме работу?

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

Экспорт в JPG

Экспорт макет в формат изображения JPG является самым популярным. В настройках экспорт вы можете управлять масштабом экспорта, добавлять суффиксы к имени, он будет вписан после имени файла, а также если вы хотите экспортировать несколько версий макетов (версия для клиента, для портфолио, для behance), то просто нажмите на знак плюса и настройте нужные опции.

Экспорт в PDF

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

Но у этого формата есть особенности экспорта:

1. Вы можете выделять текст, который набран в макете;
2. Все векторные объекты прорисовываются идеально независимо от масштаба приближения.

Казалось бы преимущества очевидны, но на практике, лично я еще ни разу не сталкивался с просьбой предоставить макет в формате PDF.

Экспорт в PSD

Очень частый вопрос: как открыть psd в Figma, или как загрузить psd в Figma? К сожалению, в Figma не предусмотрен экспорт в программу Adobe Photoshop. Так как фотошоп более сложная программа, то и интерпретатор для него будет сложно написать. Поэтому разработчики, по моему мнению, просто не хотят тратить время на разработку данного решения. Да оно и не нужно особо, так как все больше людей переходит на специализированный для веб-дизайна софт.

Экспорт в SVG

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

Экспорт в HTML

Функции экспорта в html в программе Figma нет. Но есть подсказки для верстальщика в виде свойств каждого объекта. Они находятся в левой вкладке «Code». Здесь вы получите полный список CSS свойств для верстки сайта, а также параметры для разработчиков на iOS и Android.

Один из вопросов, который волнует начинающих пользователей: как сохранить проект в фигма?

Сохранение проекта в Figma происходит с помощью экспорта файла с расширением «.fig». Для этого нужно в главном меню выбрать пункт «Save as».