Objetivo
Crear un Design System multiplataforma que sirviera de referencia para todos los equipos de la compañía.
DH Design System
Información del proyecto
Rol
Design System Designer
Duración
6 meses aproximadamente.
Equipo de diseño
1 Design System Designer
Metodología y proceso de trabajo
El proyecto comenzó con una auditoría de productos existentes para detectar inconsistencias visuales, duplicidades y necesidades comunes de los equipos. A partir de ese análisis definimos una hoja de ruta centrada en crear un sistema robusto y escalable.
Trabajamos de forma iterativa: primero definimos la arquitectura de tokens (colores, tipografía, espaciados) como base flexible, fácil de actualizar y extender. Después construimos componentes clave en Figma, documentándolos con guías de uso y buenas prácticas.
En paralelo, desarrollamos los mismos componentes en código, asegurando que diseño y desarrollo trabajaran en espejo. Esto nos permitió validar que los tokens y componentes funcionaban igual en entornos reales, reduciendo errores y acelerando la adopción.
Retos del proyecto
Generar una arquitectura de tokens fácil de personalizar y escalable
Uno de los mayores retos fue crear una base sólida de design tokens que pudiera adaptarse a los diferentes productos de la compañía sin perder coherencia. Los equipos necesitaban flexibilidad para personalizar elementos como colores, tipografía o espaciados, pero al mismo tiempo era crucial mantener una estructura común que facilitara la escalabilidad.
Definimos una arquitectura clara y jerárquica, con tokens base reutilizables que podían modificarse según las necesidades de cada producto. Además, trabajamos estrechamente con los equipos de desarrollo para asegurarnos de que la implementación en código reflejara exactamente lo diseñado en Figma. Esta estructura permitió que el sistema fuera fácil de mantener y preparar al equipo para futuras evoluciones.
Unir diseño y desarrollo
Otro reto importante fue alinear los entregables de diseño y desarrollo en un mismo lenguaje. En el pasado, cada equipo trabajaba con criterios distintos, lo que generaba inconsistencias y retrabajo.
Para resolverlo, creamos librerías compartidas en Figma y las sincronizamos con los componentes desarrollados en código. Así conseguimos que ambos mundos trabajaran sobre la misma base, con componentes idénticos y reglas de comportamiento bien documentadas. Esta integración evitó divergencias y permitió a los diseñadores entregar flujos completos con la confianza de que serían replicados fielmente en producción.
Facilitar el trabajo del equipo de diseño
Finalmente, uno de los mayores desafíos fue conseguir los recursos necesarios para dedicar tiempo completo al proyecto. Al inicio, el Design System se veía como un “extra” y no como una inversión estratégica.
Preparamos un caso de negocio mostrando inconsistencias reales entre productos, duplicación de esfuerzos y ejemplos de cómo un sistema unificado podría ahorrar tiempo y dinero. También presentamos un prototipo funcional que ilustraba el impacto en velocidad y calidad. Gracias a este trabajo conseguimos el apoyo de dirección y el presupuesto para seguir desarrollando y escalando el Design System.
Conseguir el presupuesto para trabajar en el proyecto
Finalmente, uno de los mayores desafíos fue conseguir los recursos necesarios para dedicar tiempo completo al proyecto.
Al inicio, el Design System se veía como un “extra” y no como una inversión estratégica.
Preparamos un caso de negocio mostrando inconsistencias reales entre productos, duplicación de esfuerzos y ejemplos de cómo un sistema unificado podría ahorrar tiempo y dinero. También presentamos un prototipo funcional que ilustraba el impacto en velocidad y calidad.
Gracias a este trabajo conseguimos el apoyo de dirección y el presupuesto para seguir desarrollando y escalando el Design System.
Bayn
Ver proyecto