Introducción del sistema de diseño en una base de código madura

Permítanme guiarlos a través de la introducción del sistema de diseño en una base de código madura basada libremente en Clio. Desafíos de una base de código madura: componentes y estilos inconsistentes, múltiples paletas de colores y patrones de diseño inconsistentes. Trabajar en equipos aislados llevó a un mantenimiento difícil, una incorporación lenta y una experiencia de usuario desarticulada. El equipo del sistema de diseño se dio cuenta de la necesidad de un plan y datos para guiarlos. Necesitamos datos para guiarnos. Una biblioteca de escáner de React nos permitió rastrear la base de código y entender los componentes utilizados. Tecnologías como GitHub Actions, Redshift y Count se utilizaron para almacenar y consultar los datos. El script involucraba ejecutar un escáner, configurarlo y enviar los datos a Redshift a través de Fivetran. ReaRscanner proporcionó el patrón para procesar datos. Recopilamos y ordenamos datos sobre el uso de componentes e importaciones para identificar puntos problemáticos y seguir tendencias. La colaboración fue un desafío, por lo que involucramos a los equipos a través de encuestas, horas de oficina y documentación extensa. Nuestro objetivo es lograr más del 60% de adopción del sistema de diseño. Trabajamos en mantener una única fuente de verdad en nuestro sistema de diseño. Zero Height es nuestra plataforma para almacenar documentación de componentes, integrando herramientas como storybook y Figma, y asegurando la alineación entre diseño y código. Los sistemas de diseño son más que componentes y tokens; crean un lenguaje y proceso compartidos que facilitan el trabajo en equipo y la alineación.