← Назад

Редактор

Импорт элементов
из Figma

Сложность ∙ Легко

В этой инструкции мы расскажем, как импортировать фреймы из Figma напрямую
в редактор.

Несколько важных моментов:

• Один фрейм в Figma импортируется в виде одной секции. Если фрейм большой, рекомендуем разделить его на несколько отдельных фреймов для корректного переноса.

• Нельзя импортировать фрейм шириной больше 1440px.

• Рекомендуется использовать одинаковую ширину для сайта и фреймов.

• Убедитесь, что шрифт, используемый в макете Figma, подключен к сайту с помощью инструкции.

• Размеры импортируемых фреймов и групп должны соответствовать ширине страницы, заданной в ее настройках:

I. Получение токена

В Figma кликните по иконке вашего аккаунта и перейдите в настройки "Settings":

• Во вкладке "Security" найдите пункт "Personal access token" и нажмите "Generate new token":

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

• В подразделе "Scopes" у всех параметров установите значение "Read-only", нажмите "Generate token":

• В подразделе "Scopes" у всех параметров установите значение
"Read-only", нажмите "Generate token":

Сгенерированный токен вы увидите в том же разделе "Personal access token":

Скопируйте этот токен или не закрывайте эту страницу, токен понадобится вам позже.

II. Получение ссылки на фрейм

Выгрузка работает по принципу: 1 фрейм фигмы = 1 свободная секция редактора mottor.

• Выделите нужные элементы для одного фрейма в Figma, кликните по ним правой кнопкой мыши, выберите опцию "Frame selection":

Несколько блоков объединятся в один фрейм.

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

III. Импорт элемента в редактор

• Перейдите в редактор сайта в mottor, добавьте новую свободную секцию:

Добавление свободной секции в редактор в mottor

• Нажмите внутри нее на кнопку "Импорт из Figma".

Выбор импорта из Figma в свободной секции

Обратите внимание!
Кнопка "Импорт из Figma" показывается, только если в секции нет других блоков.

• В открывшемся окне вставьте скопированный ранее API-токен:

• Ниже появится новое поле, разместите в нем скопированную ранее ссылку на фрейм, который вы создали в Figma:

Заполнение API-ключа и ввод адреса фрейма

Важно!
Если в макете Figma был использован шрифт, которого нет в редакторе, система предложит заменить его на другой. Но вы можете импортировать этот шрифт на сайт с помощью инструкции.

• Нажмите "Импорт". Готово, секция из Figma импортирована в редактор:

Запуск импорта после ввода ключа и ссылки на фрейм

IV. Управление импортом через разметку

Вы можете задавать специальные названия фреймам и группам в Figma, чтобы управлять импортом.

Сейчас доступны такие переменные:

• IMAGE — позволяет импортировать содержимое фрейма в блок "Картинка" в формате PNG.

• SVG — позволяет импортировать содержимое фрейма в блок "Картинка" в формате SVG.

• BUTTON — позволяет импортировать группу как блок "Кнопка".
Группа должна состоять из фигуры и текста для успешного переноса!

Чтобы задать фрейму или группе название, нажмите на них в Figma правой кнопкой мыши и используйте опцию "Rename":

Важно!
Переименовать нужно сам фрейм или группу, а не отдельные блоки внутри них.

Часто задаваемые вопросы

Все верно, именно это и произойдет в свободной секции, если изменить ширину сайта после размещения или импорта элементов.

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

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

Да, такая возможность есть.

• Объедините все элементы внутри таблицы в Figma в одну группу.

• Смените имя группы на IMAGE, проведите импорт группы.

В редакторе появится блок "Картинка", в котором будет размещено содержимое таблицы.

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

Нет, потому импортированные элементы нужно настроить вручную в мобильном редакторе сайта. Процесс настройки мобильной версии мы описали в инструкции.

Поддерживает частично. Доступны переносы фигур:
• Прямоугольник
• Эллипс
• Стрелка

А вот "Звезда" и "Полигон" пока не поддерживаются.

Итоги

Итак, в этой статье мы узнали, как импортировать фреймы из Figma напрямую
в редактор.

Если что-то будет непонятно — в конструкторе сайтов mottor есть бесплатная техподдержка для всех пользователей. Вам поможет живой специалист:

— в чате на сайте lpmotor.ru
— по телефону 8 800 200 51 47 (звонки по РФ бесплатные)
— в Телеграм: https://t.me/lpmotorchat

Создать сайт с ИИ бесплатно

Не забудьте протестировать все возможности mottor прямо сейчас

Конструктор сайтов, чат-ботов, автоворонок, мобильных приложений

Быстрый старт:

Премиум поддержка

Полезные материалы

Интеграции

Технологии

Шаблоны сайтов

Тарифы

Импорт из Figma

Сделано на mottor

Партнеры

Продукты:

Сайты + лендинги

Интернет-магазины

Квизы

Чат-боты

Автоворонки

Приложение

AI-агенты (n8n)

Партнерская программа

WhiteLabel

О нас:

О компании

Тур по сервису

Вакансии

Отзывы

Контакты

Шаблоны:

Импорт элементов из Figma