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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Левая панель

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

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

Экраны и слои

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

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

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

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

Продукты

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

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

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

Кнопка Styles открывает раздел Saved Styles.

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

Переменные

Кнопка с угловыми скобками Variables открывает панель переменных.

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

Переменные сгруппированы на двух вкладках:

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

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

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

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

Локализация

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

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