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)

• 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 ConfigRemote 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. Solo puedes añadir tu 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 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 Plus — 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 visualización (barra de herramientas inferior)

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)

Ajustes y disposición de pantalla

Cuando no hay ningún elemento seleccionado, el panel derecho te permite ajustar las propiedades de la pantalla del flow 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, esta lista se ampliará con las propiedades correspondientes.

Propiedades del elemento

Al seleccionar un elemento, el panel derecho permite modificar sus propiedades de estilo e interacción.

Propiedades de diseño

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 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

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

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

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

Pantallas y capas

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

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

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

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

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

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.