Импорт и экспорт форматов в Фигме. Конвертирование дизайн-макетов в разные форматы
Есть большой список программ в которых 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. Можно посмотреть на странице плагина. Вот так это выглядит:
Export Kit
Отдельное внимание нужно уделить следующему инструменту для экспорта дизайн-макетов в готовые проекты. С помощью данного приложения вы НЕ сможете преобразовать файл из одного дизайн формата в другой. Оно предназначено для конвертирования дизайн-макета в готовый интерактивный проект. Таким образом вы сможете создать дизайн в Figma, Sketch или др. Приложении и на основе него сделать готовую HTML страничку или Android приложение. При этом вы получите не сплошной HTML, а проект созданный c использованием фреймворка (Например с помощью React). Естественно звучит это все слишком хорошо, чтобы быть бесплатным.
Если вам нужен бесплатный рабочий способ, с помощью которого можно преобразовать дизайн из одного формата в другой, то конвертируйте в SVG, после чего вы можете использовать этот файл в любом редакторе. Минусы данного подхода очевидны – далеко не вся информация может быть сконвертированна (например древовидная структура).
Если же вам в первую очередь нужно качество и вы не готовы делать постобработку дизайн-макетов, то пользуйтесь платными плагинами.
Считаете ли вы SVG формат приемлемым для перемещения из одного редактора в другой ? Напишите об этом в комментариях.
Ссылка — на цикл статей по Фигме.
Convert & Import your Figma designs into Adobe Illustrator
Convert Figma files without any extra work 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.
28 Figma-плагинов для экспорта, импорта и конвертации дизайна в разные форматы файлов, в код и из кода, в прототипы и готовые сайты, в полезные сторонние сервисы
В Figma Community есть плагины, которые помогают быстро настроить экспорт макетов из Figma в популярные сервисы для прототирования и создания готовых сайтов. Вы легко сможете конвертировать отдельные элементы дизайна (шрифты, изображения, иконки) в необходимые форматы и код. Также с помощью плагинов можно импортировать в Figma любой понравившийся сайт в виде редактируемого макета
Дарья Райт
Ведущий редактор в «Оди»
Default export — настройка общих параметров экспорта для всех выбранных элементов
Export Original Images — экспорт картинок из макетов в оригинальном разрешении и без обрезки
html.to.design — конвертирует живые сайты в редактируемый макет Figma
Anima — конвертирует макеты в интерактивные анимированные прототипы или HTML-код
Convertify Sketch/XD/AE/EPS — импортирует макеты из XD в Figma, а также экспортирует проекты в After Effects, Sketch, Adobe XD и EPS
Figma to HTML — конвертирует выбранные элементы в HTML
Export Image for Native — экспортирует изображения в форматах, необходимых для Android или iOS
TinyImage Compressor — сжимает экспортируемые из Figma изображения до 90% без потери качества и упаковывает в архив
SVG Export — экспорт в вектор с более гибкими настройками, чем стандартный
Design Tokens — экспортирует стили Figma и дизайн-токены в json-файл и загружает на Github
Export PNG with Color Profile — экспорт в PNG со встроенным цветовым профилем (включая Display P3)
Export Icon Font — экспортирует векторный шрифт в формат TrueType (.ttf)
JSON to Figma — импортирует значения переменных из JSON-файла прямо в макет (и обратно). Поможет ускорить создание однотипных компонентов с разными данными
Export Settings Helper — создаёт настройки экспорта со стандартными параметрами для iOS, Android и веба
Pygma — плагин для экспорта в сервис публикации сайтов. То есть прямо из Figma в готовый адаптивный сайт за несколько кликов
Awesome Icon Export — экспортирует иконки в любой текстовый формат файла
Favvy Favicon Exporter — автоматически генерирует и экспортирует готовые иконки (включая весь необходимый код) для вашего сайта из одного фрейма Figma за считанные секунды
iOS Export Settings — автоматически применяет правильные настройки экспорта iOS иконок
Marka Email Generator — конструктор писем для email-рассылок в формате HTML. Готовые письма поддерживают Gmail, Apple Mail, Outlook и другие клиенты. Также доступна мини-инструкция и шаблоны от разработчика
ProtoPie — экспорт проекта из Figma в ProtoPie
Miro — экспортирует и синхронизирует данные из Miro
Jitter — экспорт проекта в сервис интерфейсной анимации Jitter
Bravorizer — экспортирует дизайн в no-code конструктор мобильных приложений Bravo. Проверяет фреймы на готовность к экспорту, а также позволяет добавлять теги к страницам, фреймам или компонентам
Zeplin — экспортирует макеты в Zeplin
Illustrator + SVG Import — исправляет ошибки при импорте SVG из Illustrator, и добавляет перенос через буфер обмена
Overflow for Figma — синхронизирует проекты с платформой для прототипирования Overflow, которая позволяет создавать диаграммы и кликабельные презентации
Overflow for Figma
Похожее:
Экспорт fig в XD (или как проще перегнать макет фигмы в After)?
Никто не знает способа, как корректно перенести макеты ui из фиги в афтер?
Чтобы соответственно элементы сохранились? Черех XD?
Или еще как-то?
- Вопрос задан более трёх лет назад
- 5331 просмотр
Комментировать
Решения вопроса 1
Михаил Проскурин @mixail_fet
Дизайнер веб-интерфейсов
Самый быстрый способ, это выделить все слои в Figma, нажать правок кнопкой мыши -> copy as -> copy as svg и в открытом окне Adobe XD, нажать CTRL + V. Проблема лишь в том, что все шрифты переведутся в вектор, и их нужно будет переносить вручную. С другой стороны, мы не часто, создавая анимацию, редактируем текст.
Ответ написан более трёх лет назад
Нравится 3 4 комментария