Design system

Qué incluye

• Design tokens: las decisiones básicas guardadas como variables (colores, tamaños, radios, sombras, tipografías) para que diseño y código usen exactamente los mismos valores.
• Componentes: piezas de interfaz reutilizables, como botones, campos, tarjetas, menús o tablas, con sus estados (normal, hover, error, desactivado).
• Patrones: combinaciones habituales de componentes, como un formulario de registro o una tabla con filtros.
• Pautas de uso: cuándo usar cada componente, accesibilidad y tono de los textos de interfaz.
• Documentación pública o interna que todos consultan.

En qué se diferencia de otros términos

• Manual de marca: define logo, colores y tono de comunicación; un design system los aplica a la interfaz y los lleva al código.
• UI kit: una librería de componentes en Figma u otra herramienta, sin reglas ni código asociado.
• Librería de componentes: el código de los componentes; es una parte del design system, no todo.

Ejemplos públicos

• Material Design (Google, 2014).
• Carbon (IBM).
• Polaris (Shopify).
• Lightning Design System (Salesforce), que popularizó el concepto de design tokens.

Cuándo merece la pena

Una tecnológica B2B pequeña no necesita un design system completo desde el primer día. Suele merecer la pena cuando varias personas diseñan o desarrollan a la vez, cuando el producto y la web empiezan a divergir visualmente o cuando cada pantalla nueva se diseña desde cero. Lo habitual es empezar por tokens y una decena de componentes básicos e ir ampliando.

Errores frecuentes

• Construirlo antes de tener producto: se diseñan componentes que nadie usa.
• Mantener diseño y código por separado, de modo que se desincronizan.
• No asignar a nadie su mantenimiento: se queda obsoleto en meses.

Términos relacionados

• Design as a Service
• Landing page

Fuentes

• Material Design, Carbon Design System y Shopify Polaris.
• Brad Frost, Atomic Design (2016).