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

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

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

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

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

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

Экспорт в JPG

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

Экспорт JPG в Figma

Экспорт в PDF

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

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

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

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

Экспорт в PSD

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

Экспорт в SVG

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

Экспорт в HTML

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

Подсказки для разработчиков в Figma

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

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

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

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

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

JPG — самый популярный формат. Подходит для сохранения любых изображений, фотографий, макетов и т.д.
PNG — формат подходит для картинок с прозрачным фоном.
SVG — векторный формат. Подходит для экспорта иконок, иллюстраций, логотипов и т.д.
PDF — если нужно создать какой-либо документ или презентацию.
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 файлов:

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

Чтобы сделать экспорт в PDF с множеством страниц нажмите на меню «гамбургер» слева, сверху.
Выберите «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», «2», «3».

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

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

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

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

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

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

Сохранение файла Figma

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

Что нужно знать о сохранении файлов Figma?

Что нужно знать о сохранении файлов Figma?

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

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

Сохранение файла на компьютере

Сохранение проекта на компьютере, с расширением .fig:

Откройте программу Figma на компьютере или в браузере
Нарисуйте что-нибудь
Перейдите в Меню > File > Save as .fig (смотри изображение в начале этого урока)
Сохраните файл с нужным вам именем

Как экспортировать в Фигме

Фигма предусматривает по умолчанию экспорт в несколько форматов: PNG, SVG, JPG, PDF

Как экспортировать

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

Панель экспорта

Выбор параметров экспорта

Видео: экспорт в Figma

Тег video не поддерживается вашим браузером

Как экспортировать элементы в один слой

За один слой Figma считает группу или фрейм. Если у вас есть несколько элементов и вы хотите, чтобы они экспортировались как одно изображение (например PNG), объедините их в одну группу (cmnd + G).

Если вы выделите несколько отдельных элементов, они экспортируются как разные файлы

Вы можете экспортировать элементы сразу в нескольких расширениях — для этого в разделе Export нажмите еще раз «+» и укажите дополнительные форматы. То есть вы можете выгрузить изображения сразу как svg и png, и в любых других комбинациях.

Как указать разрешение

В окне разрешения вы можете либо указать кратность — 1X, 2X и т.п. Это значение, на которое будет умножено фактическое разрешение сторон экспортируемой группы/фрейма/элемента.

Либо вы можете указать ширину стороны — высоты или длины. 512w — означает ширину 512 пикселей, 512h — высоту. Вы можете указывать свои значения, либо выбрать из предустановленных вариантов.

Презентация

Вы можете демонстрировать результаты своей работы, используя режим презентации. Подробнее об этом читайте в этой статье.

Экспорт области экрана

Если вам требуется экспортировать только часть вашего проекта (по действию похоже на «Ножницы» в Windows и скриншот части экрана в Mac), воспользуйтесь инструментом Slice. Подробнее читайте здесь.

Сохранение файла проекта

Вы также можете сохранить весь файл на локальный диск, об этом читайте здесь.

Как экспортировать дизайн в PDF в Figma

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

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

Как экспортировать в PDF в Figma на ПК

Вы можете использовать несколько методов для экспорта в PDF в Figma, в зависимости от эффекта, которого вы хотите добиться.

Первый — сделать это через вкладку свойств:

Выберите слои, которые вы хотите экспортировать. Если вы хотите экспортировать их все, снимите с них выделение.
Перейдите на панель “Свойства”.
Выберите “PDF” в разделе “Экспорт.”
Экспортируйте файл в предпочтительном name.

Сделав это, вы создадите отдельный файл PDF для каждого экспортированного вами слоя.

Если вы хотите экспортировать все кадры в один файл PDF, вы можете сделать это через меню «Файл». В этом случае каждый кадр будет отдельной страницей в PDF в том же порядке, что и в Figma. Чтобы использовать этот метод, выполните следующие действия:

Когда вы закончите работу над дизайном, коснитесь логотипа Figma в левом верхнем углу, чтобы открыть Меню «Файл».
Нажмите “Экспорт кадров в PDF”

Если вы хотите перемещать кадры или настраивать качество перед экспортом, мы рекомендуем установить расширение под названием TinyImage Compression:

Откройте Figma и перейдите на вкладку просмотра. .
Нажмите “Сообщество”
Тип “TinyImage Compressor” в строке поиска и выберите “Плагины”
Нажмите “Установить”
Установив его, выберите кадры, которые хотите экспортировать, и убедитесь, что “PDF” выбран на вкладке свойств справа.
Нажмите “Плагины” и выберите “TinyImage Compressor” или щелкните правой кнопкой мыши в любом месте холста и нажмите “Плагины”
Настройте качество файла, изменив его размер, и нажмите “Создать PDF-файл”
Настройте рамки’ положение путем перетаскивания. Вы также можете назначить пароль для файла PDF.
Нажмите “Экспорт кадров в объединенный PDF”

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

Если вы хотите экспортировать в PDF лишь несколько элементов с вашего холста или ваш холст загроможден, есть еще один метод, который вы можете использовать.

Этот процесс проще для пользователей Mac, так как у них есть инструменты из Доступен предварительный просмотр, позволяющий работать с файлами PDF без установки других программ:

Выберите слои, которые хотите экспортировать.
На вкладке “Свойства” выберите убедитесь, что “PDF” выбран в разделе “Экспорт”
Нажмите “Экспортировать [количество] слоев”

Можно ли экспортировать в PDF в Figma на iPhone?

У Figma есть мобильная версия под названием «Зеркало Figma». Это приложение позволяет вам просматривать свои проекты на реальном устройстве и отслеживать изменения. Вам нужно только войти в систему с тем же именем пользователя и паролем, чтобы получить доступ к проектам, которые вы открыли на своем рабочем столе.

Хотя это отличный способ отслеживать ваши успехи, Figma Mirror не позволяет вам редактировать дизайн через телефон. Это означает, что нет возможности экспортировать дизайн в PDF с помощью iPhone. Если вы хотите, чтобы файл был экспортирован в PDF, вам нужно будет сделать это через настольное приложение, а затем отправить его на свой телефон.

Можно ли экспортировать в PDF в Figma на устройстве Android?

Опять же, экспорт в PDF напрямую с телефона невозможен. «Зеркало Figma” это мобильная версия Figma. Приложение позволяет просматривать дизайны на телефоне, работая над ними в настольном приложении. Всякий раз, когда вы вносите изменения в свои проекты, вы можете видеть, что изменения происходят на вашем устройстве Android.

Экспорт в PDF в Figma — это не загадка

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

Как экспортировать в PDF в Figma? Используете ли вы один из вышеперечисленных методов? Расскажите нам в разделе комментариев ниже.