Desarrollo Frontend · FRO-151

Sistemas de diseño y componentes reutilizables

Tokens, documentación viva y gobierno de una biblioteca de componentes compartida entre proyectos.

Próximamente Avanzado 7 módulos · 34 clases

Formato asíncrono Desarrollo, Empresa / PYME CSS, React

DESARROLLO ACCESIBILIDAD

Lo que aprenderás

Definir tokens de diseño en capas primitiva, semántica y de componente, y publicarlos como CSS y JavaScript
Diseñar la API de un componente decidiendo props, variantes y puntos de extensión
Construir componentes accesibles siguiendo los patrones de WAI-ARIA para diálogos, menús y pestañas
Documentar la biblioteca con Storybook y ejemplos ejecutables por variante
Versionar y publicar el paquete con versionado semántico y notas de cambio
Detectar regresiones visuales y de accesibilidad en la integración continua
Establecer el proceso de contribución y los criterios para aceptar un componente nuevo

Contenido del curso

7 módulos · 34 clases en vídeo · práctica guiada en cada módulo

Módulo 1 · Punto de partida 4 clases

Qué es un sistema de diseño y qué no lo es
Inventario de interfaz de los productos existentes
Entorno del curso: monorepo, React y Storybook
Criterios de éxito y de fracaso de una biblioteca compartida

Módulo 2 · Tokens de diseño 5 clases

Capas de tokens: primitivos, semánticos y de componente
Color, contraste y paletas que funcionan en claro y oscuro
Escalas de espaciado, tipografía y elevación
Generar CSS y JavaScript desde una única fuente
Sincronizar tokens con la herramienta de diseño

Módulo 3 · Diseño de la API de componentes 5 clases

Props, variantes y valores por defecto sensatos
Composición frente a configuración por props
Puntos de extensión: className, slots y componentes polimórficos
Componentes controlados y no controlados
Ejercicio: API del componente de campo de formulario

Módulo 4 · Accesibilidad 5 clases

Patrones de WAI-ARIA aplicados a componentes reales
Diálogo modal: foco, cierre y lectura por el lector de pantalla
Menú, pestañas y navegación por teclado
Anuncios de estado y regiones activas
Comprobación con lector de pantalla y con herramientas automáticas

Módulo 5 · Documentación viva 5 clases

Storybook: historias, controles y documentación
Ejemplos por variante y casos límite
Guías de uso: cuándo usar y cuándo no cada componente
Documentar los tokens y su significado
Publicar la documentación para toda la organización

Módulo 6 · Publicación y calidad 5 clases

Empaquetado de la biblioteca y exportaciones
Versionado semántico y notas de cambio automáticas
Pruebas unitarias y de accesibilidad en integración continua
Pruebas de regresión visual
Estrategia de deprecación y cambios que rompen

Módulo 7 · Gobierno y proyecto de cierre 5 clases

Proceso de propuesta y aceptación de un componente
Roles, propiedad y mantenimiento a lo largo del tiempo
Medir la adopción real en los productos
Migrar un producto existente a la biblioteca
Presentación del sistema y plan de evolución

Requisitos

React y CSS con experiencia real en proyectos de producción
Manejo de npm, versionado semántico y control de versiones con Git
Haber participado en un proyecto con más de un equipo tocando la interfaz

Descripción

Cuando una organización tiene tres o cuatro productos, el mismo botón acaba existiendo en cuatro versiones ligeramente distintas y ningún cambio de marca se puede aplicar en un solo sitio. La solución no es solo técnica: una biblioteca compartida fracasa si nadie la mantiene, si no está documentada o si adoptarla cuesta más que copiar el componente.

El curso cubre las dos caras. Por un lado la construcción: tokens en capas, API de componentes, accesibilidad según los patrones de WAI-ARIA, empaquetado y publicación como paquete versionado. Por otro el gobierno: cómo se documenta con Storybook, cómo se decide qué entra en la biblioteca, cómo se comunican los cambios que rompen y cómo se mide la adopción real.

Lo que sale de aquí es una biblioteca que otros equipos instalan y usan sin preguntar, con su documentación y su proceso de contribución escrito. Es el trabajo habitual de un equipo de plataforma o de diseño de sistemas, y para una empresa se traduce en cambios de marca aplicables de una vez y en dejar de rehacer el mismo trabajo en cada producto.

¿Para quién es este curso?

Equipos de plataforma o de frontend responsables de la coherencia visual de varios productos
Responsables técnicos de empresa que quieren dejar de pagar el mismo componente en cada proyecto
Desarrolladores que mantienen una biblioteca interna de componentes y buscan estructurar su proceso