Semana 1 · Primera App en Figma

🎯 Objetivos de la semana

Crear cuenta en Figma y conocer el entorno de trabajo
Elegir una temática y paleta de colores para la app
Descargar y usar imágenes coherentes con el tema elegido
Diseñar mínimo 5 frames con contenido visual completo
Añadir botones con íconos SVG y menú inferior funcional
Implementar navegación completa adelante / atrás entre frames

📖 Clase 1 — Introducción a Figma y diseño base

🟢

Inicio

15 minutos

Contextualizar el trabajo y activar la motivación creativa

Presentación del módulo de Diseño Digital con Figma
Reflexión guiada: ¿Qué tema te apasiona y podrías convertir en una app?
Análisis de ejemplos de apps existentes para inspirar el diseño

🔵

Desarrollo

65 minutos

Crear la base visual de la app con colores, imágenes y textos

Registro y exploración en Figma 10 min

Crear cuenta gratuita en www.figma.com
Explorar el entorno: herramientas, capas, frames y panel de diseño

Temática, paleta de colores e imágenes 15 min

Elegir un tema para la app (música, deportes, viajes, salud, tecnología…)
Seleccionar paleta en colorhunt.co y anotar los códigos HEX
Descargar 4+ ilustraciones SVG desde undraw.co

Diseño del prototipo base 40 min

Crear nuevo proyecto en Figma con nombre descriptivo
Agregar 5 frames en tamaño Android Large
Insertar imágenes, títulos y textos relevantes en cada frame
Aplicar la paleta de colores de forma coherente en todos los frames
Diseñar barra de menú inferior con iconografía y textos descriptivos

🟡

Cierre

10 minutos

Guardar el trabajo y cerrar la sesión

Guardar el proyecto en Figma con un nombre claro y descriptivo
El docente recorre la sala revisando los avances de forma individual
Reflexión rápida: ¿qué fue lo más fácil? ¿qué fue lo más difícil?
Anuncio próxima clase: botones SVG, prototipado y navegación funcional

⭐ Clase 2 — App Sencilla · Evaluación Formativa

🟢

Inicio

10 minutos

Recordar lo trabajado y presentar el desafío de hoy

Revisión de la clase anterior: tema elegido, frames, imágenes, paleta
Objetivo de hoy: transformar pantallas estáticas en app navegable
Demostración rápida: prototipo funcional con navegación en Figma

🔵

Desarrollo

70 minutos

Construir la app sencilla con navegación funcional completa

Incorporación de botones e íconos SVG 25 min

Crear botones con rectángulos (color de la paleta, esquinas redondeadas)
Agregar textos descriptivos: "Siguiente", "Volver", "Inicio", etc.
Descargar íconos SVG desde fonts.google.com/icons
Insertar íconos en la barra inferior de cada frame y agruparlos con los botones

Prototipado funcional — mínimo 5 frames 30 min

Activar la pestaña Prototype en Figma
Vincular botones para navegar secuencialmente (adelante y hacia atrás)
Aplicar transición Smart Animate entre frames
Probar la navegación completa con el botón Present

Revisión visual y ajustes finales 15 min

Alinear y verificar botones de navegación en todos los frames
Confirmar que todos los frames estén conectados sin interrupciones
Revisar coherencia visual y ortografía de textos
Guardar el proyecto con nombre descriptivo antes de cerrar

🟡

Cierre

10 minutos

Registro del avance y cierre de la semana

El docente recorre la sala y revisa el prototipo en cada equipo
Retroalimentación individual breve del docente a cada estudiante
Avance: la próxima semana se mejorará esta misma app para la Nota 1

📌

Evaluación Formativa — App Sencilla

El docente revisa los prototipos en sala. No es necesario subir a Classroom para esta actividad. El registro se realiza según lo observado: 5+ frames, navegación adelante/atrás y menú inferior con íconos SVG.

📋 Rúbrica — App Sencilla (Clase 2)

Evaluación formativa · Semana 1 · Registro observado en clase

Criterio	Inicial 0 pts	En desarrollo 1 pt	Logrado 2 pts	Sobresaliente 3 pts
Cuenta y proyecto en Figma	Sin cuenta creada	Creada con dificultades	Funcional y organizada	Exploró funciones adicionales
Temática y paleta de colores	Sin definir	Tema o colores poco claros	Tema y paleta coherentes	Creativo y visualmente armónico
5+ frames diseñados	Menos de 3 frames	3 a 4 frames	5 frames completos	6+ frames con diseño destacado
Botones e íconos SVG	Sin botones	Botones sin íconos SVG	Botones e íconos integrados	Diseño estético y bien integrado
Navegación adelante / atrás	Sin prototipado	Conexiones parciales	Navegación funcional completa	Fluida con Smart Animate
Menú inferior funcional	Sin menú	Menú sin funcionalidad	Funcional y coherente	Diseño creativo bien integrado
Participación y autonomía	Mínima	Intermitente	Activa y comprometida	Proactiva, apoya a compañeros

Puntaje total21 puntos (7 criterios × 3 pts)