Skip to main content
Flowstep puede convertir las pantallas en un archivo en un prototipo clickeable. Haz clic en Preview en la barra de herramientas del editor y Flowstep abre un reproductor de prototipo a página completa donde puedes hacer clic a través de tu flujo — útil para probar un viaje de usuario o presentarlo a partes interesadas.

​
Abre un prototipo

1

Haz clic en Preview

En la barra de herramientas del editor, haz clic en Preview. El reproductor de prototipo se abre como una vista de página completa, separada del editor.
2

Deja que Flowstep enlace tus pantallas

Si tu archivo tiene dos o más pantallas, Flowstep enlaza automáticamente elementos interactivos — botones, tarjetas, elementos de menú — a sus pantallas de destino cuando abres la vista previa (verás “Bringing your screens to life” mientras funciona). Los enlaces se regeneran solo cuando tus pantallas han cambiado desde la última ejecución.
3

Haz clic a través de tu flujo

Haz clic en cualquier elemento enlazado — un botón, una tarjeta, un elemento de menú — para navegar a su pantalla de destino. La barra lateral lista todas las pantallas en el archivo para que puedas saltar a cualquiera de ellas directamente, y Back to editor te devuelve al archivo.
El enlazado automático necesita al menos dos pantallas en el archivo. Si la generación de enlaces falla, usa el botón Retry en el reproductor.

​
Establece la navegación manualmente

Puedes controlar exactamente a dónde navega un elemento:
  1. En el editor, selecciona el elemento (por ejemplo, un botón).
  2. Abre el panel Navigation en el panel de propiedades en la derecha.
  3. Elige una pantalla de destino del menú desplegable — o elige No navigation para eliminar el enlace.
Para evitar que el enlazado automático de Flowstep sobrescriba un enlace que estableciste tú mismo, haz clic en Lock link en el panel Navigation. Los enlaces bloqueados se dejan sin tocar cuando los enlaces se regeneran.

​
Controles interactivos

Un prototipo no es solo navegación clickeable — los controles en tus pantallas responden mientras previsualizas. Voltea un interruptor, marca una casilla de verificación, elige una opción de radio, elige de un menú desplegable, cambia entre pestañas, escribe en un campo, o incrementa un contador, y la pantalla se actualiza en vivo para reflejar el nuevo estado. Las pantallas en un archivo comparten un estado de prototipo durante una sesión de vista previa, así que un cambio que hagas en una pantalla se mantiene cuando haces clic en otras. También puedes cambiar una pantalla entre apariencia clara y oscura para ver cómo responde.
El comportamiento interactivo se genera automáticamente desde tus pantallas — no hay nada que cablear. Visualiza un archivo para probarlo.