¿Qué es un design system y qué no es?
Un design system es el conjunto de decisiones de diseño documentadas y compartidas que un equipo usa para construir productos digitales de forma consistente: tokens de diseño (colores, tipografías, espaciado), componentes reutilizables, patrones de interacción y guías de uso.
Lo que NO es: un archivo de Figma con componentes bonitos. Sin documentación, sin criterios de uso y sin mantenimiento activo, es solo una galería.
Cuándo vale la pena tener uno
Tiene sentido cuando: hay más de una persona trabajando en diseño o desarrollo, el proyecto tiene múltiples páginas con patrones repetidos, el producto va a evolucionar con el tiempo, o hay inconsistencias visuales que generan retrabajos frecuentes. Para un sitio de 5 páginas estático, el overhead no vale la pena.
Los componentes del design system más básico
Tokens de diseño: las variables fundamentales. Colores (primario, secundario, neutros, semánticos), tipografía (familias, tamaños, pesos), espaciado (escala de 8px) y sombras. En código, se implementan como variables CSS. Cambiar un token actualiza toda la interfaz.
Componentes base: botones con todos sus estados (default, hover, active, disabled, loading), inputs y formularios, cards, modales, navegación y estados vacíos y de error.
Documentación: la parte que nadie quiere hacer
Un componente sin documentación es un componente que se va a usar mal. La documentación mínima: cuándo usarlo y cuándo no, variantes disponibles y ejemplos de uso correcto e incorrecto.
Por dónde empezar sin abrumarse
Empezá con los tokens (colores y tipografía). Después extraé los componentes que ya existen en el diseño en lugar de crearlos desde cero. Documentá mientras construís. Un design system que nace del proyecto real es mucho más útil que uno diseñado en el vacío.