Lección 6 de 12 · Lectura y práctica
Prototipos Interactivos
Dale Vida a tus Diseños con Prototipos Figma te permite crear prototipos interactivos sin escribir código. Puedes simular navegación, transiciones, animaciones y flujos completos para presentar a stakeholders o hacer pruebas de.
Del concepto a la práctica
Taller de esta lección
Un prototipo útil representa decisiones de flujo, no solo movimiento entre pantallas. En la reserva de un turno, una conexión debe responder a una intención: seleccionar un horario, confirmar, volver a editar o mostrar que no hay disponibilidad. Si todo navega con el mismo gesto y transición, resulta difícil comprobar si la lógica del recorrido está clara.
Ejemplo resuelto
Conecta “Buscar” en “Inicio” con “Resultados”. Desde una instancia disponible, conecta “Elegir” con “Confirmar turno”. Desde “Confirmar”, conecta “Reservar” con “Éxito”. Añade una conexión de “Cambiar horario” que regrese a “Resultados”. Usa transiciones simples y reserva el cambio animado para un elemento cuya continuidad sea evidente.
Pruébalo
Define el frame inicial en “Inicio”.
Conecta las tres acciones principales.
Añade el retorno para editar el horario.
Ejecuta el flujo desde el comienzo y anota cualquier paso ambiguo.
Error frecuente: enlazar una tarjeta completa cuando solo el botón debe activar la acción. Corrígelo limitando el área interactiva al control que expresa la decisión.
Crea una ruta de error para una búsqueda sin resultados. Resultado esperado: “Buscar” puede llevar a un estado vacío con explicación y acción “Cambiar filtros”, sin terminar en una pantalla desconectada.
Comprueba tu resultado
Ejecuta el flujo sin seleccionar capas durante la presentación y confirma que cada acción tiene un destino comprensible.
Mapa de prácticaEl disparador Clic: Enviar activa una acción Navegar hacia un frame de destino. Los casos completo e incompleto representan escenarios configurados en el prototipo: muestran éxito o error y permiten volver con Reintentar. Estas conexiones simulan el flujo; no demuestran una validación ni una respuesta de servidor.
Ver la infografía en tamaño completo ↗Dale Vida a tus Diseños con Prototipos
Figma te permite crear prototipos interactivos sin escribir código. Puedes simular navegación, transiciones, animaciones y flujos completos para presentar a stakeholders o hacer pruebas de usabilidad con usuarios reales.
Crear conexiones de prototipo
- Cambia a la pestaña 'Prototype' en el panel derecho (al lado de 'Design')
- Selecciona un elemento, arrastra el punto azul que aparece hacia el frame de destino
- Esto crea una conexión: cuando el usuario haga clic/tap en ese elemento, navegará al frame destino
- Puedes crear múltiples conexiones desde un mismo frame para simular diferentes flujos
- Presiona Play (triángulo en la barra superior) para probar tu prototipo en el navegador
Triggers e interacciones
- On Click/Tap: la más común — el usuario hace clic y algo sucede
- On Hover: al pasar el mouse por encima — ideal para tooltips y menús desplegables
- On Drag: para simular sliders, carruseles o interfaces arrastrables
- While Pressing: mientras el usuario mantiene presionado — para feedback táctil
- After Delay: acción automática después de X milisegundos — útil para splash screens
Animaciones y transiciones
- Instant: cambio inmediato sin animación (útil para overlays y modales)
- Dissolve: fundido suave entre frames — la más elegante para navegación general
- Smart Animate: Figma anima automáticamente las diferencias entre dos frames (mágico para micro-interacciones)
- Slide In/Out: entrada/salida deslizante — ideal para menús laterales y modales
- Ajusta la duración (200-400ms es lo ideal) y la curva de aceleración (Ease In Out para movimiento natural)
Flujos y presentaciones
- Define un Starting Frame para cada flujo: clic derecho en un frame → 'Set as starting frame'
- Puedes tener múltiples flujos en un mismo archivo (registro, compra, onboarding)
- Comparte el prototipo con un link: quien lo reciba puede interactuar sin cuenta de Figma
- Usa el prototipo para pruebas de usabilidad: es mucho más realista que mockups estáticos
- Presenta a stakeholders en modo fullscreen para dar la impresión de un producto real
Consejo: Smart Animate es mágico: si dos frames tienen elementos con el mismo nombre pero en diferente posición/tamaño, Figma anima la transición automáticamente. Asegúrate de que los nombres de capas coincidan.
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.