Prototipo y Entrega

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.