Плагин Adapty для Figma превращает фреймы из вашего дизайн-файла во флоу. Выберите фреймы в Figma, отправьте их в Adapty — и из импорта создастся черновик флоу, который можно редактировать в конструкторе флоу как любой другой.

Как работает импорт

Плагин считывает выбранные фреймы Figma и загружает их в Adapty, который преобразует их в экраны нового черновика флоу. Плагин никогда не изменяет ваш файл Figma, и ничего не покидает Figma до тех пор, пока вы не нажмёте Export to Adapty. Результат выглядит как ваш дизайн и работает как базовый флоу: кнопки ведут к следующему экрану, варианты ответов в квизе доступны для выбора, а пейвол готов к привязке продуктов.

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

Прежде чем начать

Для импорта дизайна вам потребуется:

• Файл дизайна в Figma: плагин работает только в файлах дизайна. FigJam-доски и Figma Slides не поддерживаются.
• Права на редактирование файла: плагин не запустится в файле, к которому у вас есть только доступ на просмотр. Ваши личные черновики подходят.
• Приложение в Adapty с правами на редактирование флоу: импорт создаёт флоу внутри одного из ваших приложений. Убедитесь, что у вас есть права на редактирование флоу в целевом приложении Adapty.

1. Установите плагин

Чтобы установить плагин:

1. Откройте страницу плагина Import to Adapty.
2. Нажмите Save. Плагин появится в меню Plugins в Figma.
   

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

2. Отправьте дизайн в Adapty

Чтобы отправить экраны в Adapty:

1. В Figma выберите фреймы для импорта. Выберите сразу несколько, чтобы отправить целую последовательность экранов.
2. Перейдите в Plugins > Import to Adapty.
3. Проверьте список элементов, которые плагин собирается импортировать, и нажмите Export to Adapty.
4. Нажмите Open in Adapty.

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

После завершения загрузки плагин отображает экран Done. Чтобы продолжить:

1. Войдите в Adapty. Если вы откроете ссылку для импорта в браузере без авторизации, импорт не сработает.
2. Откройте ссылку для импорта в браузере:
   • Нажмите Open in Adapty, чтобы открыть импорт в браузере по умолчанию
   • Нажмите Copy link, чтобы скопировать ссылку в буфер обмена и начать импорт в другом браузере или профиле.

Как фреймы становятся экранами

То, что вы выбираете, определяет количество экранов:

• Несколько фреймов: каждый фрейм становится отдельным экраном.
• Секция: каждый фрейм внутри секции становится экраном.
• Один фрейм: весь фрейм становится одним экраном, даже если внутри есть другие фреймы. Чтобы импортировать вложенные фреймы как отдельные экраны, включите Split into separate screens.

Экраны следуют порядку фреймов в панели Layers Figma — снизу вверх, а не по расположению на холсте и не в порядке их выделения. Навигация строится по тому же принципу, поэтому упорядочьте фреймы в панели Layers до экспорта или переставьте экраны в билдере после импорта. Выбирайте отдельные фреймы или секцию, а не всю страницу — иначе импортируются все остальные фреймы на этой странице.

Настройки экспорта

Чтобы изменить состав экспорта, нажмите Customize export:

• Export images: включает изображения и фотоматериалы. Включено по умолчанию.
• Image resolution: экспортирует изображения в масштабе 1×, 2× или 3×. Чем выше разрешение, тем чётче изображение и больше размер файла. По умолчанию 2×.
• Split into separate screens: импортирует каждый фрейм внутри выделения как отдельный экран. Отключено по умолчанию.

3. Завершите импорт в Adapty

Open in Adapty открывает вкладку браузера в вашем дашборде Adapty. Конвертация выполняется на серверах Adapty — вкладка отображает прогресс и создаёт флоу по завершении.

1. Выберите приложение, к которому относится этот флоу. Конвертация начинается сразу после выбора.
2. Не закрывайте вкладку до окончания импорта (это может занять несколько минут). Если вы закрыли вкладку раньше времени, откройте ту же ссылку снова, чтобы продолжить.

Adapty конвертирует дизайн и показывает прогресс выполнения.

Готовый флоу открывается в конструкторе флоу как черновик — с именем из файла Figma и понятным названием для каждого экрана. Adapty сообщит, если какие-то части дизайна требуют дополнительной проверки.

Ограничения импорта

Импорт воспроизводит внешний вид вашего дизайна и подключает основное: навигацию, выбираемые группы, поля ввода и действия покупки. Следующие части дизайна при импорте не переносятся:

• Продукты: при импорте создаются карточки продуктов, добавляются действия покупки и вставляются заполнители для переменных продукта. Вам нужно самостоятельно привязать реальные продукты и заменить заполнители. См. Настройка покупок.
• Шрифты: при импорте шрифт для текста не назначается. Чтобы восстановить свой шрифт, загрузите файл шрифта и выберите его для нужного текста.
• Видео: видео экспортируется как заполнитель. Добавьте видео в конструкторе после импорта.
• Скрытые слои: скрытые слои не экспортируются.

Один экспорт включает не более 50 экранов и 20 МБ данных дизайна. На размер больше всего влияет разрешение изображений: если экспорт получается слишком большим, установите Image resolution в значение 1×.

Каждый экспорт создаёт один флоу. Чтобы импортировать тот же дизайн повторно, экспортируйте его из Figma ещё раз.

Ссылка для импорта действительна в течение одного часа после экспорта. Завершите импорт за один раз, иначе придётся начинать сначала.

Устранение неполадок

Ошибки экспорта

Сообщение	Что делать
Too many screens to export	Разбейте выделение на небольшие группы по 50 экранов или меньше.
Export data is too large	Уменьшите Image resolution или сократите количество слоёв в экранах.
This frame is too large to export	Экспортируйте меньший фрагмент дизайна.
Upload didn’t complete	Дизайн изменился во время загрузки. Экспортируйте его заново.
This import link has expired	Ссылка для импорта действительна один час. Экспортируйте дизайн из Figma ещё раз.
This design was already imported	Этот экспорт уже создал флоу. Экспортируйте дизайн из Figma заново.

После импорта

Что вы видите	Причина и решение
Экран выглядит размытым, как будто покрыт дымкой	Фоновое изображение было импортировано как обычный элемент поверх контента. Переместите его за остальные элементы экрана.
Панель Products пустая, а цены отображают заполнители {{figma_import_…}}	Импорт не связывает продукты. Добавьте свои на панели Products, выберите их в каждой карточке продукта и действии покупки, затем замените заполнители.
Экраны расположены в неправильном порядке, или кнопки открывают не тот экран	Экраны и навигация следуют порядку фреймов на панели Layers в Figma. Измените порядок экранов в конструкторе и проверьте действие Navigate to screen для каждой кнопки.
Изображение отсутствует, остался только его фон	Слой был видео, был скрыт или создан с помощью операции с фигурой. Замените изображение в конструкторе.
Два варианта в группе с единственным выбором выглядят выбранными одновременно	Невыбранное состояние варианта по умолчанию не имеет правильных стилей. Измените стили вручную.
Обратный отсчёт показывает фиксированное время и не отсчитывает	Обратный отсчёт был импортирован как текст. Замените его на таймер обратного отсчёта.
В элементе управления шрифтом написано Select font	Шрифт недоступен в конструкторе. Загрузите файл шрифта и выберите его.

Дальнейшие шаги

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

1. Сохраните и опубликуйте флоу.
2. Предварительно просмотрите флоу на реальном устройстве.
3. Создайте плейсмент для флоу и добавьте в него флоу.
4. Запросите этот плейсмент в приложении с помощью Adapty SDK версии 4.0 или выше. Более ранние версии SDK не поддерживают рендеринг флоу.