Transformar un diseño estático en una experiencia interactiva es uno de los pasos más poderosos dentro de Figma. Cuando pasas de la pestaña design a la pestaña prototype, dejas de ver pantallas aisladas y comienzas a construir una simulación funcional que se comporta como una aplicación real, sin escribir una sola línea de código.
¿Qué es un prototipo y por qué necesitas flujos de navegación?
Un prototipo no es código: es un conjunto de pantallas conectadas entre sí que permiten simular la experiencia de uso de una app. El concepto central aquí es el flujo (flow), que se define como un grupo de frames conectados que forman un recorrido específico [0:42]. Por ejemplo, en el proyecto Finwise se organizan dos flujos principales:
- Main navigation: agrupa dashboard, transacciones, presupuestos, cuentas y perfil.
- Transaction flow: cubre el recorrido completo desde la lista de transacciones, pasando por el empty state, hasta la creación y el detalle de un gasto o ingreso.
Cada flujo requiere un punto de entrada (flow starting point), que es el frame donde la simulación arranca [1:02]. Esto garantiza que al presionar el botón de play, el prototipo siempre inicie en la vista correcta.
¿Cómo se configura el dispositivo y el punto de inicio?
Sin seleccionar ningún elemento, la pestaña prototype permite definir configuraciones generales. Lo primero es establecer el dispositivo de emulación, en este caso un iPhone 17 Pro Max, para que coincida con las dimensiones de las pantallas diseñadas [2:05]. También puedes asignar un color de fondo, aunque esto es meramente visual y no afecta la lógica del prototipo.
Para crear el punto de entrada, selecciona el frame deseado (por ejemplo, dashboard) y elige la opción flow starting point. Asígnale un nombre descriptivo como "main navigation" [2:30]. Al abrir el prototipo, verás la emulación del teléfono con esa primera vista, donde los constraints configurados previamente siguen funcionando.
¿Cómo se comparte un prototipo con el equipo?
Desde la vista de presentación, en la esquina superior izquierda, encontrarás la opción share prototype [3:10]. Puedes invitar personas directamente o copiar el enlace para distribuirlo. Esto resulta esencial para realizar pruebas de usabilidad con usuarios o recopilar feedback de stakeholders.
¿Cómo conectar pantallas usando triggers e interacciones?
La conexión entre pantallas se realiza a través de elementos específicos que actúan como triggers, no arrastrando un frame completo hacia otro. Lo ideal es vincular el componente que el usuario va a tocar, como un ítem del tab bar [3:55].
El proceso es sencillo:
- Selecciona el elemento (por ejemplo, el ícono de transacciones).
- Haz hover sobre él hasta que aparezca un signo de más en el borde del bounding box.
- Arrastra hacia el frame de destino.
Por defecto, Figma configura la interacción con un trigger de tipo tap y una animación instantánea [4:22]. Dentro del panel de interacción puedes ver tres elementos clave: el trigger (qué acción dispara la navegación), la acción (navegar a otra pantalla) y el destino (el frame al que llegas). Los triggers disponibles incluyen tap, mouse enter, mouse leave y hover, aunque para interfaces móviles el más común es tap.
¿Cómo ahorrar tiempo con conexiones múltiples?
Cuando necesitas conectar varios elementos al mismo destino, como vincular todos los avatares de perfil a la pantalla de settings, puedes usar la selección múltiple [5:50]. Selecciona varios contenedores a la vez, arrastra la conexión desde uno de ellos y todos los demás seguirán automáticamente ese mismo flujo. Esta técnica de conexión en bulk reduce significativamente los pasos repetitivos.
¿Qué debes verificar antes de dar por terminado tu prototipo?
Una vez conectadas todas las pantallas, abre el prototipo con el botón de play y confirma lo siguiente:
- Arrancas en el dashboard.
- Puedes navegar entre todos los tabs sin que ningún clic quede sin respuesta.
- Cada botón lleva al destino esperado.
Si algún elemento no responde, revisa que la conexión exista y que el trigger esté correctamente habilitado [6:45]. Las transiciones configuradas hasta este punto son instantáneas, como un corte directo. Para lograr animaciones más naturales, como un bottom sheet que se deslice desde abajo, se utiliza smart animate con overlays, una técnica que lleva el prototipo al siguiente nivel de realismo.
¿Ya lograste conectar todos los flujos de tu proyecto? Comparte tu experiencia y las dificultades que encontraste en los comentarios.
