Figma — Intermedio

Dirigido a diseñadores y product designers que ya dominan los fundamentos de Figma y quieren consolidar un flujo de trabajo profesional orientado a la entrega real de producto. A lo largo de 8 horas, los participantes construirán wireframes de media fidelidad, crearán sistemas de componentes con variantes, adaptarán layouts a múltiples breakpoints y diseñarán prototipos navegables con interacciones condicionales. El curso también trabaja la capacidad crítica: los participantes aprenderán a justificar sus decisiones de diseño desde principios de usabilidad, a comparar alternativas de navegación y a depurar archivos complejos para handoff, obteniendo como resultado un prototipo funcional y un archivo limpio, listo para ser entregado a desarrollo.

1. Explicar qué son los componentes con variantes, las propiedades de instancia y las variables en Figma, y describir cómo interactúan para representar diferentes estados de la interfaz dentro de un mismo flujo.
2. Diseñar wireframes de media fidelidad para un flujo de al menos 5 pantallas aplicando rejillas, jerarquía visual coherente y componentes con variantes que reflejen los estados default, hover, error y disabled.
3. Adaptar un layout a los breakpoints de móvil y escritorio usando auto layout y constraints, e integrar una librería de estilos compartida resolviendo los conflictos que surjan con los estilos locales.
4. Construir un prototipo navegable con interacciones condicionales que simule al menos un flujo completo de tarea, y preparar el archivo para handoff depurando capas, componentes desvinculados y estilos inconsistentes.
5. Justificar las decisiones de espaciado, tipografía y color del prototipo referenciando principios de diseño o heurísticas de usabilidad, y comparar dos soluciones de navegación distintas argumentando cuál representa mejor el modelo mental del usuario objetivo.

Bloque 1 — Wireframes de media fidelidad y sistemas de rejilla. El curso arranca con la construcción de wireframes de media fidelidad para un flujo completo de al menos 5 pantallas. Se trabajan las rejillas de columnas y filas como herramienta estructural, el uso de frames anidados y la toma de decisiones de jerarquía visual que permitan al equipo leer el diseño sin ambigüedad. El bloque incluye criterios para escoger el nivel de detalle adecuado en cada fase del proyecto.

Bloque 2 — Componentes avanzados: variantes, propiedades y estados. Se profundiza en la arquitectura de componentes de Figma: creación de variantes, configuración de propiedades de instancia (texto, icono, visibilidad) y uso de variables para representar estados interactivos. Los participantes construyen un conjunto de componentes que cubre los estados default, hover, error y disabled, y los integran en el flujo de wireframes del bloque anterior.

Bloque 3 — Diseño adaptable: auto layout, constraints y librerías compartidas. El bloque aborda la adaptación de layouts a dos breakpoints (móvil y escritorio) sin romper la estructura visual. Se revisan las reglas de auto layout y constraints en profundidad, y se practica la integración de una librería de estilos compartida en un proyecto propio, con resolución guiada de conflictos entre estilos locales y los de la librería.

Bloque 4 — Prototipado con interacciones condicionales. A partir del sistema de componentes ya creado, los participantes diseñan un prototipo navegable que incorpora overlays, cambios de estado de componente y variables para simular un flujo realista de tarea. Se revisan las opciones de presentación en modo prototipo y cómo recoger feedback estructurado a partir de él.

Bloque 5 — Pensamiento crítico, comparación de soluciones y handoff. El curso cierra con dos líneas de trabajo paralelas. Por un lado, los participantes justifican sus decisiones de diseño (espaciado, tipografía, color) referenciando principios como las heurísticas de Nielsen o las leyes de Gestalt, y comparan dos propuestas de navegación para un mismo flujo argumentando cuál se ajusta mejor al modelo mental del usuario. Por otro lado, depuran un archivo Figma con problemas estructurales reales —capas desordenadas, componentes desvinculados, estilos inconsistentes— y lo dejan preparado para entrega a desarrollo siguiendo las convenciones de handoff del sector.

• Figma versión web o desktop actualizada (plan gratuito Starter es suficiente para los ejercicios individuales; se recomienda plan Education o Professional para acceder a librerías de equipo compartidas).
• Navegador Chrome o Firefox en su versión estable más reciente (si se usa la versión web).
• Conexión a internet estable para compartir archivos y librerías durante los ejercicios colaborativos.
• Acceso al archivo de inicio del curso, que se distribuirá antes de la primera sesión a través del enlace de invitación al equipo de Figma del programa.

• Manejo fluido del entorno de Figma: frames, grupos, capas y panel de propiedades.
• Uso básico de componentes e instancias (creación, sobreescritura de propiedades simples).
• Conocimiento de los fundamentos de auto layout (dirección, padding, gap).
• Familiaridad con estilos locales de color y tipografía.
• Haber completado el curso FIG01 — Figma Iniciación o contar con experiencia equivalente demostrable.