Módulo 7

🎨 Módulo 7: Prototipado y animaciones en Figma

Objetivo del módulo:
Aprenderás a crear prototipos interactivos y aplicar animaciones básicas para simular el comportamiento de una página web.

---

✅ 1. ¿Qué es un prototipo?

Un prototipo es una versión interactiva de tu diseño que permite simular la navegación y funcionalidades.
En Figma puedes conectar frames con enlaces y definir transiciones.

📍 Ejemplo: Crear un botón que lleva a otra pantalla al hacer clic.

---

✅ 2. Creación de conexiones entre frames

Selecciona un elemento (como un botón), luego haz clic en el icono de prototipado (rayo) y arrastra la flecha al frame destino.
Puedes elegir el tipo de interacción: On Click, While Hovering, etc.

📍 Ejemplo: Hacer que al hacer clic en “Iniciar” te lleve a la pantalla principal.

---

✅ 3. Tipos de animaciones

• Instant: Cambio inmediato sin animación.
• Dissolve: Fundido suave entre pantallas.
• Move In/Out: Movimiento de entrada o salida de elementos.
• Smart Animate: Animación suave entre cambios de posición, tamaño o color.

📍 Ejemplo: Animar un menú que se despliega con Smart Animate.

---

✅ 4. Mini ejercicio práctico

🎯 Objetivo: Crear un prototipo simple con animación.

1. Crea dos frames: una pantalla de inicio y otra de contenido.
2. Agrega un botón “Entrar” en la primera pantalla.
3. Conecta el botón al segundo frame con interacción “On Click”.
4. Selecciona la animación “Dissolve” para la transición.
5. Prueba el prototipo con el botón “Present” (Play).

📍 Resultado esperado: Navegación funcional con transición suave.

---

📥 Tips rápidos del módulo

• Prueba diferentes animaciones para mejorar la experiencia.
• Usa Smart Animate solo cuando los elementos tengan coincidencias de nombre en capas.
• Usa prototipos para validar ideas antes de la implementación.

---

📌 Preguntas de repaso

Pregunta 1: ¿Qué tipo de interacción permite navegar entre pantallas en un prototipo?

• A) On Hover
• B) On Click
• C) On Drag
• D) On Load

✅ Respuesta correcta: B) On Click

---

Pregunta 2: ¿Qué animación crea un fundido suave entre pantallas?

• A) Instant
• B) Dissolve
• C) Move In
• D) Smart Animate

✅ Respuesta correcta: B) Dissolve