Fase 3: Prototipo Interactivo y Entrega
El paso final es conectar todas las pantallas en un prototipo navegable y preparar el archivo para entregarlo al equipo de desarrollo. Un buen prototipo comunica la experiencia mejor que cualquier documento.
Conectar el flujo principal
- Login → Lista de tareas: al tocar 'Iniciar sesión', navega a la pantalla principal con transición Dissolve
- FAB (+) → Crear tarea: al tocar el botón flotante, abre el formulario con Slide In desde abajo
- TaskCard → Detalle: al tocar una tarea, navega al detalle con Smart Animate
- Navegación inferior: conecta cada tab con su pantalla correspondiente con transición Instant
- Botón Volver: en cada pantalla secundaria, conecta la flecha de retorno al frame anterior
Micro-interacciones con Smart Animate
- Checkbox: crea dos frames del TaskCard (sin check y con check) — Smart Animate hará la transición suave
- Botón hover: crea una variante con cambio de color sutil para el estado hover del botón
- Pull to refresh: simúlalo con un scroll trigger que muestra un spinner temporalmente
- Toast notification: después de crear una tarea, muestra un toast que aparece con Slide In y desaparece After Delay
Preparar para desarrollo
- Activa Dev Mode en Figma: los desarrolladores ven las propiedades CSS de cada elemento automáticamente
- Exporta assets: marca íconos e imágenes como 'Export' con las resoluciones correctas (1x, 2x, 3x para móvil)
- Documenta interacciones complejas que el prototipo no puede mostrar (gestos, estados de carga, etc.)
- Comparte el link del archivo con permisos de 'can view' para el equipo de desarrollo
- Incluye una página de 'Notas para desarrollo' con decisiones de diseño y comportamientos edge-case
Consejo: Un prototipo en Figma nunca reemplaza la comunicación directa con el equipo de desarrollo. Usa el prototipo como base visual, pero siéntate con los developers para explicar las interacciones y responder preguntas.
Practica de portfolio
Convierte esta leccion en evidencia real: arma una entrega pequena que puedas mostrar en una entrevista, en LinkedIn o en tu portfolio. Trabaja con un caso propio o con una empresa ficticia, pero deja claro el problema, la decision y el resultado.
- Entregable: una captura, documento, repositorio o tablero con el resultado final.
- Checklist: objetivo, pasos seguidos, criterio de calidad y mejora pendiente.
- Mini-rubrica: si otra persona lo revisa, debe entender que hiciste, por que y como repetirlo.