Las tareas de un design system

Te voy a contar el método que uso para hacer un seguimiento de tareas de un design system. ¿Qué proceso sigo para notificar a mi equipo? ¿Cuáles son los pasos que doy cuando construyo un sistema de diseño?

Te daré detalles de un proyecto concreto. Lo aclaro porque no creo en biblias ni en dogmas. Lo decía en uno de los mails que mandé a los suscriptores de mi lista de correo: no hay empresas iguales y no hay proyectos iguales, siempre hay diferencias.

Parto de una lista de componentes que confeccionamos en las primeras reuniones del proyecto.

El orden natural es seguir el diseño atómico pero un design system es un ente vivo y el día a día muchas veces nos obliga a romper el orden establecido.

En principio me pongo a trabajar siguiendo un roadmap.

Crear componentes

Te pongo un ejemplo, un componente básico, un botón.

El botón puede tener distintos estados, colores, tamaños, un label, un icono a la izquierda del label, otro derecha, etc.

Cuando me siento a construir el componente botón, si las especificaciones definidas no son claras o son insuficientes busco un hueco en Calendar con alguna persona del equipo para comentarlas. Juntos buscamos una solución.

Después retomo el trabajo.

Refactorización

El proyecto que estoy usando de ejemplo cuenta con componentes obsoletos.

Entonces aplico la refactorización, construyo los componentes otra vez, desde cero teniendo en cuenta la escalabilidad, los detalles de cada frame, los nombres de los elementos, las propiedades, sus variantes, etc.

Durante la construcción del componente voy documentando todos los detalles del mismo en otra página de Notion. Los detalles de la documentación de un componente los compartí en otro mail de mi lista de correo y en el artículo Cómo documentar componentes de Figma.

Publicar componentes

Cuando termino de construir el botón hago pruebas con una instancia del componente en el mismo archivo.

Si todo funciona correctamente lo publico y con ello se propaga en todo el proyecto.

Algunas veces pido una prueba rápida a alguna persona del equipo.

Si encuentro algún problema, rápidamente hago un “Hide when publishing” en la pestaña Assets de Figma y vuelvo a publicar los cambios en la librería. De este modo controlo que nadie pueda encontrar el componente.

Aplico las correcciones necesarias, hago nuevas pruebas y vuelvo a publicar.

Documentar el sistema de diseño

Si todo funciona correctamente me voy a una página de Notion que he creado para documentar todos los pasos que doy para crear el sistema de diseño.

Es básicamente una base de datos con las columnas:

• Fecha
• Tarea (Título de la tarea)
• Estado (Not Started, In Progress, Blocked, Review, Done, Archived)
• Responsable
• Upgrade
• Comentarios

Desde el título que introduzco en la columna Tarea enlazo una página donde detallo todo lo que hago para construir el componente. Para ello uso textos, listas, archivos de Figma incrustados, enlaces a más información, etc.

Los detalles de la documentación propia de un componente los compartiré en otro mail de mi lista de correo.

Algunas veces sabemos que un componente deberá ser actualizado más pronto que tarde. En esos casos añado el label Required en la celda de la columna Upgrade.

Cambio de prioridades

La irrupción de prioridades son una realidad y en algunos momentos hay que cambiar el flujo.

En cualquier momento existe la posibilidad de recibir una petición especial.

Las necesidades pueden ser muchas.

Por ejemplo, si en algunas de las tareas que realiza el equipo se necesita un componente determinado, pongo en pausa los trabajos que estuviera realizando con el componente botón.

Siguiendo el flujo habitual construyo el componente que ha recibido más prioridad y cuando lo termino retomo la tarea que estaba en pausa.

Actualizaciones

Todo producto digital evoluciona y de vez en cuando necesita ser actualizado, hay necesidades y nuevas features que requieren revisar el diseño y las propiedades de un componente.

Cada upgrade lo registro como una fila más de la base de datos que tengo en la página de Notion donde hago el seguimiento de todas las tareas del sistema de diseño.