Practica: Prototipa la interacción completa de la app

Tipo de lección: Video

Concepto clave

Prototipar una interacción completa significa crear un flujo navegable que simule cómo un usuario real usaría tu app. Piensa en ello como ensayar una obra de teatro: tienes los personajes (pantallas), el guión (flujo), y necesitas que los actores (usuarios) puedan moverse entre escenas (pantallas) de forma natural.

En Figma, esto se logra conectando frames (pantallas) mediante conexiones de prototipo. Cada conexión define qué pasa cuando un usuario hace clic, desliza o interactúa con un elemento. La clave está en anticipar todas las rutas posibles que un usuario podría tomar, desde la pantalla de inicio hasta completar una tarea.

"Un buen prototipo no solo muestra cómo se ve la app, sino cómo se siente usarla." - Principio de diseño de producto

Cómo funciona en la práctica

Imagina que estás diseñando una app de lista de tareas. Sigue estos pasos para prototipar la interacción de agregar una nueva tarea:

1. Crea tres frames: Pantalla principal (con lista vacía), Pantalla de agregar tarea (con formulario), y Pantalla principal actualizada (con la nueva tarea en la lista).
2. En la pantalla principal, selecciona el botón "+" y, en el panel Prototype a la derecha, haz clic en el círculo azul que aparece al lado del elemento. Arrastra la conexión hacia el frame de "Agregar tarea".
3. Configura la interacción: en el panel, elige On Click como trigger y Navigate To como acción. Esto hará que al hacer clic, el usuario vaya a la pantalla de agregar tarea.
4. Repite el proceso para conectar el botón "Guardar" en la pantalla de agregar tarea hacia la pantalla principal actualizada.

Ahora, al hacer clic en Present (ícono de play), podrás navegar entre pantallas como en una app real.

Caso de estudio

Vamos a aplicar esto a nuestra app de productividad. Supongamos que una funcionalidad clave es crear un nuevo proyecto. Aquí está el flujo completo:

Pantalla	Elemento interactivo	Acción del usuario	Pantalla destino
Dashboard	Botón "Nuevo proyecto"	Clic	Formulario de proyecto
Formulario de proyecto	Campo "Nombre"	Escribir "App móvil"	(Misma pantalla, solo entrada de datos)
Formulario de proyecto	Botón "Crear"	Clic	Dashboard actualizado
Dashboard actualizado	Tarjeta "App móvil"	Clic	Detalles del proyecto

En Figma, crearías frames para cada pantalla y conectarías los elementos como se describe. Usa Auto Layout en las listas para que los elementos se ajusten automáticamente al agregar nuevos, como en la pantalla dashboard actualizada.

Errores comunes

• Olvidar conexiones de retroceso: Los usuarios necesitan volver atrás. Siempre incluye botones "Cancelar" o "Atrás" conectados a la pantalla anterior.
• Prototipar solo el camino feliz: No asumas que todo saldrá bien. Añade pantallas para errores, como "Nombre de proyecto requerido" si el usuario deja un campo vacío.
• Ignorar los estados de interacción: Los botones deben cambiar al pasar el mouse o al hacer clic. Usa variants en Figma para mostrar estados como hover o pressed.
• No probar en dispositivos reales: Siempre prueba tu prototipo en un teléfono o tablet usando la app Figma Mirror para verificar que los tamaños y gestos funcionen.
• Conectar elementos incorrectos: Asegúrate de que cada conexión vaya desde el elemento interactivo (ej., botón) y no desde el frame completo, para evitar clics accidentales.

Checklist de dominio

1. He creado al menos 5 frames que representan pantallas clave de la app.
2. Todas las conexiones de prototipo tienen triggers claros (On Click, On Drag) y acciones definidas (Navigate To, Open Overlay).
3. Incluí flujos alternativos, como cancelar una acción o manejar errores de entrada.
4. Usé Auto Layout en listas o elementos repetitivos para asegurar que se adapten al contenido.
5. Probé el prototipo en modo Present y verifiqué que la navegación sea intuitiva.
6. Documenté las interacciones clave en notas o comentarios dentro de Figma para referencia del equipo.
7. Solicité feedback de un compañero o usuario testeando el prototipo y ajusté basado en sus comentarios.

Prototipa el flujo de completar una tarea en la app de productividad

En este ejercicio, crearás un prototipo interactivo para una funcionalidad esencial: marcar una tarea como completada. Sigue estos pasos:

1. Prepara los frames: Crea tres frames en Figma:
   • Frame 1: Lista de tareas con al menos dos tareas (ej., "Reunión de equipo" y "Enviar reporte"). Usa Auto Layout para alinearlas verticalmente.
   • Frame 2: Lista de tareas actualizada idéntica al Frame 1, pero con la primera tarea tachada o con un indicador de completado.
   • Frame 3: Confirmación (opcional): un overlay o pantalla que diga "Tarea completada" si quieres añadir feedback.
2. Diseña los elementos interactivos: En el Frame 1, añade un checkbox o botón al lado de cada tarea. Asegúrate de que sea claro y fácil de tocar (mínimo 44x44 píxeles).
3. Conecta las interacciones:
   • Selecciona el checkbox de la primera tarea en el Frame 1. En el panel Prototype, arrastra una conexión al Frame 2 (lista actualizada). Configura el trigger como On Click y la acción como Navigate To.
   • Si añadiste el Frame 3, conecta el checkbox a ese frame primero, y luego desde el Frame 3 añade un botón "OK" conectado al Frame 2.
4. Prueba y ajusta: Haz clic en Present (ícono de play) y prueba el flujo. Verifica que al hacer clic en el checkbox, la app navegue correctamente y muestre la tarea completada.

Entrega: Comparte el link de tu archivo Figma con los frames y conexiones visibles.

Pistas

• Usa variants en Figma para crear estados del checkbox (no marcado, marcado) y asímostrar el cambio visual al completar.
• Si el prototipo se siente lento, revisa que no hayas conectado elementos innecesarios; simplifica a solo los clics esenciales.
• Para feedback inmediato, considera usar Smart Animate en las conexiones para transiciones suaves entre pantallas.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.