Lección 10 de 12 · Lectura y práctica
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.
Del concepto a la práctica
Taller de esta lección
La entrega debe permitir que otra persona entienda qué está listo para probar y qué todavía es una decisión abierta. Un prototipo de reserva necesita un recorrido principal y un caso alternativo; las notas deben describir comportamiento observable, no repetir nombres de capas. También conviene separar páginas de trabajo y presentación para que el enlace abra en un punto comprensible.
Ejemplo resuelto
Conecta “Buscar” → “Resultados” → “Confirmar” → “Reserva realizada”. Añade “No hay horarios” desde Resultados y “Cambiar fecha” de regreso al filtro. En “Notas de entrega” registra: “El botón Reservar permanece desactivado hasta que exista horario seleccionado”.
Pruébalo
Define el frame inicial.
Ejecuta el recorrido principal sin interrupciones.
Ejecuta el caso sin disponibilidad.
Escribe tres decisiones y dos límites del prototipo.
Error frecuente: entregar una pantalla bonita sin indicar cómo probarla. Corrígelo con una ruta inicial, nombres consistentes y una nota breve sobre cada estado no evidente.
Añade un estado de confirmación con número de reserva ficticio “TC-1048”. Resultado esperado: el usuario ve que la acción terminó, puede volver a “Mis turnos” y el número se distingue del texto auxiliar.
Comprueba tu resultado
Abre el prototipo desde el frame inicial y verifica que ninguna acción principal termina en un frame sin conexión o sin contexto.
Mapa de prácticaUna entrega útil explica pantallas, estados, medidas y recursos exportables. Acordar el comportamiento y la recuperación de errores evita que el prototipo deje decisiones esenciales sin explicar.
Ver la infografía en tamaño completo ↗
Mapa de prácticaElige formato según el recurso y revisa el archivo exportado. SVG sirve para gráficos vectoriales; PNG puede conservar transparencia; JPG se usa para imágenes opacas. Comprueba dimensiones, fondo y compatibilidad con el destino.
Ver la infografía en tamaño completo ↗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.
Sigue con Figma desde Cero
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.