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.
• Light theme y Dark theme: Previsualiza el flow en cada tema. Los botones solo aparecen si el flow tiene un tema oscuro añadido.
• Locale: Selecciona una configuración regional para previsualizar tu flow con contenido localizado.
• View options: Activa o desactiva el bisel del dispositivo y las guías del á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 que esté activo. Puedes seleccionar 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. Puedes usar esta vista para gestionar los productos y ofertas del flow.

Estilos

El botón Styles abre el panel Styles.

Crea un estilo para guardar configuraciones de texto o un relleno (como un color, un degradado o una imagen de fondo) y reutilízalo en elementos de varias pantallas. El panel tiene una pestaña Text para estilos de texto y una pestaña Colors para estilos de color.

Variables

El botón con corchetes 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 datos reales: valores que tu app pasa para etiquetas personalizadas, precios de productos, cadenas localizadas y más.

Las variables se agrupan en dos pestañas:

• Personalizadas: Variables que tú creas, de dos tipos:
  • Variables regulares: Sus valores cambian mediante acciones Set variable en el flow.
  • Etiquetas personalizadas: Sus valores provienen de tu app, a través del SDK de Adapty.
• Elementos: Valores determinados por la interacción del usuario, como respuestas a cuestionarios, estados de interruptores 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.
• Mostrar datos de tu app: Muestra un valor de tu app, como el saldo de monedas de un jugador, con una etiqueta personalizada.
• Controlar la visibilidad: Muestra u oculta elementos según condiciones (por ejemplo, mostrar una línea de tiempo de prueba gratuita solo a los usuarios que sean elegibles para ella).
• Interactuar con el usuario: Accede a datos de campos de entrada del usuario, como formularios o cuestionarios.

Localización

El panel Localizations muestra el contenido localizable de tu flow en una tabla, organizada por pantalla, con una columna por cada idioma:

• Texto, incluido cada rama de texto condicional y los marcadores de posición de los campos de entrada.
• El título y el mensaje de cada acción Show alert.
• El destino de cada acción Open URL.
• Imágenes y vídeos, con un archivo por idioma.

Desde este panel puedes:

• Añade nuevas traducciones y edita los textos localizados directamente.
• Traduce con IA.
• Selecciona la traducción predeterminada para tu flow.
• Controla el estado de las traducciones: cada fila se marca como Done, Missing o, en el caso de URLs de acción, Default.
• Filtra por pantalla o estado, o busca por palabra clave.
• Usa Import o Export para todo el flow o para una sola traducción, y traduce 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 reescribirá, cambiará el estilo o reorganizará la pantalla que estás viendo. Adapty te indicará qué cambió y, con un clic, lo deshará.

Para igualar un diseño existente, adjunta una captura de pantalla en lugar de describirlo con palabras.