обновления

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

14.12.2023

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подсказки

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


Импорт уже доступен в редакторе, попробуйте!
Понравилось обновление?
Всегда будем рады видеть вас в нашем сервисе!
Перейдите в личный кабинет или зарегистрируйтесь, чтобы попробовать все возможности mottor.
Попробовать бесплатно
Мы регулярно обновляем наш сервис, чтобы он был ещё лучше
и удобнее для наших пользователей.
Подпишитесь на соцсети:
бесплатный конструктор сайтов, лендингов и квизов
Документы:
Функциональность:
Функциональность:
О компании:
при поддержке Фонда Развития Интернет Инициатив
бесплатный конструктор сайтов, лендингов и квизов
Бесплатный звонок по России
support@lpmotor.ru
О компании и сервисе
Тур по сервису
Договор-оферта
Партнёрская программа
Шаблоны
Согласие
Тарифы и услуги
Политика конфиденциальности
Сделано на mottor
Инструкция по установке