---
title: "Crea un flow de onboarding personalizado"
description: "Recorre el proceso completo de crear un flow de onboarding de varias pantallas — pantallas, contenido, navegación y ramificación condicional — con un ejemplo práctico."
---

Un flow multipantalla en el Flow Builder es una secuencia de pantallas conectadas por acciones de navegación. El flow puede ser lineal o ramificarse según la entrada del usuario recogida en una pantalla anterior. Este tutorial recorre el proceso completo — crear pantallas, construir su contenido, configurar la navegación y añadir ramificaciones condicionales — usando un flow de onboarding de cuatro pantallas como ejemplo práctico.

El ejemplo usa:
- Un **campo de nombre** que expone el nombre del usuario como variable para personalización.
- Un **cuestionario de opción única** cuya respuesta determina qué pantalla ve el usuario a continuación.
- **Dos rutas ramificadas** con contenido adaptado para cada segmento de audiencia.
- Un **paywall** como pantalla final.

El mismo patrón aplica a cualquier flow que personalice contenido según la entrada del usuario.

¿Prefieres el formato en vídeo? Este tutorial de inicio rápido recorre el mismo proceso de principio a fin:
<div style={{
    maxWidth: '560px',
    margin: '0 auto 2rem',
    position: 'relative',
    aspectRatio: '16/9',
    width: '100%'
}}>
    <iframe
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%'
        }}
        src="https://www.youtube.com/embed/aa-m459VIuY?si=zN_Co6B6qB88UPZP"
        title="YouTube video player"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerPolicy="strict-origin-when-cross-origin"
        allowFullScreen
    />
</div>
## Antes de comenzar \{#before-you-start\}

- [Crea productos](create-product) en el Adapty Dashboard. El ejemplo del flow usa dos: una suscripción Anual y una Mensual.
- [Conecta Adapty con App Store y Google Play](integrate-payments).
## 1. Configurar estilos reutilizables \{#1-set-up-reusable-styles\}

Los estilos reutilizables te permiten aplicar tipografía y colores coherentes en todas las pantallas con un solo clic. Los estilos de color tienen una variante clara y una oscura, por lo que el flow admite ambos temas de forma automática.

Para ver las instrucciones completas, consulta [Estilo de elementos — Estilos reutilizables](builder-styling#reusable-styles).

Para configurar los estilos:
1. En el panel izquierdo, abre el panel **Styles** Styles.
2. En la pestaña **Colors**, haz clic en **Plus Create style** y añade los colores que vas a reutilizar. Para cada color, selecciona un valor en Light, cambia a la pestaña Dark y selecciona un valor en Dark.

3. En la pestaña **Text**, haz clic en un estilo existente para editar su fuente, peso y tamaño, o haz clic en **Plus Create style** para añadir preajustes personalizados.

## 2. Crea las pantallas \{#2-create-the-screens\}

Un flow es una secuencia de pantallas. Configura la primera pantalla con la base compartida — layout, fondo y área segura — y luego duplícala para las demás. Así, todas las pantallas comparten la misma base y solo tienes que configurarla una vez.

Para más información sobre cómo gestionar pantallas, consulta [Pantallas y capas — Gestionar pantallas](paywall-layout-and-products#manage-screens).

Para configurar las pantallas:
1. Haz clic en un área vacía del lienzo en la primera pantalla para abrir la configuración de pantalla.
2. En **System UI**, desactiva **Safe area** para que los fondos y los elementos alineados con los bordes puedan extenderse hasta los extremos de la pantalla.
3. En **Fill**, elige un tipo de fondo y configúralo — por ejemplo, una **Image** Image que aparezca detrás de todas las pantallas del flow.
4. En **Layout**, establece la dirección en **Vertical** Vertical y elige una distribución que se ajuste a tu diseño.

5. En la sección **Screens** del panel izquierdo, haz clic en el menú de tres puntos Menú contextual en la primera pantalla y elige **Duplicate**. Repite hasta tener cuatro pantallas en total — el segundo camino de ramificación se añadirá más adelante duplicando el primero.
6. Renombra cada pantalla según su función — en nuestro ejemplo: `Welcome`, `Quiz`, `Rock path` y `Paywall`.

## 3. Construye la pantalla de introducción \{#build-the-introduction-screen\}

La primera pantalla suele marcar el tono general: un titular, una lista de características y una llamada a la acción que abre el resto del flow. En nuestro ejemplo, esta es la pantalla de bienvenida.

Haz clic en la pantalla **Welcome** en el panel **Screens** y añade los elementos:

1. Añade la imagen principal. Haz clic en **+** > **Media** > **Image**, sube tu imagen y ajusta los márgenes si es necesario.

2. Añade un título: haz clic en **+** > **Text**, elige un estilo de texto de encabezado de tus estilos guardados y edita el campo **Content**.

3. Añade la lista de características. Haz clic en **+** > **List** > **Icon Cards**, luego edita el icono y la etiqueta de cada tarjeta.

4. Añade un botón de navegación principal en la parte inferior. La acción se configurará en el paso de navegación.

## 4. Construye la pantalla de entrada y cuestionario \{#build-the-input-and-quiz-screen\}

La segunda pantalla recoge información del usuario. En nuestro ejemplo, pide un nombre y una respuesta de opción única que determina qué camino verá el usuario a continuación.

Para más información sobre entradas y cuestionarios, consulta [Entradas y formularios](builder-inputs-and-forms) y [Encuestas y cuestionarios](onboarding-quizzes).

Haz clic en la pantalla **Quiz** en el panel **Screens**, y luego añade los elementos. Cada grupo de la pantalla — introducción, pregunta + entrada, pregunta + cuestionario — está dentro de su propio Vertical Stack para que los elementos relacionados se mantengan juntos visualmente.
1. Añade el titular y el cuerpo de la introducción. Haz clic en **+** > **Text** > **H1** para el titular y en **+** > **Text** > **Body** para el texto de apoyo.
2. Agrupa la introducción. Haz clic en **+** > **Layout** > **Vertical Stack**, arrastra el nuevo stack a la parte superior del árbol de capas y luego arrastra el H1 y el body dentro de él.

3. Añade la primera pregunta y su campo. Haz clic en **+** > **Text** para el título de la pregunta, luego en **+** > **Inputs** > **Text** para el campo.
4. Establece el **Element ID** del campo en la pestaña **Design** — en nuestro ejemplo, `name`. Esto expone el valor como una variable a la que otras pantallas pueden hacer referencia.

5. Agrupa el título y el campo de texto en un Vertical Stack de la misma manera que en la introducción.
6. Añade la segunda pregunta y el quiz. Haz clic en **+** > **Text** para el título, luego en **+** > **Quiz** y elige una plantilla de disposición como Icon Options. Configura las opciones —en nuestro ejemplo, `Rock` y `Hip hop`.
7. Agrupa el título y el quiz en un Vertical Stack de la misma manera.
8. Establece los IDs de cada opción. Selecciona cada opción del quiz, abre la pestaña **Interactions** y define su **Element ID**. Estos IDs se usan en la navegación condicional más adelante.

9. Cambia el quiz a selección única: haz clic en un área vacía del lienzo para abrir **Screen settings**, desplázate hacia abajo hasta **Selectable Groups**, haz clic en el nombre del grupo del quiz y establece el tipo en **Single choice**.

10. Añade un botón principal en la parte inferior — es el botón Siguiente que activa la ramificación.

## 5. Crea el primer camino de ramificación \{#5-build-the-first-branching-path\}

Cada pantalla de camino adapta el contenido a un segmento de audiencia. En nuestro ejemplo, el camino Rock muestra contenido enfocado en ese género: playlists, artistas y recomendaciones.

Para más información sobre variables, consulta [Variables](onboarding-variables).

Para crear la pantalla:
1. En el panel **Screens**, haz clic en la pantalla **Rock path**.
2. Añade un titular. Coloca el cursor en el campo **Content** donde debe aparecer la personalización, haz clic en el icono de variable Variable icon y abre la pestaña **Elements**. Selecciona la pantalla donde está el campo de entrada — en nuestro ejemplo, **Quiz** — y luego selecciona la variable de valor del campo. El selector la resuelve como `<elementId>.value` — en nuestro ejemplo, `name.value`. En tiempo de ejecución, el titular se actualiza con lo que el usuario haya escrito.

3. Añade el cuerpo del texto como elementos de texto adicionales, adaptados al segmento de audiencia de este camino.
4. Añade un botón principal en la parte inferior.

## 6. Construye la segunda ramificación del flujo \{#build-the-second-branching-path\}

Las pantallas de una ramificación suelen compartir la misma estructura: solo cambia el contenido. Duplica la primera pantalla de la ruta y actualiza el contenido.

Para duplicar y actualizar:

1. En el panel **Screens**, selecciona la primera pantalla de la ruta y pulsa ⌘D / Ctrl+D para duplicarla. La copia aparece al final de la lista de pantallas.
2. Renombra la copia — en nuestro ejemplo, `Hip hop path` — y arrástrala al lugar correcto en la lista de pantallas, de modo que quede junto a la pantalla de la que se duplicó.

3. Actualiza el texto del cuerpo para el otro segmento de audiencia. El titular personalizado sigue funcionando: la variable se mantiene.

## 7. Construye el paywall \{#build-the-paywall\}

La pantalla final es el paywall, donde el usuario puede suscribirse. Para un recorrido más completo sobre la mecánica de los paywalls, consulta [Crea una pantalla de paywall básica](basic-paywall-screen). La versión que se muestra aquí resume ese recorrido.

Haz clic en la pantalla **Paywall** en el panel **Screens**, y añade los elementos:

1. Añade un **Horizontal Stack** en la parte superior e inserta un botón **Close** dentro de él. El preset de Close ya viene preconfigurado.
2. Añade la imagen principal, el titular (con la misma variable de personalización que en las pantallas de ruta) y un subtítulo como texto de apoyo.

3. Añade los productos: haz clic en **+** > **Products** y elige **Vertical List**. Asigna a cada tarjeta un producto desde el desplegable en la pestaña **Design**.
4. Haz clic en la tarjeta del producto predeterminado y activa **Set as default product** para que aparezca preseleccionado al cargar la pantalla.

5. Añade el botón de compra. Haz clic en **+** > **Buttons** y elige un preset. En la pestaña **Interactions**, haz clic en **Add trigger** > **On tap** > **Add action** y establece **Action** en **Purchase** con **Product** como `products.selectedProduct`.

6. Añade los enlaces del pie de página. Haz clic en **+** > **Buttons** > **Links** — la fila incluye Restore Purchases, Terms of Use y Privacy Policy. El enlace Restore ya está preconfigurado. Para Terms y Privacy, selecciona el texto de cada enlace en el campo **Content**, haz clic en el icono de enlace de la barra de formato y pega la URL.

## 8. Conectar la navegación entre pantallas \{#wire-navigation-between-the-screens\}

Las pantallas no se conectan entre sí automáticamente. Usa los disparadores **On tap** y las acciones **Navigate to** para conectar el botón principal de cada pantalla con la siguiente. Una pantalla que se ramifica según la entrada del usuario utiliza una **Conditional action** en su lugar.

Para más información sobre navegación y acciones condicionales, consulta [Navegación e interacción](onboarding-navigation-branching) y [Acciones — Acciones condicionales](onboarding-actions#conditional-actions).

Para conectar la navegación del flow de ejemplo:
1. **Navegación estática desde la pantalla de introducción.** Abre la pantalla de bienvenida, selecciona el botón principal y cambia a la pestaña **Interactions**. Haz clic en **Add trigger** > **On tap** > **Add action**, establece **Action** en **Navigate to** y elige la siguiente pantalla — en nuestro ejemplo, la pantalla del Quiz.

2. **Navegación condicional desde el cuestionario.** Abre la pantalla Quiz, selecciona el botón Next y añade un trigger **On tap** con una **Conditional action**. Configura la regla IF/ELSE:
   - En el selector de variables, abre la pestaña **Elements**, selecciona la pantalla **Quiz** y elige `quiz.selectedOptionId`.
   - Usa el operador **Equals** y compara con el ID de una de las opciones — en nuestro ejemplo, la opción Rock.
   - **IF** la comparación coincide, activa **Navigate to** y selecciona la primera pantalla de ruta.
   - **ELSE**, activa **Navigate to** y selecciona la segunda pantalla de ruta.

3. **Navegación estática desde cada ruta de bifurcación hasta el paywall.** Repite el patrón del paso 1 en cada pantalla de ruta, con el paywall como destino.

## Próximos pasos \{#next-steps\}

- [Guarda y publica tu flow](builder-save-publish).
- [Añade el flow a un placement](create-placement) para empezar a mostrárselo a los usuarios.
- Si quieres flows específicos por audiencia (en lugar de ramificaciones dentro del flow), crea segmentos de audiencia y asigna distintos flows en la página de Placement.