--- title: "Flow Builder UI" description: "Overview of the Flow Builder interface and workspace." --- The main Flow Builder UI includes all the tools necessary to add visual elements, edit their properties, and change the logic of the user flow. This article covers each area of the interface: what it does and where to find it. ## Project controls and useful shortcuts (top toolbar) * **Close** Close: Exit the flow editor and return to the flows page. * **App name** App: Identifies the app the flow belongs to. * **All flows** Flows: Open the list of all flows for this app. * **Rename the flow**: Click the pencil Pencil next to the flow name to rename it. * **View mode toggle**: Switch between the design view Cursor and the [remote config view](customize-flow-with-remote-config)Remote Config. * **Undo/Redo**: Click the arrow icons to undo Undo or redo Redo your flow changes. You can also use ⌘Z / Ctrl+Z to undo. * **Save draft / Publish**: Click **Save draft** to save your progress without going live (⌘ / Ctrl+S). Open the dropdown Open dropdown to access the [**Publish**](builder-save-publish) button. You can only add your flow to a [placement](create-placement) after publishing. ## Preview area (center) The central area of the workspace simulates what your flow looks like on a mobile device. * To select an element and edit its properties, click it. To select a child element inside a container, click the container first, then click the child. * To edit the properties of the screen itself, click outside any element, or select the screen in the Screens and Layers panel. * To change the order of an element, drag its entry up or down in the Screens and Layers panel. :::warning The flow editor is designed to create responsive layouts. Therefore, you **cannot manually change the elements' positions** — you can only change their order. Each container's layout settings determine how the elements within it are distributed. ::: ### Active screen bar (above the device preview) - **Screen name** — a pill with the name of the current screen. - **Toggle animations** Toggle animations — turns element animation previews on or off; they run continuously until turned off again. Only visible when the active screen contains at least one [animation](builder-styling#animation). Does not affect the visibility of the animations on the live device. - **Add element** Plus — open the [element library](builder-elements) at the current screen. Equivalent to the **+** at the top of the Screens and Layers panel — useful when the panel is collapsed. ### View controls (bottom toolbar) The tools in the bottom toolbar allow you to control the preview. * **Device**: Select one of the available iPhone and Android phone models to change the viewport dimensions and the outline of the device. * **Screen orientation**: Toggle between portrait Portrait and landscape Landscape modes to preview your flow in different orientations. * **Color scheme**: Switch between light Light mode and dark Dark mode modes to see how your design adapts to different themes. * **Locale**: Select a locale to preview your flow with localized content. * **View options**: Toggle the device bezel and safe area guides on or off. ## Screen and element properties (right panel) ### Screen settings and layout :::link Main article: [Screens and Layers](paywall-layout-and-products) ::: When no element is selected, the right panel allows you to adjust the properties of the active [flow screen](paywall-layout-and-products), including the following: * Interactions with the system UI (e.g. whether the status bar is visible) * Automatic layout rules * Background (color, image, or video) * Padding size * Vertical scroll behavior If the screen contains certain elements, such as [interactive quizzes](onboarding-quizzes), this list will expand with relevant properties. ### Element properties When you select an element, the right panel allows you to change its style and interactive properties. #### Design properties :::link Learn more: [Element positioning](manage-paywall-ui-elements), [Element styling](builder-styling) ::: The **Design** tab allows you to configure the visual appearance and layout of the selected element: * **Visibility**: Show or hide the element. Enable **Conditional** visibility to set rules that determine when the element should be visible. * **Position**: Choose between Relative, Absolute, or Fixed positioning. * **Content** (text elements only): Edit the element's text content, insert [variables](#variables), and manage localizations. * **Typography** (text elements only): Configure font, weight, size, color, alignment, decoration, and truncation. * **Spacing**: Set the element's margin and padding. * **Effects**: Add drop shadows, inner shadows, background blur, or layer blur. * **Animation**: Add animated effects (e.g., Pulse) and configure their timing and intensity. * **Appearance**: Adjust opacity and rotation. * **Layout**: Choose a layout direction (vertical or horizontal) and determine how the children are distributed. #### Interactions properties :::link Learn more: [Actions](onboarding-actions), [Navigation and Interaction](onboarding-navigation-branching) ::: The **Interactions** tab allows you to define what happens when the user interacts with the selected element. Each interaction consists of a **trigger** and one or more **actions**: * **Triggers** define *when* something happens — for example, **On Tap** (user taps the element). * **Actions** define *what* happens — for example, navigate to another screen or change a variable's value. Add multiple actions to a single trigger to chain them in sequence. You can add multiple triggers to the same element to execute several actions in order. ## Left panel The left panel changes its functionality based on which button is active. You can select between: * [Screens and layers](#screens-and-layers) * [Add element](#element-selection) * [Products](#products) * [Styles](#saved-styles) * [Variables](#variables) * [Localization](#localization) ### Screens and Layers :::link Main article: [Screens and Layers](paywall-layout-and-products) ::: The layers Layers button opens Screens and Layers (shown by default when you open the flow builder). It displays each screen as a tree of layers. Each element on a screen is a layer, and containers (such as stacks) have their child elements nested inside. You can drag and drop layers to reorder them. ### Element selection :::link Main article: [Elements](builder-elements) ::: If you click the plus Plus button, the left panel displays the list of available UI elements and their variations. Click an entry to add it to the current screen as a new layer. ### Products :::link Main article: [Products](paywall-product-block) ::: The products Products button opens the product list. It shows which products are assigned to each screen in your flow. This list is read-only. To assign products to a screen, add a Product element and configure it in the right panel. To create or edit products, use the **Products** page in the Adapty Dashboard. ### Saved styles :::info Learn more: - [Element styling](builder-styling) - [Text content](onboarding-text) - [Dark mode](paywall-dark-mode) ::: The styles Styles button opens Saved Styles. Here, you can edit and manage global styles. If multiple elements in your flow use the same typography or color, save this data as a global style. You can then reuse it with a single click. Currently, Flow Builder supports two types of global styles — Font styles and Color styles. Each Color style can optionally have a separate value for Dark mode. ### Variables :::link Main article: [Variables](onboarding-variables) ::: The brackets Variables button opens Variables. Here, you can create and manage variables for your flow. At runtime, the SDK replaces variable placeholders with actual values — user attributes, product prices, localized strings, and more. Variables are grouped into two tabs: * **Custom**: Variables you create and control through actions. * **Elements**: Values determined by user interaction — such as quiz answers, toggle states, or tab selection. Product variables — price, name, and other product data — aren't listed in this panel. Reference them directly when editing a text element. Use variables to: * **Bind text**: Display dynamic content instead of static strings. * **Control visibility**: Show or hide elements based on conditions (e.g., hide an upgrade button for premium users). * **Interact with the user**: Access data from user input fields, such as forms or quizzes. ### Localization :::link Main article: [Localization](add-paywall-locale-in-adapty-paywall-builder) ::: The Localization view allows you to manage all translatable content across your flow. It displays a table of every text string and image, organized by screen, with columns for each locale. From this view, you can: * Add new locales and edit localized strings inline. * Track translation status — each row is marked as **Done** or **Missing**. * Filter by screen or show only missing translations. * Use **AI Translate** to auto-translate content, or **Import/Export** translations in bulk.