--- title: "Una guía interactiva animada para tu app GoodBarber" description: "En GoodBarber, la guía interactiva, o walkthrough, se configura una vez, en cinco pasos como máximo, cada uno con una imagen o una animación Lottie." canonical_url: "https://es.goodbarber.com/blog/como-animar-la-guia-interactiva-de-mi-app-a1204/" lang: es date: 2026-11-13 last_updated: 2026-11-13 --- # ¿Cómo animar la guía interactiva de mi app? En GoodBarber, la guía interactiva, o walkthrough, presenta tu app en el primer lanzamiento, en cinco pantallas como máximo que solo se ven una vez. Tu app tiene apenas unos segundos para presentarse, y la guía se configura en unos minutos en el back office, con los colores y las fuentes de tu app. Cada paso muestra una imagen o, si quieres, una animación Lottie. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://es.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer [Elige **GoodBarber** como tuFuente de noticias preferidaElige **GoodBarber** como tu](https://www.google.com/preferences/source?q=es.goodbarber.com) 13 nov 2026 · 7 min de lectura ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98688323-68887955.jpg?v=1794562882.6016376) Aquí tienes lo que una guía interactiva aporta a tu app, los dos layouts entre los que elegir y cómo animar un paso. ## Qué es una guía interactiva y cuándo aparece ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98688323-68887956.jpg?v=1794562884.4136474) La guía interactiva es tu app presentándose. En el back office de GoodBarber, la encuentras en **Mi App › Guía interactiva**. Aparece en el teléfono, una sola vez, la primera vez que se abre la app después de instalarla. Llega antes de las solicitudes de permisos, notificaciones o ubicación, para que lo primero que se vea sea tu app. Tiene **hasta cinco pasos**, cada uno con un medio, un título y una descripción, todos opcionales. Alrededor, los mismos elementos de un paso a otro, el título de la página o tu logo, el botón **Omitir**, el pager y el botón **Siguiente**, que se convierte en **Empezar** en el último paso. Se avanza tocando el botón o deslizando la pantalla. El fondo, las fuentes, el color del botón y del pager son los de tu app, es nuestro principio "Set once, consistent everywhere". No tienes nada que volver a dibujar. La guía interactiva es el primer paso del onboarding, cuyas [buenas prácticas](https://es.goodbarber.com/blog/onboarding-de-apps-moviles-buenas-practicas-para-llegar-antes-al-valor-a1141/) hemos detallado. ## Polaroid o Immersive, dos layouts para los pasos de la guía ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98688323-68887957.jpg?v=1794562886.74166) El back office de GoodBarber ofrece dos layouts para los pasos. En **Polaroid**, el medio aparece encima del título, en sus proporciones originales, nunca ampliado, y una imagen de 1200 × 1200 píxeles basta. En **Immersive**, el medio ocupa toda la pantalla, como un fondo, y el texto se coloca encima. Prevé 1536 × 2048 píxeles y elige un **Efecto en las imágenes**, Ninguno, Opacidad o Gradient, para que el texto siga siendo legible sobre la foto. En los dos layouts, la **alineación de contenido** ofrece seis posiciones, a la izquierda o al centro, arriba, en medio o abajo. Una regla sencilla para elegir. Una foto que transmite un ambiente pide Immersive, es lo que hizo la escuela de música Eastside Music Workshop con sus fotos de clases. Un dibujo o una animación que explica pide Polaroid, con un fondo propio, es la elección de Unit 7, el taller de serigrafía, cuyos tres pasos están dibujados. ## Animar un paso, con una animación Lottie en lugar de la imagen ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98688323-68887958.jpg?v=1794562888.3256688) Una imagen dice lo que hace tu app. Una animación lo muestra. En el primer paso de Unit 7, una franja del calendario se llena de verde y se estampa la palabra BOOKED, y entiendes que se reserva desde el teléfono antes incluso de leer la frase. En el segundo, una racleta atraviesa el marco y el contador pasa de 23 a 24 impresiones. En el tercero, un tambor de Riso señalado como vacío vuelve a estar disponible, con AVAILABLE como pegatina. Tres gestos de tres segundos, en bucle. Es nuestro principio "Polish you can feel", el movimiento que hace sentir una app bien hecha. Estas animaciones son archivos **Lottie**, un formato de animación vectorial, ligero, que la app reproduce directamente. Las encuentras en la biblioteca LottieFiles, como explica [nuestra ayuda](https://es.goodbarber.com/help/organizar-tu-contenido-r93/anadir-lottiefiles-a-tu-guia-interactiva-a427/), o las mandas dibujar con los colores de tu app, como las de Unit 7. En GoodBarber, una animación se configura tan fácilmente como una imagen. En el paso, elige **LottieFiles** en lugar de **Imagen**, añade el archivo y luego ajusta la **Velocidad de reproducción**, de x0.5 a x3, y la **Reproducción en bucle**. En todos los casos, la animación vuelve a empezar cada vez que aparece su paso. En Polaroid, ocupa el ancho de la pantalla y conserva sus proporciones. En Immersive, llena la pantalla como una foto. La animación sigue siendo una opción. Un paso funciona muy bien con una imagen fija, y las dos se combinan en una misma guía. ## Configura la guía interactiva en GoodBarber [Animación: en el panel de la guía interactiva, el paso 1 pasa de una imagen a una animación Lottie, y luego la Alineación de contenido pasa abajo a la izquierda](https://player.vimeo.com/video/1246541295?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) La guía interactiva es una extensión de GoodBarber. Instálala desde **Extensiones Store › Todas las extensiones**, en la ficha **[Guía interactiva](https://es.goodbarber.com/extensions/walkthrough/)**, con el botón **Instalar**. Cuesta 5 € al mes en las ofertas Standard y Premium, y está incluida en la oferta Pro. Aparece entonces el menú **Mi App › Guía interactiva**, con la vista previa de tu app al lado. 1. **Elige el layout**, Immersive o Polaroid, en la parte superior del panel. 2. **Añade tus pasos**, cinco como máximo. Haz clic en **Agregar un paso** y luego en **Imagen** o **LottieFiles**. Para una animación, la pestaña **Archivo** recibe tu archivo Lottie JSON, y la pestaña **URL**, el enlace de asset de una animación de LottieFiles. Ajusta luego la velocidad y el bucle, y escribe el **Título** y la **Descripción**. La vista previa, al lado, se abre en el primer paso, y su botón **Siguiente** hace pasar los demás. 3. **Configura los Ajustes generales**, comunes a todos los pasos. El **Color de fondo**, la **Alineación de contenido**, el **Título de la página** o un logo en su lugar, la fuente y el color del título y de la descripción del paso, el **Botón de saltar** y el **Botón "Siguiente"**, el color del **Pager** y, en Immersive, el **Efecto en las imágenes**. Todo se guarda sin botón que pulsar, y la vista previa lo refleja. En el vídeo, la Alineación de contenido pasa abajo a la izquierda, y todos los pasos la siguen. Para que un solo paso tenga sus propios ajustes, un fondo propio, otra alineación, otro color de título o de botón, pasa por el JSON de tu app. La extensión gratuita **Edición avanzada** lo abre con un clic en { EDICIÓN }, como para [la sombra](https://es.goodbarber.com/blog/como-ajustar-la-sombra-en-mi-app-a1160/), [los bordes](https://es.goodbarber.com/blog/como-ajustar-los-bordes-en-mi-app-a1169/) o [la forma](https://es.goodbarber.com/blog/que-forma-dar-a-mi-app-esquinas-rectas-redondeadas-o-redondas-a1192/). El editor se abre en walkthrough. Despliega steps y luego el paso que vas a modificar, y añade las claves del panel que quieras cambiar. Por ejemplo, para que solo el primer paso coloque su texto abajo a la izquierda, haz clic en "+ Añadir", escribe **contentAlign** en el campo newKey y el valor bottom_left, y luego "Añadir". Por último, haz clic en "Guardar". Los demás pasos conservan la Alineación de contenido del panel. ## Antes, después: el mismo paso, en imagen y luego en animación [Animación: el mismo paso de la guía interactiva, con una imagen fija a la izquierda y su animación Lottie a la derecha](https://player.vimeo.com/video/1246541294?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Para ver lo que cambia una animación, aquí tienes dos veces el mismo paso, el de la tirada en Unit 7. A la izquierda, la imagen fija. El dibujo está cuidado, pero quieto. Resulta un poco abstracto y no se entiende enseguida lo que muestra. A la derecha, la misma ilustración animada. La racleta atraviesa la pantalla de serigrafía, la tinta aparece a su paso, el contador pasa de 23 a 24, y se reconoce al instante una tirada en marcha. Nada más ha cambiado, ni el texto, ni los colores, ni el botón. Aquí, el movimiento hace que el paso se lea bien. Pero incluso cuando el dibujo ya es claro, la animación da más vida a la guía y muestra que tu app está cuidada. ## Mi guía interactiva favorita es animada [Animación: la guía interactiva completa de una app de taller de serigrafía, desde el lanzamiento hasta la pantalla de inicio](https://player.vimeo.com/video/1246541293?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Lo que prefiero es una guía interactiva animada. Para presentar una app en pocas pantallas, no conozco nada más elocuente que el movimiento. La de Unit 7, un taller de serigrafía compartido, es un buen ejemplo. Está en Polaroid, sobre un fondo Charcoal #282727, con el logo del taller en lugar del título. Los títulos están en Archivo Black 28, las descripciones en Archivo 17, en un gris Concrete #A7A7A7. El botón, con esquinas rectas, y el pager toman el verde del taller, Unit Green #B9FF00. Las tres animaciones Lottie se dibujaron para la app, en sus colores, y cada una muestra en tres segundos un gesto de los miembros, reservar, imprimir, avisar. En veinte segundos, se entiende para qué sirve la app, y la pantalla de inicio toma el relevo. **La guía interactiva en resumen** - En una app GoodBarber, la **guía interactiva**, o walkthrough, aparece una sola vez, en el primer lanzamiento en el teléfono, y tiene hasta cinco pasos. - Cada paso lleva un medio, un título y una descripción, todos opcionales. Alrededor, el título de la página o tu logo, el botón **Omitir**, el pager y el botón **Siguiente**, que se convierte en **Empezar** en el último paso. - Dos layouts, **Polaroid**, el medio encima del título, e **Immersive**, el medio a pantalla completa con un efecto para que el texto sea legible. - Una animación **Lottie** se coloca como una imagen, con una velocidad de x0.5 a x3 y reproducción en bucle. Vuelve a empezar cada vez que aparece su paso. - Todo se configura en **Mi App › Guía interactiva**, y cada paso puede tener sus propios ajustes en el JSON, con la extensión gratuita **Edición avanzada**. ## Te toca Instala la Guía interactiva desde **Extensiones Store**, abre **Mi App › Guía interactiva** y añade un primer paso con una imagen, tu título y una frase. La vista previa lo muestra enseguida. Luego prueba una animación Lottie en lugar de la imagen y mira cómo la página cobra vida. ¿Todavía no tienes app? [Crea la tuya](https://es.goodbarber.com/create/) con GoodBarber, el Mobile App Builder. Sigue a GoodBarber en Google [![Añadir como fuente preferida en Google](https://portal.ww-cdn.com/portal_static/images/preferred-source/badge-es.ecc58798e9f7.png)](https://www.google.com/preferences/source?q=es.goodbarber.com) ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) Sobre el autor Marie-Pierre Jeffard UI Designer Soy UI Designer en GoodBarber. Design system de las apps, componentes, layouts, sitio web, ilustraciones, animaciones: todo lo que hago gira en torno a la interfaz. Lo que me gusta de nuestro producto es inventar reglas universales, que funcionan en todas las pantallas y acogen todas las identidades visuales. La app se convierte en el escaparate de tu contenido. Me gusta lo que parece sencillo, y todo el trabajo invisible que hace falta para lograrlo: las reglas, las decisiones y las restricciones que hacen que una interfaz se sostenga. Eso es lo que cuento aquí. [Más de Marie-Pierre](https://es.goodbarber.com/blog/author/marie-pierre-jeffard/)[LinkedIn](https://www.linkedin.com/in/marie-pierre-jeffard/)