Entonces, cuando diseñamos el Workflow Builder y nuestra biblioteca de componentes subyacente overflow sobre la cual está construido, decidimos tomar este enfoque de estilo cero y abordar algunos de estos problemas. Así que, déjame hablarte sobre cuál es este enfoque. Entonces, primero que nada, comienza con el diseño, con el equipo de diseño. Hacemos nuestros diseños en Figma. Estoy seguro de que muchos de ustedes están familiarizados con él. Y sí, el enfoque que hemos tomado es desde el principio. Al diseñar los componentes, los diseñadores no están usando ningún valor directamente. Todo está construido sobre un conjunto de primitivas y números que se crean para almacenar los valores reales y luego los valores para estilos en los componentes se crean realmente usando tokens que hacen referencia a esos números y primitivas. Es importante mantener todo en esta biblioteca de esa manera, pero nos ayudará en la etapa posterior.
Entonces, el siguiente paso, creo que el más importante, es la automatización. Entonces, con Figma, con dos plugins como Token Exporter, puedes exportar esos tokens y estilos y crear archivos JSON simples a partir de ellos. Tenemos un script automatizado que puede convertir esto en el paquete CSS real que se está usando en el proyecto. Entonces, con una configuración adecuada como en la canalización de GitHub, podemos hacer esto completamente automático y realmente para generar nuevos estilos, un diseñador puede hacerlo, ¿verdad? Para obtener el paquete CSS e integrarlo en el código. Ni siquiera es necesario el trabajo de los desarrolladores allí. Y sí, luego el paso final, por supuesto, en el código. Cuando implementas los componentes en lugar de escribir el CSS, estás haciendo referencia a esas variables CSS del paquete generado. Así que, sí. Una cosa importante a añadir aquí es que, en nuestra biblioteca de componentes, la importación de estilos está completamente separada de la construcción de la aplicación, por lo que es totalmente posible, ya sabes, simplemente reemplazar el paquete CSS y restilizar la misma versión de los componentes.
Entonces, para resumir esto, este estilo cero tiene tres pasos. El primero es usar los tokens de diseño de la fase de diseño. Otro es crear esta automatización que permite a los diseñadores realmente generar el CSS y actualizarlo en el código. Y por supuesto, al implementar, siempre usamos esas variables CSS. Entonces, ¿qué nos permite hacer esto? Bueno, facilita, facilita los cambios de estilo en la aplicación mucho más, especialmente para casos como el nuestro donde, ya sabes, muy a menudo no hay cambios de lógica sino solo asegurarse de que la configuración del workflow builder ahora sigue la marca de la empresa de la herramienta que se está utilizando. Sin errores en la transferencia de estilo, ¿verdad? Si todo lo hace el equipo de diseño y haces referencia al token, nunca puedes escribir mal esa propiedad o pegar el número incorrecto. Y el equipo de diseño puede hacer los cambios sin el equipo de desarrollo, lo cual es realmente importante.
Comments