DESIGN
SYSTEM
OVERVIEW
Creación de un sistema de diseño escalable desde cero para una startup tecnológica en rápido crecimiento. El sistema debía servir a 3 productos diferentes manteniendo consistencia visual y facilitando la colaboración entre diseño y desarrollo.
EL DESAFÍO
La empresa tenía 3 productos con diseños inconsistentes, 5 diseñadores trabajando sin guías claras y un equipo de desarrollo frustrado por la falta de documentación. Cada nuevo feature tomaba semanas en diseñarse y desarrollarse por falta de componentes reutilizables.
LA SOLUCIÓN
Construí un sistema de diseño completo con tokens de diseño, componentes atómicos y documentación exhaustiva. Implementé un proceso de contribución que permite a cualquier diseñador proponer nuevos componentes. Creé una librería en Figma sincronizada con código en React para mantener diseño y desarrollo alineados.
PROCESO DE DISEÑO
01. AUDIT & ANALYSIS
Audité los 3 productos existentes catalogando todos los componentes, estilos y patrones. Identifiqué 47 variaciones del mismo botón y 23 tonos diferentes de azul. Entrevisté a diseñadores y developers para entender pain points y necesidades. Analicé sistemas de diseño de referencia como Material Design y Carbon.
02. FOUNDATION & TOKENS
Definí los fundamentos del sistema: paleta de colores con propósito semántico, escala tipográfica modular, espaciado consistente y sistema de elevación. Creé tokens de diseño que funcionan en light y dark mode. Establecí principios de diseño que guían decisiones: accesible, consistente, eficiente.
03. COMPONENTS & PATTERNS
Diseñé 80+ componentes siguiendo metodología atomic design: átomos, moléculas, organismos. Cada componente incluye todos sus estados, variantes y casos de uso. Documenté patrones de interacción comunes como formularios, navegación y feedback. Creé templates para layouts recurrentes.
04. DOCUMENTATION & ADOPTION
Construí un sitio de documentación con ejemplos de código, guías de uso y mejores prácticas. Realicé workshops con el equipo para enseñar el sistema y proceso de contribución. Establecí un sistema de versionado y changelog. Creé métricas para medir adopción y éxito del sistema.