---
title: "Интерфейс Flow Builder"
description: "Обзор интерфейса и рабочего пространства Flow Builder."
---

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

## Элементы управления проектом и полезные сочетания клавиш (верхняя панель инструментов) \{#project-controls-and-useful-shortcuts-top-toolbar\}

* **Close** Close: Выйти из редактора флоу и вернуться на страницу флоу.
* **App name** App: Показывает, к какому приложению относится флоу.
* **All flows** Flows: Открыть список всех флоу для этого приложения.
* **Rename the flow**: Нажмите на карандаш Pencil рядом с названием флоу, чтобы переименовать его.
* **View mode toggle**: Переключение между режимом дизайна Cursor и [режимом Remote Config](customize-flow-with-remote-config)Remote Config.
* **Undo/Redo**: Нажмите на стрелки, чтобы отменить Undo или повторить Redo изменения во флоу. Также можно использовать ⌘Z / Ctrl+Z для отмены.
* **Save draft / Publish**: Нажмите **Save draft**, чтобы сохранить прогресс без публикации (⌘ / Ctrl+S). Откройте выпадающее меню Open dropdown, чтобы перейти к кнопке [**Publish**](builder-save-publish). Добавить флоу в [плейсмент](create-placement) можно только после публикации.
## Область предпросмотра (центр) \{#preview-area-center\}

Центральная область рабочего пространства показывает, как выглядит ваш флоу на мобильном устройстве.
* Чтобы выбрать элемент и изменить его свойства, нажмите на него. Чтобы выбрать дочерний элемент внутри контейнера, сначала нажмите на контейнер, затем на дочерний элемент.
* Чтобы изменить свойства самого экрана, нажмите в пустое место за пределами любого элемента или выберите экран на панели Screens and Layers.
* Чтобы изменить порядок элемента, перетащите его строку вверх или вниз на панели Screens and Layers.
:::warning
Редактор флоу создан для адаптивных макетов. Поэтому вы **не можете вручную изменять положение элементов** — можно только менять их порядок. Настройки макета каждого контейнера определяют, как распределяются находящиеся внутри него элементы.
:::
### Панель активного экрана (над превью устройства) \{#active-screen-bar-above-the-device-preview\}

- **Screen name** — плашка с именем текущего экрана.
- **Toggle animations** Toggle animations — включает или отключает предпросмотр анимаций элементов; они воспроизводятся непрерывно, пока не отключены. Отображается только если на активном экране есть хотя бы одна [анимация](builder-styling#animation). Не влияет на отображение анимаций на реальном устройстве.
- **Add element** Plus — открывает [библиотеку элементов](builder-elements) для текущего экрана. Аналог кнопки **+** в верхней части панели «Screens and Layers» — удобно использовать, когда панель свёрнута.
### Элементы управления видом (нижняя панель инструментов) \{#view-controls-bottom-toolbar\}

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

* **Device**: Выберите одну из доступных моделей iPhone или Android, чтобы изменить размеры области просмотра и отображение устройства.
* **Screen orientation**: Переключайтесь между портретным Portrait и альбомным Landscape режимами, чтобы просмотреть флоу в разных ориентациях.
* **Color scheme**: Переключайтесь между светлой Light mode и тёмной Dark mode темами, чтобы увидеть, как дизайн адаптируется к разным схемам оформления.
* **Locale**: Выберите локаль, чтобы просмотреть флоу с локализованным контентом.
* **View options**: Включайте или отключайте отображение рамки устройства и направляющих безопасной зоны.
## Свойства экрана и элементов (правая панель) \{#screen-and-element-properties-right-panel\}
### Настройки экрана и макет \{#screen-settings-and-layout\}

:::link
Основная статья: [Экраны и слои](paywall-layout-and-products)
:::

Когда ни один элемент не выбран, правая панель позволяет настраивать свойства активного [экрана флоу](paywall-layout-and-products), в том числе:

* Взаимодействие с системным UI (например, отображение строки состояния)
* Правила автоматической компоновки
* Фон (цвет, изображение или видео)
* Размер отступов
* Поведение вертикальной прокрутки
Если экран содержит определённые элементы, например [интерактивные викторины](onboarding-quizzes), этот список расширится соответствующими свойствами.
### Свойства элемента \{#element-properties\}

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

#### Свойства дизайна \{#design-properties\}

:::link
Подробнее: [Позиционирование элементов](manage-paywall-ui-elements), [Стилизация элементов](builder-styling)
:::

Вкладка **Design** позволяет настраивать внешний вид и расположение выбранного элемента:
* **Visibility**: Показать или скрыть элемент. Включите **Conditional** visibility, чтобы задать правила отображения элемента.
* **Position**: Выберите тип позиционирования: Relative, Absolute или Fixed.
* **Content** (только для текстовых элементов): редактируйте текстовое содержимое элемента, вставляйте [переменные](#variables) и управляйте локализациями.
* **Typography** (только для текстовых элементов): настройте шрифт, начертание, размер, цвет, выравнивание, оформление и обрезку текста.
* **Spacing**: задайте внешние и внутренние отступы элемента.
* **Effects**: добавьте внешние тени, внутренние тени, размытие фона или размытие слоя.
* **Animation**: добавьте анимационные эффекты (например, Pulse) и настройте их продолжительность и интенсивность.
* **Appearance**: отрегулируйте прозрачность и угол поворота.
* **Layout**: выберите направление раскладки (вертикальное или горизонтальное) и задайте распределение дочерних элементов.
#### Свойства взаимодействий \{#interactions-properties\}

:::link
Подробнее: [Действия](onboarding-actions), [Навигация и взаимодействие](onboarding-navigation-branching)
:::

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

К одному элементу можно добавить несколько триггеров для выполнения нескольких действий по порядку.
## Левая панель \{#left-panel\}

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

* [Экраны и слои](#screens-and-layers)
* [Добавить элемент](#element-selection)
* [Продукты](#products)
* [Стили](#saved-styles)
* [Переменные](#variables)
* [Локализация](#localization)
### Экраны и слои \{#screens-and-layers\}

:::link
Основная статья: [Экраны и слои](paywall-layout-and-products)
:::

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

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

:::link
Основная статья: [Элементы](builder-elements)
:::

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

:::link
Основная статья: [Продукты](paywall-product-block)
:::

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

Список доступен только для чтения. Чтобы назначить продукты экрану, добавьте элемент «Продукт» и настройте его в правой панели. Чтобы создать или изменить продукты, используйте страницу **Products** в дашборде Adapty.
### Сохранённые стили \{#saved-styles\}

:::info
Подробнее:
- [Стилизация элементов](builder-styling)
- [Текстовое содержимое](onboarding-text)
- [Тёмная тема](paywall-dark-mode)
:::

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

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

:::link
Основная статья: [Переменные](onboarding-variables)
:::

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

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

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

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

Используйте переменные для:
* **Привязывать текст**: отображать динамический контент вместо статических строк.
* **Управлять видимостью**: показывать или скрывать элементы на основе условий (например, скрывать кнопку апгрейда для премиум-пользователей).
* **Взаимодействовать с пользователем**: считывать данные из полей ввода, например из форм или опросов.
### Локализация \{#localization\}

:::link
Основная статья: [Локализация](add-paywall-locale-in-adapty-paywall-builder)
:::

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

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