Practica: Prototipa un flujo de inicio de sesión

Concepto clave

Prototipar un flujo de inicio de sesión significa crear una simulación interactiva de cómo los usuarios acceden a una aplicación. Piensa en esto como ensayar una obra de teatro: diseñas cada escena (pantallas) y defines cómo los actores (usuarios) pasan de una a otra. En Figma, esto se logra conectando frames con conexiones interactivas que imitan clics, toques o entradas de datos.

Un flujo típico incluye: pantalla de bienvenida, formulario de inicio de sesión, recuperación de contraseña y dashboard. La clave es priorizar la experiencia del usuario: ¿qué pasa si olvidan su contraseña? ¿Cómo saben si sus credenciales son incorrectas? Prototipar te permite responder estas preguntas antes de escribir código, ahorrando tiempo y recursos.

Cómo funciona en la práctica

Sigue estos pasos para prototipar en Figma:

1. Crea los frames: Diseña cada pantalla del flujo (ejemplo: Login, Error, Dashboard) en frames separados.
2. Activa el modo Prototype: Haz clic en el ícono "Prototype" en la barra superior de Figma.
3. Conecta los frames: Arrastra desde el elemento interactivo (como un botón) hasta el frame destino. Por ejemplo, conecta el botón "Iniciar sesión" en el formulario al frame del Dashboard.
4. Configura la interacción: Selecciona el tipo (ejemplo: On Click), la animación (ejemplo: Instant) y el destino.
5. Prueba el prototipo: Usa el botón "Present" para simular cómo navegaría un usuario real.

Ejemplo con datos: Si tu formulario tiene validación, crea un frame "Error" que aparezca cuando el usuario ingresa credenciales incorrectas. Conecta el botón "Enviar" a este frame con una condición simulada.

Caso de estudio

Imagina que diseñas una app de banca móvil. El flujo de inicio de sesión incluye:

• Pantalla 1: Bienvenida con logo y botón "Acceder".
• Pantalla 2: Formulario con campos para usuario y contraseña, más un enlace "¿Olvidaste tu contraseña?".
• Pantalla 3: Dashboard principal tras un login exitoso.
• Pantalla 4: Modal de error si las credenciales fallan.

En Figma, conectas así:

• Desde el botón "Acceder" en Pantalla 1 hasta Pantalla 2.
• Desde el botón "Iniciar sesión" en Pantalla 2 hasta Pantalla 3 (éxito) o Pantalla 4 (error).
• Desde el enlace "¿Olvidaste tu contraseña?" hasta un nuevo frame de recuperación.

Dato importante: En pruebas reales, el 30% de los usuarios falla el login en su primer intento. Prototipar errores mejora la retención.

Errores comunes

• Olvidar estados de error: No incluir pantallas para credenciales incorrectas o red lenta. Solución: Diseña al menos un frame de error y conéctalo al formulario.
• Conectar elementos incorrectos: Vincular todo el frame en vez del botón específico. Solución: Asegúrate de seleccionar solo el elemento interactivo (ejemplo: el botón, no el fondo).
• Ignorar la retroalimentación visual: No mostrar cambios al hacer clic (ejemplo: botón que no parece presionado). Solución: Usa variantes de componentes para estados como "hover" o "pressed".
• Prototipar demasiado pronto: Crear interacciones antes de definir la estructura visual. Solución: Completa el diseño estático primero, luego añade conexiones.

Checklist de dominio

• He creado al menos 4 frames para el flujo de inicio de sesión (ejemplo: bienvenida, formulario, dashboard, error).
• He conectado cada elemento interactivo (botones, enlaces) a su frame destino usando el modo Prototype.
• He configurado interacciones con tipos claros (On Click) y animaciones simples (Instant).
• He probado el prototipo en modo Present y verificado que la navegación sea intuitiva.
• He incluido un frame para manejar errores o casos extremos (como contraseña olvidada).
• He usado nombres descriptivos para frames (ejemplo: "Login_Form") para mantener el orden.
• He solicitado feedback a un compañero sobre la usabilidad del flujo.

Prototipa un flujo de inicio de sesión para una app de delivery de comida

En este ejercicio, crearás un prototipo interactivo en Figma para simular cómo un usuario inicia sesión en una app de delivery. Sigue estos pasos:

1. Abre Figma y crea un nuevo archivo. Nombra el proyecto "Practica_Login_Delivery".
2. Diseña 5 frames estáticos con las siguientes pantallas:
   • Frame 1: Pantalla de bienvenida con logo de la app y un botón grande "Iniciar sesión".
   • Frame 2: Formulario de inicio de sesión con campos para email y contraseña, un botón "Acceder" y un enlace "Regístrate aquí".
   • Frame 3: Dashboard principal que muestre "Bienvenido, [Usuario]" y opciones de comida.
   • Frame 4: Pantalla de error con mensaje "Credenciales incorrectas" y un botón "Reintentar".
   • Frame 5: Pantalla de registro con campos básicos (nombre, email, contraseña) y botón "Crear cuenta".
3. Activa el modo Prototype (ícono en la barra superior) y conecta los frames:
   • Desde el botón "Iniciar sesión" en Frame 1 hasta Frame 2.
   • Desde el botón "Acceder" en Frame 2 hasta Frame 3 (para simular éxito) y hasta Frame 4 (para simular error). Configura dos conexiones desde el mismo botón.
   • Desde el enlace "Regístrate aquí" en Frame 2 hasta Frame 5.
   • Desde el botón "Reintentar" en Frame 4 hasta Frame 2.
4. Configura cada interacción con tipo "On Click" y animación "Instant". Asegúrate de que los destinos sean correctos.
5. Prueba tu prototipo haciendo clic en "Present" y navega como lo haría un usuario. Verifica que todos los caminos funcionen.

Al final, exporta un enlace de prototipo compartido para revisión.

• Usa Auto Layout en los formularios para alinear campos fácilmente.
• Si tienes problemas con conexiones, verifica que estés arrastrando desde el elemento (ejemplo: borde del botón) y no desde el fondo del frame.
• Para simular el error, crea dos conexiones desde el botón "Acceder": una al Dashboard y otra a la pantalla de error, pero en un proyecto real usarías condiciones.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.