Основной интерфейс Flow & Paywall Builder включает все необходимые инструменты для добавления визуальных элементов, редактирования их свойств и управления логикой пользовательского флоу. В этой статье описан каждый раздел интерфейса: что он делает и где его найти.

Управление проектом и полезные сочетания клавиш (верхняя панель инструментов)

• Close : Выйти из билдера и вернуться на страницу флоу.
• App name : Показывает, к какому приложению относится флоу.
• All flows : Открыть список всех флоу для этого приложения.
• Flow status: Иконка слева от названия флоу отображает текущий статус флоу:
  • Draft
  • Publishing (вращающийся индикатор загрузки)
  • Failed
  • или Live .
• Rename the flow: Нажмите на название флоу, чтобы переименовать его. У нескольких флоу может быть одинаковое название — давайте каждому новому флоу уникальное имя.
• View mode toggle: Переключение между режимом дизайна и режимом Remote Config.
• Undo/Redo: Нажмите на стрелки, чтобы отменить или повторить изменения во флоу. Также можно использовать ⌘Z / Ctrl+Z для отмены.
• Save draft / Publish: Нажмите Save draft, чтобы сохранить прогресс без публикации (⌘ / Ctrl+S). Откройте выпадающее меню , чтобы получить доступ к кнопке Publish. Добавить флоу в плейсмент можно только после публикации.

Область предпросмотра (центр)

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

• Чтобы выбрать элемент и изменить его свойства, нажмите на него. Чтобы выбрать дочерний элемент внутри контейнера, сначала нажмите на контейнер, затем на дочерний элемент.
• Чтобы изменить свойства самого экрана, нажмите в пустое место за пределами любого элемента или выберите экран на панели Screens and Layers.
• Чтобы изменить порядок элемента, перетащите его строку вверх или вниз на панели Screens and Layers.

Панель активного экрана (над превью устройства)

• Screen name — плашка с именем текущего экрана.
• Toggle animations — включает или отключает предпросмотр анимаций элементов; они воспроизводятся непрерывно, пока не отключены. Отображается только если на активном экране есть хотя бы одна анимация. Не влияет на отображение анимаций на реальном устройстве.
• Add element — открывает библиотеку элементов для текущего экрана. Аналог кнопки + в верхней части панели «Screens and Layers» — удобно использовать, когда панель свёрнута.

Элементы управления видом (нижняя панель инструментов)

Инструменты в нижней панели позволяют управлять предпросмотром.

• Device: Выберите один из доступных моделей iPhone или Android-телефонов, чтобы изменить размеры области просмотра и контур устройства.
• Screen orientation: Переключайтесь между портретным и альбомным режимами для предпросмотра флоу в разных ориентациях.
• Light theme и Dark theme: Предпросмотр флоу в каждой теме. Кнопки появляются только если для флоу добавлена тёмная тема.
• Locale: Выберите локаль для предпросмотра флоу с локализованным контентом.
• View options: Включите или отключите отображение рамки устройства и направляющих безопасной зоны.

Свойства экрана и элементов (правая панель)

Настройки и макет экрана

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

• Взаимодействие с системным UI (например, видимость строки состояния)
• Правила автоматического макета
• Фон (цвет, изображение или видео)
• Размер отступов
• Поведение вертикальной прокрутки

Если экран содержит определённые элементы, например интерактивные викторины, этот список расширится соответствующими свойствами.

Свойства элемента

При выборе элемента правая панель позволяет изменять его стили и интерактивные свойства.

Свойства дизайна

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

• Visibility: Показать или скрыть элемент. Включите Conditional visibility, чтобы задать правила, определяющие, когда элемент должен быть виден.
• Position: Выберите тип позиционирования: Relative, Absolute или Fixed.
• Content (только текстовые элементы): Редактируйте текстовое содержимое элемента, вставляйте переменные и управляйте локализациями.
• Typography (только текстовые элементы): Настройте шрифт, начертание, размер, цвет, выравнивание, оформление и усечение.
• Spacing: Задайте внешние и внутренние отступы элемента.
• Effects: Добавьте внешние тени, внутренние тени или размытие слоя.
• Animation: Добавьте анимационные эффекты (например, Pulse) и настройте их длительность и интенсивность.
• Appearance: Настройте прозрачность и поворот.
• Layout: Выберите направление компоновки (вертикальное или горизонтальное) и задайте способ распределения дочерних элементов.

Свойства взаимодействий

Вкладка Interactions позволяет задать, что происходит при взаимодействии пользователя с выбранным элементом. Каждое взаимодействие состоит из триггера и одного или нескольких действий:

• Триггеры определяют когда что-то происходит — например, On Tap (пользователь нажимает на элемент).
• Действия определяют что происходит — например, переход на другой экран или изменение значения переменной. Добавьте несколько действий к одному триггеру, чтобы выполнять их последовательно.

К одному элементу можно добавить несколько триггеров для выполнения нескольких действий по порядку.

Левая панель

Левая панель меняет своё содержимое в зависимости от того, какая кнопка активна. Доступные разделы:

• Экраны и слои
• Добавить элемент
• Продукты
• Стили
• Переменные
• Локализация
• AI Editor

Экраны и слои

Кнопка слоёв открывает панель «Экраны и слои» (отображается по умолчанию при открытии Flow & Paywall Builder).

На ней каждый экран представлен в виде дерева слоёв. Каждый элемент на экране — это слой, а контейнеры содержат вложенные дочерние элементы. Слои можно перетаскивать, чтобы изменить их порядок.

Выбор элемента

Если нажать кнопку плюс , в левой панели отобразится список доступных UI-элементов и их вариаций. Нажмите на нужный элемент, чтобы добавить его на текущий экран в виде нового слоя.

Продукты

Кнопка продуктов открывает список продуктов. Здесь видно, какие продукты назначены каждому экрану флоу. С помощью этого раздела можно управлять продуктами и офферами флоу.

Стили

Кнопка Styles открывает панель Styles.

Создайте стиль для хранения настроек текста или заливки (например, цвета, градиента или фонового изображения) и повторно используйте его в элементах на нескольких экранах. Панель содержит вкладку Text для стилей текста и вкладку Colors для цветовых стилей.

Переменные

Кнопка со скобками открывает Variables.

Здесь можно создавать переменные и управлять ими для своего флоу. Во время выполнения SDK заменяет плейсхолдеры переменных реальными данными: значениями, которые передаёт ваше приложение для кастомных тегов, ценами продуктов, локализованными строками и другим.

Переменные разделены на две вкладки:

• Custom: Переменные, которые вы создаёте, двух видов:
  • Regular variables: Их значения меняются через действия Set variable во флоу.
  • Custom tags: Их значения передаются из вашего приложения через Adapty SDK.
• Elements: Значения, определяемые взаимодействием пользователя — например, ответы на вопросы квиза, состояния тогглов или выбранная вкладка.

Переменные продукта — цена, название и другие данные — в этой панели не отображаются. Обращайтесь к ним напрямую при редактировании текстового элемента.

Используйте переменные, чтобы:

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

Локализация

Панель Localizations отображает весь локализуемый контент флоу в одной таблице, разбитой по экранам, с отдельной колонкой для каждой локали:

• Текст, включая каждую ветку условного текста и плейсхолдеры полей ввода.
• Заголовок и сообщение каждого действия Show alert.
• Цель каждого действия Open URL.
• Изображения и видео — с отдельным файлом для каждой локали.

На этой панели вы можете:

• Добавляйте новые локали и редактируйте локализованные строки прямо в интерфейсе.
• Переводите с помощью ИИ.
• Выбирайте локаль по умолчанию для своего флоу.
• Отслеживайте статус перевода — каждая строка помечается как Done, Missing или, для URL действий, Default.
• Фильтруйте по экрану или статусу, либо ищите по ключевому слову.
• Import или Export контент — для всего флоу или одной локали — чтобы переводить его массово за пределами Adapty.

Редактор на основе ИИ

Кнопка со sparkle открывает чат редактора на основе ИИ.

Опишите изменение простыми словами — Adapty перепишет, изменит стиль или переставит элементы на текущем экране. Adapty также сообщит, что именно изменилось, и одним кликом можно всё вернуть обратно.

Чтобы повторить существующий дизайн, прикрепите его скриншот вместо текстового описания.