Импорт и экспорт форматов в Фигме. Конвертирование дизайн-макетов в разные форматы
Есть большой список программ в которых 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 формат приемлемым для перемещения из одного редактора в другой ? Напишите об этом в комментариях.
Convert & Import your Figma designs into Adobe Illustrator
Seamlessly convert your Figma files to Illustrator. Focus on being productive instead of messing around with file formats.
Stop wasting your time fixing SVG or PDF import issues
Our software converts all elements seamlessly one by one to assure 100% compatibility.
Start designing vector graphics in Figma
By using our tool you can easily move your Figma designs back into Adobe Illustrator.
Get ready-to-use, flawlessly converted files
Untouched path elements
Path elements get converted seamlessly. Each icon, shape or path element will remain the same.
Maintain your folder structure
We convert your folders including names and nested structures.
100% visually accurate
All elements will automatically converted in seconds. Your Figma designs will be converted flawlessly into Illustrator.
How Do I Convert a Figma File to Illustrator?
There are a few reasons you might want to convert a Figma file to Illustrator. Maybe you’re trying to open a Figma file in older software that doesn’t support .fig files, or maybe you’re collaborating with someone who only uses Illustrator.
Whatever the reason, converting from Figma to AI is easy to do. Here’s how:
First, open your Figma file in the desktop app. Then, go to File > Export > Export As.. and select .ai from the drop-down menu.
When the export window pops up, make sure to select All Frames from the Export range drop-down menu. Then click Export.
Your file will now be exported as an AI file that you can open in Adobe Illustrator.
There you have it! Now you know how to convert a Figma file to Illustrator in just a few steps.
8 Related Question Answers Found
How Do I Import a Figma File Into Illustrator?
How Do I Convert Figma to Illustrator?
Can I Export Figma File to Illustrator?
How Do You Convert Figma to Illustrator?
Can I Export Figma to Illustrator?
Can You Export From Figma to Illustrator?
How Do I Export From Figma to Illustrator?
How Do I Convert an Illustrator File to Figma?
Drew Clemente
Devops & Sysadmin engineer. I basically build infrastructure online.
About us
When we started our online journey we did not have a clue about coding or building web pages, probably just like you.
All we wanted to do is create a website for our offline business, but the daunting task wasn’t a breeze. After months and years of trying out CMS’s and different website creators, we became experts in creating these, and wanted to share our knowledge with the world using this site.
We now review dozens of web related services (including domain registrars, hosting providers and much more), and write in-depth guides about site creation, coding and blogging.
КАК ИЗ ФИГМЫ ПЕРЕНЕСТИ В ИЛЛЮСТРАТОР
Перенос дизайнов из Figma в Illustrator может быть полезным, если вы хотите добавить к ним некоторые новые элементы, обработать или настроить их более точно, либо вы хотите связать свой дизайн Figma с другими дизайнами, созданными в Illustrator. Существует несколько способов перенести векторные объекты из Figma в Illustrator, но самый простой способ — это экспортировать файл из Figma в формате SVG.
Для экспорта Figma файлов в SVG, выберите нужный фрейм или объект, затем выберите меню File > Export. Выберите в качестве формата экспорта SVG и выберете настройки SVG. Затем сохраните файл в нужном месте на вашем компьютере.
Откройте Illustrator и выберите меню File > Open. В диалоговом окне выберите сохраненный вами файл SVG и нажмите на кнопку Открыть. Векторные объекты из Figma будут отображены в Illustrator. Хорошо перенести объекты из Figma в иллюстратор можно только в том случае, если они были созданы в векторном формате в Figma.
Перед сохранением SVG из Figma рекомендуется убедиться, что векторные объекты, которые вы экспортируете, хорошо масштабируются. Это может быть достигнуто путем использования настроек панели Scale от Figma. Также не все эффекты, стили и градиенты фигмы, которые используются в дизайне, смогут быть перенесены в Illustrator. Иногда вам придется настроить все элементы вручную.
Сделаем с нуля ДИЗАЙН САЙТА за 10 минут // Веб-дизайн в FIGMA
How to Fix SVG export from Illustrator CC distorts paths (import to Figma)