React Design System para Aplicaciones Escalables
Design system de nivel producción para una fintech, con primitivas compartidas, tokens de diseño y documentación para equipos en 6 superficies de producto.
Resumen
Design system integral para una fintech, creado para unificar lenguaje visual e interacción en toda su plataforma web. Incluye componentes primitivos, patrones compuestos, infraestructura de tokens y documentación interactiva consumida por 4 equipos de ingeniería.
Contexto
El cliente tenía 4 equipos construyendo de forma independiente con patrones inconsistentes, lógica duplicada y sin lenguaje visual compartido. Nuevas funcionalidades exigían coordinación excesiva para mantener consistencia.
Problema
Diseñar y construir un sistema de componentes escalable que funcionara como fuente única de verdad para UI en todas las superficies, con infraestructura sólida de tokens, APIs claras y plataforma de documentación colaborativa.
Responsabilidades
- ›Diseño de arquitectura completa de tokens (colores, spacing, tipografía, radius y shadows)
- ›Construcción de más de 60 componentes primitivos y compuestos con APIs de variantes en CVA
- ›Definición de estructura de documentación en Storybook y guías de contribución
- ›Implementación de visual regression con Chromatic integrado en CI
- ›Facilitación de sesiones de alineación diseño-ingeniería para anclar decisiones de tokens en variables de Figma
Decisiones técnicas
class-variance-authority para variantes
Uso de CVA para codificar variantes como configuración tipada, haciendo APIs previsibles, auto-completables y desacopladas de detalles de estilo.
Radix UI para primitivas accesibles
Construcción de componentes interactivos sobre primitivas headless de Radix para garantizar cumplimiento ARIA y navegación por teclado sin rehacer accesibilidad compleja.
Tokens de diseño como fuente única de verdad
Implementación de capa de tokens con CSS custom properties espejando variables de Figma, asegurando consistencia diseño-código y cambios globales centralizados.
Arquitectura
Estructura de monorepo con paquetes separados para tokens, primitivas y compuestos. Storybook como superficie principal de documentación y pruebas visuales. Chromatic como gate de regresión visual en CI.
Desafíos
- ›Definir convenciones de nombres de tokens relevantes para diseño e ingeniería
- ›Mantener estabilidad de APIs de componentes mientras el sistema evolucionaba rápido
- ›Lograr conformidad completa de accesibilidad en componentes interactivos
Resultados
Reducción de 52% en ciclos de revisión de PRs relacionados con UI entre equipos
Cumplimiento WCAG 2.1 AA en componentes interactivos
Reducción promedio de 35% en tiempo de implementación de nuevas funcionalidades tras adopción
Aprendizajes
- ›Nombrar tokens es un contrato de comunicación; invertir en taxonomía correcta multiplica alineación
- ›Un design system nunca está terminado; su modelo de sustentación importa más que el alcance inicial