Sistema de diseño (design system)
Un sistema de diseño es el conjunto compartido de design tokens, componentes de UI, guías de uso y gobernanza que mantiene consistentes las interfaces de un producto entre equipos.
Un sistema de diseño reúne las decisiones sobre cómo se ve y se comporta un producto y las vuelve reutilizables. Normalmente incluye design tokens, una librería de componentes en código, la librería equivalente en la herramienta de diseño, documentación con reglas de uso y pautas de accesibilidad, y un proceso para proponer y publicar cambios.
Es un producto con sus propios usuarios, los equipos de producto. Necesita un dueño, versionado y un roadmap.
Ejemplo
Una empresa tiene seis equipos que construyen partes de un mismo back-office. Antes del sistema de diseño, cada equipo tenía su propio selector de fechas, y se usaban tres tonos del color primario. El equipo del sistema de diseño publica @acme/ui con un botón, campos de formulario, una tabla y un selector de fechas, además de un sitio de documentación. Los equipos reemplazan sus versiones locales release tras release. Una corrección en la navegación por teclado del selector de fechas llega ahora a los seis equipos con una sola actualización de paquete.
Confusión frecuente
Muchas veces se llama sistema de diseño a una librería de componentes sola. La librería es la parte más visible. Sin tokens, documentación y un proceso de decisión, los equipos copian los componentes o los esquivan, y la inconsistencia vuelve.
La gestión de versiones es la otra trampa, sobre todo con microfrontends. Si cada remoto puede fijar cualquier versión, los usuarios pueden ver dos generaciones del mismo componente en una pantalla. Acuerda cómo se comparte la librería en tiempo de ejecución y cuánto puede atrasarse un remoto.
Durante una migración, los componentes que deben servir a la aplicación legacy y a la nueva se pueden entregar como web components. Otra opción es compartir solo los tokens al principio. En microfrontends se ve cómo encaja esto en una plataforma.
Por qué importa. Los usuarios juzgan una plataforma como un solo producto, y por eso los microfrontends construidos por separado necesitan un sistema de diseño común. En una migración mantiene la coherencia visual entre pantallas viejas y nuevas mientras ambas existen.
Términos relacionados
¿Planeas una migración o una plataforma de microfrontends?
En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.
Escríbeme por LinkedIn