Programa Clase 2: Botones, íconos y primer prototipo funcional

Objetivos de la clase

• Incorporar botones e íconos en la interfaz de la app.

• Establecer navegación entre los frames mediante prototipado.

• Explorar transiciones animadas simples para mejorar la experiencia de usuario.

Duración total: 90 minutos

Inicio (10 minutos)

Objetivo: Recordar lo trabajado y presentar los nuevos desafíos.

Actividades:

• Revisión breve de lo realizado en la clase anterior (tema, frames, imágenes, texto).

• Presentación del objetivo de hoy: transformar pantallas estáticas en una app navegable.

• Demostración rápida de un prototipo funcional con navegación (mostrar ejemplo en Figma).

Desarrollo (70 minutos)

�� Paso 1: Incorporación de botones e íconos (25 min)

• Usar la herramienta de rectángulo para crear botones (estilo, color, esquinas redondeadas).

• Añadir texto descriptivo a los botones (“Siguiente”, “Volver”, “Inicio”, etc.).

• Descargar íconos en formato SVG desde fonts.google.com/icons e insertarlos en la barra inferior de cada frame.

• Agrupar los botones con íconos.

Paso 2: Prototipado funcional (30 min)

• Activar la pestaña Prototype en Figma.

• Vincular botones entre los frames (por ejemplo: “Siguiente” va al siguiente frame).

• Usar opción de transición “Smart Animate” o “Instant”.

• Probar la navegación con el botón Present.

Paso 3: Ajustes visuales (15 min)

• Alinear los botones de navegación.

• Revisar que todos los frames estén conectados.

• Comprobar que la app pueda navegar hacia adelante y hacia atrás.

Cierre (10 minutos)

Objetivo: Observar avances, reflexionar y proyectar próximos pasos.

Actividades:

• Exhibición voluntaria de algunos prototipos.

• Retroalimentación colectiva: ¿qué funcionó?, ¿qué fue difícil?

• Explicación breve de lo que se hará en la clase siguiente: mejorar diseño con scrolls o nuevas vistas.

Rúbrica de Evaluación – Clase 2

20 puntos