Основной интерфейс 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: Переключайтесь между портретным и альбомным режимами, чтобы просмотреть флоу в разных ориентациях.
• Color scheme: Переключайтесь между светлой и тёмной темами, чтобы увидеть, как дизайн адаптируется к разным схемам оформления.
• 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-элементов и их вариаций. Нажмите на нужный элемент, чтобы добавить его на текущий экран в виде нового слоя.

Продукты

Кнопка продуктов открывает список продуктов. В нём показано, какие продукты назначены каждому экрану вашего флоу.

Этот список доступен только для чтения. Чтобы назначить продукты экрану, добавьте элемент «Продукт» и настройте его на правой панели. Чтобы создать или отредактировать продукты, используйте страницу Products в дашборде Adapty.

Сохранённые стили

Кнопка стилей открывает Saved Styles.

Здесь можно редактировать и управлять глобальными стилями. Если несколько элементов вашего флоу используют одинаковую типографику или цвет, сохраните эти данные как глобальный стиль — и затем применяйте его в один клик.

В настоящее время Flow & Paywall Builder поддерживает два типа глобальных стилей — стили шрифтов и стили цветов. Для каждого стиля цвета можно дополнительно задать отдельное значение для тёмного режима.

Переменные

Кнопка со скобками открывает раздел переменных.

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

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

• Custom: переменные, которые вы создаёте и контролируете через действия.
• Elements: значения, определяемые взаимодействием пользователя — например, ответы на вопросы викторины, состояния переключателей или выбор вкладки.

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

Используйте переменные для:

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

Локализация

Раздел «Локализация» позволяет управлять переводимым контентом во флоу. Здесь отображается таблица всех текстовых строк и медиаэлементов, упорядоченных по экранам, со столбцами для каждой локали. В этом разделе вы можете:

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

AI Editor

Кнопка со звёздочкой открывает чат AI Editor.

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