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

Функция экспорта в 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».

Этому вопросу я посвятил видео, которое вы можете посмотреть ниже.

Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на вводный курс по UX/UI дизайну. Вы изучите начальный дизайн-процесс: работа в Figma, анализ информации, визуальная концепция, прототипирование и т.д. Ссылка на сайт курса.

Как сохранять в Фигме: форматы 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вы сохраняете файлы для разработки сайтов, то лучше называть их на английском языке. Например «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.

P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).

Как объединить вектор (в Figma или Illustrator) в один объект\слой?

Привет! Я создала котика в illustrator, у него множество отдельных векторных линий.

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

Это в Figma, при объединении через горячие клавиши cmd+E моя иллюстрация теряет цвета и заливается в один черный или при объединении отдельно в группе мелких линий и контура превращается во второй вариант где одни линии.

• Вопрос задан более двух лет назад
• 4162 просмотра

Комментировать
Решения вопроса 0
Ответы на вопрос 2

Так работают векторные изображения, не может у одного пути быть несколько разных заливок. Любая векторная картинка — набор объектов с разными свойствами. Если вы попытаетесь эти объекты слить в один, то и набор свойств у него окажется ровно один. В вашем случае — либо одинаковая заливка чёрным по всему объекту, либо отсутствие заливки и обводка.

Вам просто нужна группа объектов. Как её правильно экспортировать в один файл из фигмы, я написал в комментарии здесь.

Ответ написан более двух лет назад
Комментировать
Нравится 1 Комментировать

Степан Воеводин @melpnz Куратор тега Adobe Illustrator
UX/UI дизайнер

Чтобы слить линии — переведите их в кривые (Ctrl+Shift+O), а потом уже сливайте их вместе.
А вот оранжевые пятна придётся сливать отдельно.

Т.е. судя по вашей иллюстрации будет 3 объекта. Меньше уже точно никак.
После сохранения в SVG и открытия в illustrator, они будут лежать в одном слое, но 3 разных объекта

Дизайн в Фигме: как сделать векторное графическое изображение (формат SVG-файлы)

Навыки дизайна в редакторе Figma на примере практических уроков по созданию инфографики, я получала на курсе от Бек Five по созданию карточек для маркетплейсов, о чем вкратце рассказывала в одной из прошлых статей. Именно под руководством опытного наставника получилось научиться всем основным особенностям работы в Фигме. На курсе Бека я получила действительно очень много, и поэтому сейчас есть возможность понимать и на практике повторять и другие уроки, связанные с Figma, разного уровня трудности. Сложилось уверенное понимание, что чем больше практики в этой программе, тем проще и интереснее в ней становится работать. Первые недели долго привыкала ко всем инструментам Figma. А теперь хочется узнавать всё больше и больше, наращивать профессиональные навыки работы в этой программе. Поэтому я беру некоторые дополнительные уроки по Фигме и повторяю их по шагам. Это практичный и доступный каждому путь научиться сначала создавать по примеру, а потом, накопив опыт и знания, прийти к созданию собственного дизайна. Данная статья поможет сложить общее представление об уроке (что внутри и что надо делать), а также разложить для себя всё по полочкам и лучше усвоить урок. Что особенно важно тем, кто только начинает осваивать редактор Figma и из-за этого каждый шаг дается с трудом.

Пошаговый урок по созданию векторной картинки в Figma

Сегодня я взяла для примера урок Нины (ютуб-канал “Полутораметровый дизайнер”). Она подробно объясняет каждый шаг, что облегчает работу по созданию векторной картинки. Изначально рисунок кажется довольно сложным для исполнения. Он с различными повторяющимися узорами, многоцветный и с первого взгляда невозможно понять как его сделать.

Но благодаря подсказкам не только автора видео, но и самой Фигмы (направляющим, точным числам размеров и градусов углов) создается впечатление, что по инструкции собираешь конструктор. Только в данном случае получаешь дополнительные навыки дизайна в мощном по своим возможностям онлайн-редакторе.

Основные этапы создания векторной картинки в Фигме

1. Создание из кругов основного элемента картинки.
2. Дублирование элемента и объединение дубликатов в одно векторное изображение.
3. Работа с группами.
4. Работа с наложениями.
5. Создание подложки под картинку для сохранения цвета всех слоев при изменении фона..
6. Создание фона для фрейма.

Скриншоты урока, по которым можно примерно понять последовательность действий в уроке.

Рекомендации перед просмотром урока

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

У меня так и получилось. Примерно на середине видео, я сбилась и перестала понимать последовательность работы и пришлось начать всё заново. Десятки нюансов, которые важно делать в определенной последовательности вынуждают работать максимально сконцентрировано.

1. Сначала просто посмотрите урок без повторения, чтобы получить общее представление о ходе работы.
2. Внимательно повторяйте каждый шаг. В уроке много тонкостей и пропустив даже небольшой шаг дальше идти не будет иметь смысла, т.к. “свернете не туда”.
3. Выделите на урок достаточно времени. В зависимости от вашего опыта работы в Фигме на повторение «от и до» понадобится примерно 1-2 часа.
4. Повторите или хотя бы пересмотрите урок через какое-то время, чтобы освежить в памяти и закрепить полученные навыки.

Что применяется в уроке

Горячие клавиши

Горячие клавиши Figma, которые применяются в уроке

Названия горячих клавиш	Действие горячих клавиш
F	Создать фрейм
O	Создать эллипс (круг)
Alt + H	Выровнять элемент по горизонтальной линии
Alt + V	Выровнять элемент по вертикальной линии
Alt	Продублировать объект
Shift (при изменении размера элемента)	Пропорциональное увеличение/уменьшение
Alt + Shift	Продублировать объект и перетащить его в одной плоскости с оригиналом
Ctrl + E	Объединить несколько векторных элементов в один
B	Выбрать инструмент “Заливка”
Ctrl + X	Вырезать объект
Ctrl + V	Вставить объект
Enter	Включить/выключить режим редактирования векторных объектов
Shift (при повороте элемента)	Повернуть объект на 15 градусов
Shift + H	Отразить объект по горизонтали
Shift + V	Отразить объект по вертикали
Ctrl + G	Создать одну группу из нескольких объектов/групп
Ctrl + Alt + M	Создать маску

Инструменты Фигмы

Урок насыщен применением разных инструментов редактора Figma:

• режимы наложения,
• направляющие,
• градиенты,
• заливка,
• обводка,
• векторное редактирование,
• заливка векторного объекта,
• эффект тени,
• маска.

Плагин Noise

Noise — плагин для создания эффекта шума на картинке. Страница плагина в сообществе Фигмы: ссылка. Как его установить рассказывается в самом начале урока.

Что получилось сделать по уроку

Эта картинка интересна тем, что она может иметь много вариантов как по цветовым решениям, так и по узору, в зависимости от стадии готовности, на которой вы её сохраните.

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

Как в Фигме сохранять промежуточные этапы работы

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

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

Чтобы создать такой дубликат, надо выделить фрейм и нажать CTRL+ D. В этом случае вы сможете сделать разные варианты этой картинки на разных этапах проекта, сохранять их и продолжать работу дальше.

Основные выводы

Сделать картинку по инструкции получилось, но при этом не могу сказать, что это простой проект, т.к. в видео много тонкостей на каждом этапе создания картинки. Как минимум, один раз стоит повторить всё точно по уроку. А уже потом можно будет и покреативить, создав что-то новое на основе полученных знаний.

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

Также важно отметить то, что если однажды в Фигме вами что-то было сделано, то последовательность шагов и общее понимание того как создается тот или иной элемент дизайна останется с вами и почти гарантированно пригодится и в будущем.

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

А на этом пока всё. Надеюсь вам было интересно и полезно. Желаю вам удачи и успехов!

Понравилась статья? Поделись!

• Вконтакте
• Одноклассники

Плагин для Figma Color Compass: работа с цветовыми палитрами (+ 3 аналога) Составление понятного описания преимуществ товара для инфографики на маркетплейсе (Wildberries, Ozon)