Sistema de diseño

Cuando cada pantalla usa su propio boton, su propio azul y su propio espaciado, el producto acaba pareciendo cosido a retazos y cada cambio pequeño cuesta el triple. Un sistema de diseño arregla eso reuniendo los componentes y los estilos en un solo sitio compartido, pero no aparece de golpe: se construye pieza a pieza.

Este tablero lleva cada componente desde que se apunta como necesario hasta que queda publicado y listo para que todo el equipo lo use. Verlo por columnas evita el tipico limbo de componentes a medio hacer, ni diseñados del todo ni construidos, que nadie sabe si puede usar.

Cada componente, de la lista a la libreria

El tablero mueve cada pieza por cuatro estados: pendiente, en diseño, en desarrollo y publicada. Una tarjeta solo avanza cuando de verdad esta lista para la siguiente fase.

Por hacer

La lista de lo que falta, con los cimientos de estilo antes que las piezas sueltas.

• Listar los componentes necesarios que aun no existen
• Definir los tokens de estilo, colores, tipos y espaciados
• Fijar prioridades para empezar por lo mas usado

En diseño

Dar forma a cada pieza pensando en todos sus estados, no solo en el ideal.

• Diseñar el componente con sus variantes
• Definir sus estados, como foco, error o desactivado
• Revisar con el equipo antes de pasarlo a desarrollo

En desarrollo

Convertir el diseño en codigo reutilizable y explicar como se usa.

• Construir el componente fiel al diseño
• Documentar su uso con ejemplos claros

Publicado

La pieza ya vive en la libreria comun y el equipo sabe que puede usarla.

• Añadir a la libreria compartida
• Anunciar al equipo que ya esta disponible

Como funciona en Foco

Al importarlo, Foco crea el trabajo "Sistema" con estas columnas en la vista Kanban. Arrastras cada componente de un estado al siguiente segun madura, en el ordenador con arrastrar y soltar y en el movil pasando entre columnas como pestañas.

En Panorama ves las tareas de todos tus trabajos a la vez, cada uno con su color, asi que el sistema de diseño convive con el producto y el resto sin mezclarse. A cada componente le pones prioridad y responsable para que quede claro quien lo lleva y cual va antes.