обновления

Импорт сайта из Figma

14.12.2023

Если вы сначала собираете макет сайта в Figma, а затем переносите его в редактор сайта вручную, то мы подготовили функционал, который ускорит сбоку сайта в сотни раз

Теперь вы можете просто импортировать макет из Figma в Mottor: система сама разберёт контент вашего макета и создаст необходимые блоки в редакторе

Мы постарались учесть все основные кейсы и добавили распознание векторных и растровых картинок, а также кнопок

Вы можете импортировать desktop-версию вашего сайта, и сделать это двумя способами:

секции по отдельности
или весь сайт целиком

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

Подробнее

Все стили передаются в редактор?

Система старается полностью забрать все стили элементов из Figma, чтобы вы максимально сэкономили время на последующей доработке сайта:

сложные стили элементов
слои и порядок элементов
автоматическое распозначание кнопок и картинок

Как импортировать макет?

Добавьте на сайт пустую Свободную секцию. В ней вы увидите кнопку “Импорт из Figma”. Нажмите на неё и откроется окно импорта

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

Скопируйте его и вставьте в окно импорта. Если всё верно, то появится второе поле для вставки ссылки на фрейм ↓

Выберите фрейм в Figma, который вы хотите импортировать и вставьте ссылку на него во второе поле формы

Если всё сделано верно, то система обработает макет и перезагрузит редактор сайта. После перезагрузки в редакторе появится контент в виде блоков mottor

Если возникли проблемы

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

Просто укажите необходимые параметры и продолжите импорт

Могу ли я управлять импортом?

При необходимости вы можете задать тип импорта для конкретного элемента или группы в Figma. Для этого укажите в названии элемента одно из таких ключевых слов:

IMAGE - импортирует элемент или группу в виде растровой картинки
SVG - импортирует элемент или группу в виде векторной картинки
BUTTON - импортирует группу с текстом и фигурой в готовую Кнопку