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 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.

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.