--- title: "Interfaz del Flow Builder" description: "Descripción general de la interfaz y el espacio de trabajo del Flow Builder." --- La interfaz principal del Flow Builder incluye todas las herramientas necesarias para añadir elementos visuales, editar sus propiedades y modificar la lógica del flow del usuario. Este artículo describe cada área de la interfaz: qué hace y dónde encontrarla. ## Controles del proyecto y atajos útiles (barra de herramientas superior) \{#project-controls-and-useful-shortcuts-top-toolbar\} * **Cerrar** Close: Sale del editor de flow y vuelve a la página de flows. * **Nombre de la app** App: Identifica la app a la que pertenece el flow. * **Todos los flows** Flows: Abre la lista de todos los flows de esta app. * **Renombrar el flow**: Haz clic en el lápiz Pencil junto al nombre del flow para renombrarlo. * **Selector de modo de vista**: Cambia entre la vista de diseño Cursor y la [vista de Remote Config](customize-flow-with-remote-config)Remote Config. * **Deshacer/Rehacer**: Haz clic en los iconos de flecha para deshacer Undo o rehacer Redo los cambios del flow. También puedes usar ⌘Z / Ctrl+Z para deshacer. * **Guardar borrador / Publicar**: Haz clic en **Save draft** para guardar tu progreso sin publicarlo (⌘ / Ctrl+S). Abre el desplegable Open dropdown para acceder al botón [**Publish**](builder-save-publish). Solo puedes añadir tu flow a un [placement](create-placement) después de publicarlo. ## Área de vista previa (centro) \{#preview-area-center\} El área central del espacio de trabajo simula cómo se verá tu flow en un dispositivo móvil. * Para seleccionar un elemento y editar sus propiedades, haz clic en él. Para seleccionar un elemento hijo dentro de un contenedor, primero haz clic en el contenedor y luego en el elemento hijo. * Para editar las propiedades de la pantalla en sí, haz clic fuera de cualquier elemento o selecciona la pantalla en el panel Screens and Layers. * Para cambiar el orden de un elemento, arrastra su entrada hacia arriba o hacia abajo en el panel Screens and Layers. :::warning El editor de flows está diseñado para crear layouts adaptables. Por eso, **no puedes cambiar manualmente la posición de los elementos** — solo puedes cambiar su orden. La configuración de layout de cada contenedor determina cómo se distribuyen los elementos dentro de él. ::: ### Barra de pantalla activa (encima de la previsualización del dispositivo) \{#active-screen-bar-above-the-device-preview\} - **Screen name** — una etiqueta con el nombre de la pantalla actual. - **Toggle animations** Toggle animations — activa o desactiva las vistas previas de animaciones de los elementos; se reproducen de forma continua hasta que se desactivan. Solo aparece cuando la pantalla activa contiene al menos una [animación](builder-styling#animation). No afecta a la visibilidad de las animaciones en el dispositivo real. - **Add element** Plus — abre la [biblioteca de elementos](builder-elements) en la pantalla actual. Es equivalente al **+** situado en la parte superior del panel Screens and Layers, y resulta útil cuando dicho panel está contraído. ### Controles de visualización (barra de herramientas inferior) \{#view-controls-bottom-toolbar\} Las herramientas de la barra inferior te permiten controlar la vista previa. * **Device**: Selecciona uno de los modelos de iPhone o Android disponibles para cambiar las dimensiones del viewport y el contorno del dispositivo. * **Screen orientation**: Alterna entre los modos vertical Portrait y horizontal Landscape para previsualizar tu flow en distintas orientaciones. * **Color scheme**: Cambia entre los modos claro Light mode y oscuro Dark mode para ver cómo se adapta tu diseño a cada tema. * **Locale**: Selecciona un idioma para previsualizar tu flow con el contenido localizado. * **View options**: Activa o desactiva el bisel del dispositivo y las guías de área segura. ## Propiedades de pantalla y elemento (panel derecho) \{#screen-and-element-properties-right-panel\} ### Ajustes y disposición de pantalla \{#screen-settings-and-layout\} :::link Artículo principal: [Pantallas y capas](paywall-layout-and-products) ::: Cuando no hay ningún elemento seleccionado, el panel derecho te permite ajustar las propiedades de la pantalla del [flow](paywall-layout-and-products) activa, entre ellas: * Interacciones con la interfaz del sistema (por ejemplo, si la barra de estado es visible) * Reglas de disposición automática * Fondo (color, imagen o vídeo) * Tamaño del relleno (padding) * Comportamiento de desplazamiento vertical Si la pantalla contiene ciertos elementos, como [cuestionarios interactivos](onboarding-quizzes), esta lista se ampliará con las propiedades correspondientes. ### Propiedades del elemento \{#element-properties\} Al seleccionar un elemento, el panel derecho permite modificar sus propiedades de estilo e interacción. #### Propiedades de diseño \{#design-properties\} :::link Más información: [Posicionamiento de elementos](manage-paywall-ui-elements), [Estilo de elementos](builder-styling) ::: La pestaña **Design** permite configurar la apariencia visual y el diseño del elemento seleccionado: * **Visibility**: Muestra u oculta el elemento. Activa la visibilidad **Conditional** para establecer reglas que determinen cuándo debe ser visible el elemento. * **Position**: Elige entre posicionamiento Relative, Absolute o Fixed. * **Content** (solo elementos de texto): Edita el contenido de texto del elemento, inserta [variables](#variables) y gestiona las localizaciones. * **Typography** (solo elementos de texto): Configura la fuente, el peso, el tamaño, el color, la alineación, la decoración y el truncamiento. * **Spacing**: Establece el margen y el relleno del elemento. * **Effects**: Añade sombras externas, sombras internas, desenfoque de fondo o desenfoque de capa. * **Animation**: Añade efectos animados (p. ej., Pulse) y configura su temporización e intensidad. * **Appearance**: Ajusta la opacidad y la rotación. * **Layout**: Elige una dirección de diseño (vertical u horizontal) y determina cómo se distribuyen los elementos secundarios. #### Propiedades de interacciones \{#interactions-properties\} :::link Más información: [Acciones](onboarding-actions), [Navegación e interacción](onboarding-navigation-branching) ::: La pestaña **Interactions** te permite definir qué ocurre cuando el usuario interactúa con el elemento seleccionado. Cada interacción consta de un **trigger** y una o más **acciones**: * **Los disparadores** definen *cuándo* ocurre algo — por ejemplo, **On Tap** (el usuario toca el elemento). * **Las acciones** definen *qué* ocurre — por ejemplo, navegar a otra pantalla o cambiar el valor de una variable. Añade varias acciones a un mismo disparador para encadenarlas en secuencia. Puedes añadir varios disparadores al mismo elemento para ejecutar varias acciones en orden. ## Panel izquierdo \{#left-panel\} El panel izquierdo cambia su funcionalidad según el botón que esté activo. Puedes elegir entre: * [Pantallas y capas](#screens-and-layers) * [Añadir elemento](#element-selection) * [Productos](#products) * [Estilos](#saved-styles) * [Variables](#variables) * [Localización](#localization) ### Pantallas y capas \{#screens-and-layers\} :::link Artículo principal: [Pantallas y capas](paywall-layout-and-products) ::: El botón de capas Layers abre Pantallas y capas (que se muestra por defecto al abrir el flow builder). Muestra cada pantalla como un árbol de capas. Cada elemento de una pantalla es una capa, y los contenedores (como las pilas) tienen sus elementos secundarios anidados dentro. Puedes arrastrar y soltar capas para reordenarlas. ### Selección de elementos \{#element-selection\} :::link Artículo principal: [Elementos](builder-elements) ::: Si haces clic en el botón más Plus, el panel izquierdo muestra la lista de elementos de interfaz disponibles y sus variaciones. Haz clic en un elemento para añadirlo a la pantalla actual como una nueva capa. ### Productos :::link Artículo principal: [Productos](paywall-product-block) ::: El botón de productos Products abre la lista de productos. Muestra qué productos están asignados a cada pantalla de tu flow. Esta lista es de solo lectura. Para asignar productos a una pantalla, añade un elemento Producto y configúralo en el panel derecho. Para crear o editar productos, utiliza la página **Products** en el Adapty Dashboard. ### Estilos guardados :::info Más información: - [Estilo de elementos](builder-styling) - [Contenido de texto](onboarding-text) - [Modo oscuro](paywall-dark-mode) ::: El botón de estilos Styles abre los Estilos guardados. Aquí puedes editar y gestionar estilos globales. Si varios elementos de tu flow usan la misma tipografía o color, guarda esos datos como un estilo global. Luego podrás reutilizarlos con un solo clic. Actualmente, Flow Builder admite dos tipos de estilos globales: estilos de fuente y estilos de color. Cada estilo de color puede tener, opcionalmente, un valor distinto para el modo oscuro. ### Variables :::link Artículo principal: [Variables](onboarding-variables) ::: El botón de corchetes Variables abre Variables. Aquí puedes crear y gestionar variables para tu flow. En tiempo de ejecución, el SDK reemplaza los marcadores de posición de las variables con valores reales: atributos de usuario, precios de productos, cadenas localizadas y más. Las variables se agrupan en dos pestañas: * **Custom**: Variables que creas y controlas mediante acciones. * **Elements**: Valores determinados por la interacción del usuario, como respuestas de quiz, estados de toggles o selección de pestañas. Las variables de producto — precio, nombre y otros datos del producto — no aparecen en este panel. Referenciarlas directamente al editar un elemento de texto. Usa las variables para: * **Vincular texto**: Muestra contenido dinámico en lugar de cadenas estáticas. * **Controlar la visibilidad**: Muestra u oculta elementos según condiciones (por ejemplo, ocultar un botón de actualización para usuarios premium). * **Interactuar con el usuario**: Accede a los datos de los campos de entrada del usuario, como formularios o cuestionarios. ### Localización \{#localization\} :::link Artículo principal: [Localización](add-paywall-locale-in-adapty-paywall-builder) ::: La vista de Localización te permite gestionar todo el contenido traducible de tu flow. Muestra una tabla con cada cadena de texto e imagen, organizada por pantalla, con columnas para cada idioma. Desde esta vista puedes: * Añadir nuevos idiomas y editar cadenas localizadas directamente en la tabla. * Hacer seguimiento del estado de traducción — cada fila aparece marcada como **Done** o **Missing**. * Filtrar por pantalla o mostrar solo las traducciones que faltan. * Usar **AI Translate** para traducir el contenido automáticamente, o **Import/Export** para gestionar traducciones en bloque.