La interfaz principal del Flow & Paywall Builder incluye todas las herramientas necesarias para añadir elementos visuales, editar sus propiedades y modificar la lógica del flow de usuario. Este artículo cubre cada área de la interfaz: qué hace y dónde encontrarla.

Controles del proyecto y atajos útiles (barra superior)

• Close : Salir del builder y volver a la página de flows.
• App name : Identifica la app a la que pertenece el flow.
• All flows : Abrir la lista de todos los flows de esta app.
• Flow status: El icono a la izquierda del nombre del flow indica el estado actual del flow:
  • Draft
  • Publishing (indicador giratorio)
  • Failed
  • o Live .
• Rename the flow: Haz clic en el nombre del flow para renombrarlo. Varios flows pueden tener el mismo nombre — dale a cada nuevo flow un nombre único.
• View mode toggle: Cambia entre la vista de diseño y la vista de remote config.
• Undo/Redo: Haz clic en los iconos de flecha para deshacer o rehacer los cambios del flow. También puedes usar ⌘Z / Ctrl+Z para deshacer.
• Save draft / Publish: Haz clic en Save draft para guardar el progreso sin publicar (⌘ / Ctrl+S). Abre el desplegable para acceder al botón Publish. Solo podrás añadir el flow a un placement después de publicarlo.

Área de vista previa (centro)

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.

Barra de pantalla activa (encima de la previsualización del dispositivo)

• Screen name — una etiqueta con el nombre de la pantalla actual.
• 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. No afecta a la visibilidad de las animaciones en el dispositivo real.
• Add element — abre la biblioteca de elementos 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 vista (barra de herramientas inferior)

Las herramientas de la barra de herramientas 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 y horizontal para previsualizar tu flow en distintas orientaciones.
• Color scheme: Cambia entre los modos claro y oscuro 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)

Configuración y diseño de pantalla

Cuando no hay ningún elemento seleccionado, el panel derecho permite ajustar las propiedades de la pantalla del flow activa, entre las que se incluyen:

• Interacciones con la interfaz del sistema (por ejemplo, si la barra de estado es visible)
• Reglas de diseño automático
• Fondo (color, imagen o vídeo)
• Tamaño del relleno
• Comportamiento del desplazamiento vertical

Si la pantalla contiene ciertos elementos, como cuestionarios interactivos, esta lista se ampliará con las propiedades correspondientes.

Propiedades del elemento

Cuando seleccionas un elemento, el panel derecho te permite cambiar sus propiedades de estilo e interactividad.

Propiedades de diseño

La pestaña Design te 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 y gestiona las localizaciones.
• Typography (solo elementos de texto): Configura fuente, peso, tamaño, color, alineación, decoración y truncado.
• Spacing: Define el margen y el relleno del elemento.
• Effects: Añade sombras externas, sombras internas o desenfoque de capa.
• Animation: Añade efectos animados (p. ej., Pulse) y configura su duración e intensidad.
• Appearance: Ajusta la opacidad y la rotación.
• Layout: Elige la dirección del layout (vertical u horizontal) y determina cómo se distribuyen los elementos hijos.

Propiedades de interacciones

La pestaña Interactions te permite definir qué ocurre cuando el usuario interactúa con el elemento seleccionado. Cada interacción se compone de un trigger y una o más actions:

• 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

El panel izquierdo cambia su funcionalidad según el botón activo. Puedes elegir entre:

• Pantallas y capas
• Añadir elemento
• Productos
• Estilos
• Variables
• Localización
• Editor de IA

Pantallas y capas

El botón de capas abre Pantallas y capas (que se muestra por defecto al abrir el Flow & Paywall Builder).

Muestra cada pantalla como un árbol de capas. Cada elemento de una pantalla es una capa, y los contenedores tienen sus elementos secundarios anidados dentro. Puedes arrastrar y soltar capas para reordenarlas.

Selección de elementos

Si haces clic en el botón más , el panel izquierdo muestra la lista de elementos de UI disponibles y sus variaciones. Haz clic en una entrada para añadirla a la pantalla actual como una nueva capa.

Productos

El botón de productos 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, usa la página Products del Adapty Dashboard.

Estilos guardados

El botón de estilos abre los Estilos guardados.

Aquí puedes editar y gestionar los estilos globales. Si varios elementos de tu flow comparten la misma tipografía o color, guarda esos datos como un estilo global. Así podrás reutilizarlos con un solo clic.

Actualmente, el Flow & Paywall Builder admite dos tipos de estilos globales: estilos de fuente y estilos de color. Cada estilo de color puede tener opcionalmente un valor independiente para el modo oscuro.

Variables

El botón de corchetes abre Variables.

Aquí puedes crear y gestionar variables para tu flow. En tiempo de ejecución, el SDK sustituye los marcadores de posición de las variables por valores reales: atributos del 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

La vista Localización te permite gestionar el contenido traducible de tu flow. Muestra una tabla con cada cadena de texto y elemento multimedia, organizado por pantalla, con columnas para cada idioma. Desde esta vista puedes:

• Añade nuevos idiomas y edita las cadenas localizadas directamente.
• Selecciona el idioma predeterminado de tu flow.
• Controla el estado de las traducciones: cada fila aparece marcada como Done o Missing.
• Filtra por pantalla o muestra solo las traducciones que faltan.
• Import o Export el contenido para traducirlo en bloque fuera de Adapty.

Editor de IA

El botón de destellos abre el chat del Editor de IA.

Describe un cambio en lenguaje natural y Adapty reescribe, rediseña o reorganiza la pantalla que estás viendo. Adapty te indica qué ha cambiado y, con un solo clic, puedes deshacerlo.