Diseño de Interfaces con Figma

Diseñar una interfaz en Figma no consiste en decorar pantallas aisladas, sino en tomar decisiones visibles, repetibles y comprobables. En este curso trabajarás con el caso de una aplicación móvil para reservar clases en un centro comunitario. El escenario permite observar cómo una idea pasa de una estructura inicial a un flujo que otra persona puede recorrer sin recibir instrucciones adicionales.

La primera etapa se concentra en el espacio de trabajo y en la colaboración. Aprenderás a distinguir archivo, página, sección, frame y capa, y a organizar un proyecto para que una persona colaboradora encuentre rápidamente el flujo principal, los componentes y las notas de revisión. La navegación por el lienzo, el panel de capas y las propiedades no se estudiará como una lista de botones: se vinculará con tareas concretas, como localizar una pantalla duplicada, comparar una versión y dejar un comentario en el punto correcto.

Después construirás las piezas visuales básicas. Los frames definirán pantallas y contenedores; las formas servirán para tarjetas, controles y señales de estado; el texto establecerá jerarquía entre título, información auxiliar, etiquetas y acciones. En cada decisión tendrás que considerar el contenido real del caso: nombres de clases, horarios, cupos y mensajes de error. Así evitarás que una composición aparentemente ordenada se rompa cuando una etiqueta sea más larga o cuando falte información.

La tercera etapa introduce componentes, variantes, propiedades y estilos. Crearás un botón de reserva, una tarjeta de clase, un campo de selección y un elemento de navegación. La pregunta central será qué conviene reutilizar y qué debe permanecer específico de una pantalla. Las variantes se decidirán a partir de estados observables, como disponible, completo, seleccionado o deshabilitado. Los estilos de color, texto y efectos funcionarán como decisiones compartidas, no como adornos independientes. El prototipo servirá para comprobar transiciones y rutas, no para ocultar problemas de jerarquía o contenido.

El proyecto integrador reunirá estas piezas en una aplicación móvil de tres recorridos: consultar clases, revisar el detalle y confirmar una reserva. Primero definirás el inventario de pantallas y el orden de las tareas. Luego construirás las pantallas principales con frames, retículas y Auto Layout, comprobando qué ocurre cuando cambia el texto. Finalmente enlazarás componentes y navegación para representar estados de éxito, falta de cupo y error de validación. La revisión incluirá contraste suficiente, objetivos táctiles amplios, nombres de capas comprensibles y un flujo que pueda seguirse desde el inicio hasta la confirmación.

El trabajo final será un prototipo navegable acompañado de una pequeña biblioteca de componentes y una hoja de decisiones. Deberás entregar la pantalla de inicio, el listado de clases, el detalle de una clase, el formulario de reserva, la confirmación y al menos un estado de error. También presentarás una tabla que relacione cada pantalla con sus componentes y estados. No se evaluará solamente el aspecto visual: se comprobará si los elementos se comportan de forma coherente, si los cambios de contenido conservan el orden y si una persona puede identificar qué acción debe realizar.

Para comprobar el aprendizaje, recorrerás una lista de tareas con datos concretos: buscar una clase del martes, elegir un horario con un cupo disponible, intentar reservar una clase completa y volver al listado. Registrarás el resultado esperado y el resultado observado. Una entrega sólida justificará las decisiones con evidencia del archivo: nombres, variantes, propiedades, conexiones y estados. Si una decisión no funciona, la corregirás y dejarás constancia del motivo. El objetivo es terminar con un diseño que pueda inspeccionarse, modificarse y entenderse sin depender de explicaciones improvisadas.