UNIR Design Systems

Las aplicaciones y los portales del grupo compartían marca pero no lenguaje: cada producto resolvía de nuevo botones, formularios o tarjetas, y el paso de Figma a código dependía de la interpretación de cada equipo. Hacía falta una base común capaz de escalar a varias marcas y temas sin multiplicar el trabajo de diseño ni el de desarrollo.

Unificar tres temas en un solo sistema, con modo claro y oscuro, y garantizar que lo que se diseña en Figma es exactamente lo que se implementa. Al mismo tiempo, dar servicio a dos tecnologías muy distintas: aplicaciones Angular y portales en Adobe Experience Manager.

Librería Angular 21 sobre PrimeNG 21 con presets propios por tema. Los temas se diferencian a través de sus tokens semánticos, como los radios de cada rol, y cada componente usa tokens de componente que siempre aliasan a semánticos, de modo que un cambio de marca se propaga sin tocar los componentes.

Además de los componentes de PrimeNG, el sistema incluye los patrones propios de Proeduca: chat con IA, agenda, tareas, navegación móvil y campos específicos como teléfono con prefijo o aceptación de protección de datos.

Para los portales en Adobe Experience Manager el sistema se entrega sin framework: HTML con clases BEM, CSS con las 409 variables de Figma y JavaScript sin dependencias, listo para llevar a los componentes de AEM.

Incluye 29 componentes, 26 módulos de página y 28 plantillas del portal y de las landings, revisadas en los cuatro breakpoints de Figma: 1920, 1280, 768 y 375.

Diseñé y desarrollé un explorador propio para presentar ambos sistemas: catálogo, componente real renderizado con el ancho de cada dispositivo y panel de control con todas sus propiedades y eventos.

Cada componente muestra su código listo para copiar, los tokens que usa con su valor en el tema activo y una vista de medidas que dibuja cotas, paddings y gaps sobre el componente real, igual que en Figma. Foundations enseña la tipografía, el color, los radios, el espaciado, las sombras y los iconos leídos directamente de las variables CSS.

Cada componente está conectado a su nodo de Figma con Code Connect, así Dev Mode muestra el código real en lugar de una aproximación. El repositorio incorpora skills y un agente para Claude Code y Codex que auditan la librería de Figma, generan componentes, sincronizan tokens y documentan el sistema.

Con este flujo audité y saneé la librería de Figma: nombres duplicados, scopes de variables y referencias rotas a tokens eliminados, hasta dejarla sin incidencias críticas.