Sin un sistema de diseño, cada diseñador y desarrollador toma pequeñas decisiones por su cuenta: un azul ligeramente diferente, un nuevo estilo de botón, otro valor de espaciado. Después de un año, el producto tiene docenas de casi duplicados. Un sistema de diseño reemplaza esas decisiones repetidas por decisiones compartidas.
La mayoría de los sistemas de diseño tienen tres capas. Los tokens de diseño son valores con nombre, como color.primary, space.4 o motion.duration.short, que almacenan las decisiones sin procesar. Los componentes, como botones, entradas, tarjetas y cuadros de diálogo, se crean a partir de esos tokens e incluyen todos los estados. Las pautas documentan cómo usar cada componente, cómo escribir etiquetas y mensajes, y qué reglas de accesibilidad se aplican.
Un sistema de diseño reside en dos lugares: en la herramienta de diseño, como una biblioteca de componentes, y en el código, como un paquete que instalan los desarrolladores. Mantener a esos dos sincronizados es la parte más difícil. Cuando el botón codificado ya no coincide con el diseñado, la gente deja de confiar en el sistema.
El movimiento también pertenece al sistema. Las duraciones, las curvas de relajación y las configuraciones de resorte pueden ser tokens, y los componentes interactivos necesitan un comportamiento definido para desplazarse, presionar, cargar y transiciones. ExodeUI, que creamos, almacena ese comportamiento en un archivo abierto con estados y física de resortes, por lo que el mismo componente se reproduce en React, Vue, SwiftUI, Flutter y otros marcos.
Ejemplos públicos bien conocidos incluyen Material Design de Google, Human Interface Pautas de Apple, Carbon de IBM y Polaris de Shopify. Leerlos es una buena manera de ver cómo se organiza un sistema maduro.