Del problema a la pantalla: creando prototipos con Figma

En este plan de clase, los estudiantes de secundaria aprenderán a transformar una necesidad cotidiana en un prototipo digital interactivo utilizando Figma y la metodología Design Thinking. Durante dos sesiones, explorarán las fases de empatizar, definir, idear, prototipar y evaluar. El reto será diseñar una aplicación sencilla que ayude a resolver una situación cercana a su realidad, como organizar tareas escolares, encontrar actividades del colegio, solicitar apoyo académico o mejorar la comunicación entre estudiantes.

Los estudiantes comenzarán identificando necesidades reales mediante entrevistas breves y preguntas centradas en el usuario. Después, organizarán la información para formular un problema claro y propondrán varias ideas antes de seleccionar una. En Figma crearán pantallas, botones, textos, colores y conexiones entre ellas para construir un prototipo navegable. Finalmente, probarán sus diseños con compañeros, recogerán opiniones y realizarán mejoras.

El aprendizaje es relevante porque muchas aplicaciones y sitios web que utilizan diariamente fueron creados mediante procesos similares. Además de desarrollar habilidades digitales, los estudiantes practicarán la creatividad, la comunicación, el trabajo colaborativo, la toma de decisiones y la capacidad de aceptar la retroalimentación. El producto final será un prototipo funcional de baja o media fidelidad, acompañado de una breve explicación del problema que resuelve y del usuario al que está dirigido.

• Analizar una necesidad de un usuario mediante preguntas y observación, diferenciando deseos, problemas y posibles soluciones.
• Definir un problema de diseño utilizando una frase clara que incluya usuario, necesidad y propósito.
• Diseñar un prototipo de aplicación en Figma incorporando al menos tres pantallas, elementos visuales y una navegación básica.
• Evaluar el prototipo mediante una prueba con compañeros, registrando opiniones y realizando al menos dos mejoras justificadas.
• Comunicar las decisiones de diseño explicando cómo el prototipo responde a la necesidad identificada.

• Computador o tableta con conexión a internet: uno por pareja o por estudiante.
• Cuenta educativa o gratuita de Figma y acceso a figma.com.
• Proyector o pantalla para demostraciones del docente.
• Hojas blancas o impresas, una por estudiante, para bocetos.
• Notas adhesivas o tarjetas de colores: al menos tres por grupo.
• Lápices, borradores, marcadores y regla.
• Plantilla impresa de entrevista y ficha de definición del problema.
• Lista de cotejo o rúbrica impresa para evaluar los prototipos.
• Video breve, de tres minutos, sobre prototipos o diseño de aplicaciones.
• Temporizador visible y pizarra.
• Capturas de ejemplo de una pantalla de inicio, menú y confirmación.

• Reconocer los elementos básicos de una interfaz: texto, imagen, botón, menú y pantalla.
• Manejar acciones básicas del computador: abrir un navegador, escribir una dirección web, seleccionar, arrastrar y escribir.
• Comprender que una aplicación puede estar formada por varias pantallas conectadas.
• Haber trabajado previamente nociones de necesidades, problemas del entorno y trabajo colaborativo.
• Conocer normas básicas de ciudadanía digital: respeto por las ideas, uso responsable de imágenes y protección de datos personales.

Sesión 1: Comprendemos al usuario y planificamos la solución

Fase de Inicio

20 minutos.

Comprender que un buen prototipo no comienza dibujando botones, sino conociendo a la persona que utilizará la solución. Los estudiantes identificarán un problema cercano y aprenderán el reto de diseño de las dos sesiones.

Activación de conocimientos previos

Docente: proyecta dos imágenes: una aplicación clara y otra con demasiados botones. Pregunta: “¿Cuál usarían con mayor facilidad? ¿Qué elemento les ayuda o les confunde?”. Registra en la pizarra las respuestas: colores, tamaño, orden, texto, botones y facilidad de uso.

Estudiantes: responden individualmente en una nota adhesiva y luego comentan con un compañero. Se realiza una puesta en común rápida.

Motivación y enganche

Docente: muestra un video breve sobre cómo se prueba una aplicación antes de publicarla y plantea el reto: “El colegio necesita una aplicación creada por estudiantes para resolver una dificultad real de la vida escolar. ¿Qué podríamos mejorar?”. Explica que Figma permite diseñar pantallas y simular la navegación sin tener que programar.

Estudiantes: mencionan problemas posibles, por ejemplo, olvidar tareas, no encontrar información de actividades o no saber dónde pedir ayuda.

Contextualización

Docente: conecta el tema con las aplicaciones que los estudiantes usan para conversar, estudiar, pedir transporte o entretenerse. Aclara: “Hoy no construiremos la aplicación completa; investigaremos para quién será y qué debe resolver”. Presenta las fases: empatizar, definir, idear, prototipar y evaluar.

Estudiantes: escriben el reto en su cuaderno: “Diseñar una aplicación sencilla que mejore una experiencia escolar”.

Fase de Desarrollo

95 minutos.

El docente explica Design Thinking mediante un ejemplo: si varios estudiantes olvidan una tarea, primero se pregunta qué les ocurre, luego se define el problema, se proponen ideas, se crea una versión de prueba y se solicita opinión. Se aclara que empatizar no significa adivinar lo que otros necesitan, sino preguntar y escuchar. También se presentan las preguntas de entrevista: “¿Qué situación te resulta difícil en el colegio?”, “¿Cuándo ocurre?”, “¿Qué haces actualmente?” y “¿Qué te gustaría que fuera más fácil?”.

Actividad 1: Detectives de necesidades

Objetivo específico: Analizar una necesidad de un usuario.

Organización: Parejas.

Tiempo: 25 minutos.

• Docente: entrega una ficha de entrevista y forma parejas procurando que cada estudiante entreviste y sea entrevistado.
• Docente dice: “No intenten vender una idea. Solo escuchen. No interrumpan ni respondan ‘eso se soluciona con una aplicación’”.
• Estudiantes: entrevistan a su compañero usando las cuatro preguntas guía y registran respuestas, sin escribir nombres completos ni datos privados.
• Estudiantes: subrayan una dificultad que se repita o que parezca importante y escriben una frase textual del entrevistado.
• Docente: circula y pregunta: “¿Qué evidencia tienen de que esto es un problema?”, “¿La persona habló de una necesidad o ya propuso una solución?”.

Producto: ficha de entrevista con respuestas y una necesidad destacada.

Actividad 2: Definimos el desafío

Objetivo específico: Definir un problema de diseño de manera clara.

Organización: Grupos de 3 o 4 estudiantes.

Tiempo: 25 minutos.

• Docente: entrega la fórmula: “[Usuario] necesita [necesidad] porque [razón o evidencia]”.
• Estudiantes: comparten sus entrevistas y agrupan problemas parecidos en tarjetas.
• Estudiantes: eligen un problema que sea cercano, posible de representar en una aplicación y relevante para el grupo.
• Estudiantes: completan la fórmula. Ejemplo: “Los estudiantes de séptimo necesitan recordar sus tareas porque reciben información en varios lugares”.
• Docente: revisa cada frase y pregunta: “¿Quién es el usuario?”, “¿Qué necesita exactamente?”, “¿Cómo saben que lo necesita?”.

Producto: ficha grupal con el problema definido y dos evidencias obtenidas en las entrevistas.

Actividad 3: Muchas ideas, una dirección

Objetivos específicos: Diseñar una solución inicial y comunicar decisiones.

Organización: Grupos de 3 o 4 estudiantes.

Tiempo: 25 minutos.

• Docente dice: “Durante cinco minutos todas las ideas son bienvenidas. No digan todavía ‘eso no se puede’”.
• Estudiantes: escriben una idea por tarjeta y generan al menos seis soluciones diferentes.
• Estudiantes: agrupan las ideas repetidas y las valoran con puntos según tres criterios: utilidad, facilidad de uso y posibilidad de crearla en Figma.
• Estudiantes: seleccionan una idea y escriben qué hará el usuario primero, después y al final.
• Docente: pregunta: “¿Cuál es la acción principal?”, “¿Qué pantalla necesita el usuario para comenzar?”, “¿Qué pasaría si toca este botón?”.

Producto: tarjetas de ideación, idea seleccionada y recorrido de tres pasos.

Actividad 4: Boceto en papel

Objetivos específicos: Diseñar una estructura inicial del prototipo y organizar la navegación.

Organización: Grupos de 3 o 4 estudiantes.

Tiempo: 20 minutos.

• Docente: muestra ejemplos de tres pantallas: inicio, acción principal y confirmación o resultado.
• Estudiantes: dibujan tres pantallas en hojas separadas e incluyen título, botones, textos e indicaciones de navegación.
• Estudiantes: unen las hojas con flechas y prueban el recorrido con un compañero del grupo.
• Docente: pregunta: “¿El usuario sabe dónde comenzar?”, “¿Puede volver atrás?”, “¿El texto de cada botón indica lo que ocurrirá?”.

Producto: storyboard de tres pantallas con flechas de navegación.

Diferenciación: quienes necesiten apoyo reciben una plantilla con marcos de pantalla, ejemplos de botones y un banco de palabras. El docente puede realizar una demostración individual de cinco minutos. Quienes terminan antes agregan una cuarta pantalla, una situación de error o una alternativa para usuarios con dificultades visuales.

Transición: el docente dice: “Ya sabemos para quién diseñamos, qué problema resolveremos y cómo será el recorrido. En la próxima sesión convertiremos este boceto en un prototipo navegable de Figma”.

Fase de Cierre

5 minutos.

Síntesis y anticipo

Docente: solicita que cada grupo complete oralmente: “Nuestro usuario es…, su problema es…, y nuestra solución comenzará con…”. Recoge los bocetos para revisarlos y explica que se utilizarán como guía en la siguiente sesión.

Estudiantes: entregan el storyboard y escriben en una esquina la tarea pendiente: “crear las pantallas en Figma”.

Sesión 2: Prototipamos, probamos y mejoramos en Figma

Fase de Inicio

10 minutos.

Recordar la necesidad y el recorrido diseñado, y preparar el trabajo digital en Figma para construir, enlazar y evaluar el prototipo.

Conexión con la sesión anterior

Docente: muestra tres storyboard seleccionados y pregunta: “¿Qué problema resolvía cada uno? ¿Qué pantalla debía aparecer primero?”. Repasa las normas: nombrar archivos, trabajar colaborativamente, no borrar el trabajo de otro compañero y guardar los cambios.

Estudiantes: explican en una frase el problema de su grupo, abren Figma y acceden al archivo compartido o crean un archivo nuevo con el nombre del equipo.

Demostración breve

Docente: proyecta Figma y modela cómo crear un Frame de teléfono, insertar texto, dibujar un rectángulo como botón, duplicar una pantalla y conectar un botón desde la pestaña Prototype. Indica: “No buscamos que quede perfecto; buscamos que otra persona entienda y pueda probar el recorrido”.

Estudiantes: observan, siguen los pasos y levantan la mano si necesitan repetir una acción.

Fase de Desarrollo

95 minutos.

El docente explica que un prototipo es una versión de prueba. En esta actividad se usarán tres niveles sencillos: estructura, apariencia y navegación. La estructura organiza la información; la apariencia usa color, tipografía e imágenes; la navegación conecta acciones y pantallas. Se recomienda emplear máximo dos tipografías, colores con buen contraste y botones con textos directos como “Comenzar”, “Guardar” o “Ver tareas”.

Actividad 1: Construimos las pantallas

Objetivo específico: Diseñar un prototipo en Figma con al menos tres pantallas.

Organización: Grupos de 3 o 4 estudiantes.

Tiempo: 35 minutos.

• Docente: entrega o comparte un archivo base y asigna roles rotativos: organizador del contenido, diseñador visual, operador de Figma y relator.
• Estudiantes: crean tres Frames de teléfono y los nombran “Inicio”, “Acción” y “Resultado”.
• Estudiantes: trasladan el boceto a Figma usando títulos, textos breves, botones y formas simples.
• Estudiantes: seleccionan colores legibles y agregan solo imágenes o íconos con permiso de uso o provenientes de la biblioteca de Figma.
• Docente: observa y pregunta: “¿Qué debe leer primero el usuario?”, “¿El botón se distingue del fondo?”, “¿Hay información innecesaria?”.

Producto: archivo de Figma con tres pantallas visualmente organizadas.

Actividad 2: Hacemos clic y navegamos

Objetivo específico: Crear una navegación básica en el prototipo.

Organización: Grupos de 3 o 4 estudiantes.

Tiempo: 25 minutos.

• Docente: recuerda el procedimiento: seleccionar el botón, abrir Prototype, arrastrar el conector hacia el siguiente Frame y elegir la interacción de clic.
• Estudiantes: conectan el botón principal de Inicio con Acción y el botón de Acción con Resultado.
• Estudiantes: prueban el prototipo con el botón de presentación y revisan si cada clic lleva a la pantalla correcta.
• Estudiantes: agregan un botón “Volver” cuando sea necesario y corrigen enlaces que no funcionen.
• Docente: pregunta: “¿Qué espera el usuario después de tocar este botón?”, “¿La pantalla confirma que su acción funcionó?”.

Producto: prototipo navegable con un recorrido completo.

Actividad 3: Prueba con usuarios

Objetivo específico: Evaluar el prototipo y registrar opiniones.

Organización: Parejas de grupos.

Tiempo: 20 minutos.

• Docente: entrega una ficha con tres preguntas: “¿Qué crees que puedes hacer en esta pantalla?”, “¿Qué parte te confundió?” y “¿Qué mejorarías?”.
• Estudiantes: un integrante presenta el prototipo sin explicar demasiado; el compañero realiza la tarea indicada, por ejemplo: “Encuentra una tarea y márcala como completada”.
• Estudiantes: observan sin corregir inmediatamente, anotan dónde duda el usuario y luego intercambian roles.
• Docente: recuerda que la retroalimentación debe hablar del diseño y no de la persona. Pregunta: “¿Qué observaste realmente?”, “¿Qué cambio ayudaría al usuario?”.

Producto: ficha de prueba con dos fortalezas y dos oportunidades de mejora.

Actividad 4: Mejoramos y presentamos

Objetivos específicos: Realizar mejoras y comunicar decisiones de diseño.

Organización: Grupos de 3 o 4 estudiantes.

Tiempo: 15 minutos.

• Estudiantes: seleccionan dos sugerencias y modifican el prototipo, por ejemplo, cambian el texto de un botón, aumentan el contraste o reorganizan una pantalla.
• Estudiantes: escriben en una nota de presentación: problema, usuario, solución y dos cambios realizados.
• Docente: revisa la lista de cotejo y pide justificar cada cambio con la frase: “Lo modificamos porque el usuario…”.
• Dos grupos voluntarios: presentan su prototipo en un minuto; el resto menciona una fortaleza y formula una pregunta.

Producto: prototipo mejorado y explicación breve.

Diferenciación: los estudiantes que necesitan apoyo pueden usar un archivo con componentes previamente preparados y una guía visual de cuatro pasos. También pueden trabajar con un compañero tutor. Quienes avanzan más pueden crear un estado alternativo del botón, añadir una pantalla de ayuda o revisar el contraste con un comprobador de accesibilidad.

Transición: el docente anuncia: “La prueba no termina cuando mostramos el diseño; termina cuando aprendemos de quienes lo usan. Ahora resumiremos qué aprendimos y qué haríamos en una versión futura”.

Fase de Cierre

15 minutos.

Síntesis

Docente: dibuja en la pizarra cinco círculos conectados y escribe: empatizar, definir, idear, prototipar y evaluar. Cada grupo pega una tarjeta con lo que hizo en cada fase. Después, solicita tres ideas finales: “Un buen prototipo…”, “Una prueba sirve para…” y “Una mejora debe…”.

Estudiantes: completan las frases y guardan el enlace o captura de su prototipo en su portafolio digital.

Reflexión metacognitiva

Individualmente, responden en un ticket de salida:

• “¿Qué aprendí sobre las necesidades del usuario que no había pensado al inicio?”
• “¿Qué elemento de mi prototipo ayuda más al usuario y por qué?”
• “¿Qué cambio realicé después de la prueba y qué evidencia me llevó a hacerlo?”

Retroalimentación y transferencia

Docente: entrega una retroalimentación breve usando la estructura “fortaleza, evidencia y próximo paso”. Destaca ejemplos de escucha al usuario, claridad visual y navegación funcional. Explica que el mismo proceso puede aplicarse para diseñar una página web, una campaña escolar o una solución para la comunidad.

Tarea o reto: opcionalmente, cada estudiante observa una aplicación que use durante la semana y registra una pantalla que le resulte clara y otra que le genere dificultad, explicando qué cambiaría.

Tipo de evaluación

• Diagnóstica: durante los primeros 20 minutos de la Sesión 1, mediante las respuestas sobre interfaces claras y confusas.
• Formativa: durante las entrevistas, definición del problema, bocetos y construcción en Figma, mediante observación directa, preguntas guía y revisión de productos parciales.
• Sumativa: durante la presentación y cierre de la Sesión 2, mediante la rúbrica del prototipo, la ficha de prueba y el ticket de salida.

Criterios de evaluación vinculados con los objetivos

• Analiza una necesidad: registra respuestas reales de un usuario y distingue el problema de una solución anticipada.
• Define el problema: formula una frase clara que identifica usuario, necesidad y razón o evidencia.
• Diseña el prototipo: presenta al menos tres pantallas organizadas, textos legibles, botones reconocibles y elementos visuales pertinentes.
• Evalúa y mejora: realiza una prueba con un compañero, registra observaciones y aplica al menos dos mejoras justificadas.
• Comunica decisiones: explica qué problema resuelve, para quién fue diseñado y por qué realizó los principales cambios.

Instrumentos sugeridos

• Lista de cotejo para entrevista, definición del problema y storyboard.
• Rúbrica de cuatro niveles para evaluar claridad del usuario, calidad visual, navegación, utilidad y mejora.
• Observación directa del trabajo colaborativo y del uso responsable de Figma.
• Coevaluación mediante la ficha de prueba con usuarios.
• Autoevaluación mediante el ticket de salida y el portafolio digital.

Evidencias de aprendizaje

• Ficha de entrevista con necesidades y evidencias.
• Frase de definición del problema.
• Tarjetas de ideación y storyboard de tres pantallas.
• Archivo o enlace de Figma con prototipo navegable.
• Ficha de prueba con usuarios y registro de mejoras.
• Presentación breve y respuestas del ticket de salida.

Escala sugerida

4 - Destacado: comprende profundamente al usuario, crea un prototipo claro y funcional, utiliza evidencia para mejorarlo y comunica sus decisiones con precisión.

3 - Logrado: cumple los requisitos principales y realiza mejoras pertinentes con una explicación adecuada.

2 - En proceso: presenta parte del prototipo, pero necesita mejorar la definición del problema, la navegación o la justificación.

1 - Inicial: requiere acompañamiento constante para identificar la necesidad, construir las pantallas o explicar su propuesta.