Visual Thinking Academy

Temas del curso

Objetivo: Comprender qué es un sistema de diseño, su propósito y qué problemas resuelve. Alinear teoría con contexto real y construir tu mapa base de diseño.

• ¿Qué es y qué no es un Design System?
• Casos reales: IBM Carbon, Material 3, Polaris, Lightning
• Tipos de sistemas: centralizado, modular, por producto
• Beneficios, retos y madurez organizacional
• RMapa de actores clave (UX, UI, Dev, PM)

Objetivo: Crear los estilos y variables base para construir con consistencia.

• Color, tipografía, espacio, radius, elevation
• Variables globales y semánticas (claro/oscuro)
• Naming y colecciones según Figma 2024

Objetivo: Construir los bloques funcionales del sistema con buenas prácticas.

• Botones, tags, inputs, selects, switches
• Auto Layout + Variants + Boolean/Text/Instance props
• Estados y focus accesible
• Organización por dominios y familias visuales

Objetivo: Componer vistas complejas reutilizables con props inteligentes.

• Cards, listas, formularios, tablas, modales
• Nested components + slot tokens
• Propiedades condicionales para simplificar uso

Objetivo: Diseñar componentes que respondan bien a la interacción real.

• Hover, focus, disabled, loading, error
• Tamaños mínimos de interacción
• Contraste, tipografía legible, tooltips accesibles
• Principios de diseño inclusivo
• WCAG en profundidad
• Estilo comunicativo
• Traducciones a otros idiomas

Objetivo: Diseñar componentes esenciales y reutilizables que aportan estructura, retroalimentación y contexto a cualquier producto digital.

• Accordion / Collapse: secciones expandibles para detalles o ajustes
• Toast Notification: mensajes de sistema breves (éxito, error, info)
• Stepper visual: pasos progresivos para onboarding o procesos largos
• Tooltip contextual: ayuda inmediata accesible en UI
• Skeleton Loader: placeholders para estados de carga visual

Objetivo: Documentar cómo se usa el sistema correctamente dentro de Figma y para distintos equipos.

• Anatomía visual por componente (nombres, props, variantes)
• Buenas/malas prácticas con ejemplos visuales
• Tips para diseñadores y devs: cuándo usar qué
• Documentación en overlays, notas y prototipos

Objetivo: Construir componentes completos usados en interfaces reales con lógica clara y práctica profesional.

• Navbar con navegación adaptable
• Tarjeta de producto (e-commerce)
• Dropdown con selección activa y feedback visual
• Modal completo con props, scroll y focus

Objetivo: Asegurar que el sistema funcione para todas las personas.

• Principios de diseño inclusivo
• WCAG en profundidad
• Accesibilidad en inputs, botones, foco, feedback
• Microcopy y tono inclusivo

Objetivo: Demostrar que tu sistema funciona creando una pantalla funcional 100% con componentes existentes.

• Elegir una interfaz real: checkout, perfil, búsqueda, dashboard
• Construirla desde cero usando solo lo que ya creaste
• Detectar faltantes, inconsistencias o mejoras necesarias

Objetivo: Aprender a mejorar el sistema con feedback real sin romper lo que ya funciona.

• Recibir feedback de compañeros y docentes
• Crear un branch con mejoras visuales, estructurales o funcionales
• Documentar el cambio y justificarlo
• Integrarlo al archivo principal si es aprobado
• Definir un roadmap evolutivo para el sistema

Objetivo: Comunicar el sistema como producto real usable.

• Preparar un demo desde Figma
• Mostrar props, tokens, interacción y responsive
• Explicar decisiones técnicas y visuales con claridad

¡estudia y certificate con

Design System!

Online en vivo

2 horas por
semana

Duración:
12 semanas

Cupo:
15 personas

Horario:
Costa Rica:
7:00 p.m.-9:00 p.m.
Colombia:
8:00 p.m.-10:00 p.m.
México (CDMX):
8:00 p.m.-10:00 p.m.
Argentina:
10:00 p.m.-12:00 a.m.

Inicio:
9 de agosto, 2025

¿En qué se diferencian nuestros cursos?

Nuestros cursos son programas online en vivo cortos diseñados con las últimas tendencias y necesidades del mercado. Siempre orientados a la mejora continua, al aprendizaje colaborativo, utilizando el pensamiento crítico, pensamiento visual, para llegar a la innovación.