Sistemas consistentes
Redactado por
Sebastian V. Fecha de publicación
23/07/2025
Tiempo de lectura
6 min
Tema
Interactions
¿Qué son los Sistemas Consistentes?
Un sistema de interacciones consistente (Motion System) es la estandarización de variables de movimiento y tiempo a través de toda una aplicación. En lugar de codificar manualmente cada transición de cada componente aislado, defines reglas físicas globales de las que beben todos los elementos.
¿Para qué sirven?
Un producto se percibe barato y desordenado si un botón rebota cómicamente como goma, mientras que la tarjeta contigua se desvanece de forma plana y lenta. Las personas construyen modelos mentales de cómo funciona el mundo físico; si tu software rompe esas leyes físicas de componente en componente, causará fatiga cognitiva.
- Personalidad de marca: La app de Apple se siente distinta a Android no solo por los colores, sino por las curvas de aceleración (easing).
- Mantenibilidad técnica: Si el director de diseño pide que la app sea "un 20% más ágil", cambias un token y 1000 componentes se actualizan instantáneamente.
- Familiaridad: Si los enlaces y botones elevan la misma distancia al hover, el usuario aprende un lenguaje universal de interactividad en tu app.
¿Cómo se usan?
Se implementan creando Motion Tokens utilizando CSS Custom Properties (Variables) en el bloque :root. Defines variables como --duration-fast: 150ms, --ease-snappy: cubic-bezier(0.175, 0.885, 0.32, 1.275) y luego las inyectas en todos los atributos transition y animation de tus hojas de estilo.
Consejo profesional
Organiza tus tokens por intención, no por tiempo absoluto. Nombra tus variables como --t-micro (para hovers) o --t-panel (para modales) en lugar de --t-150ms. Así tu sistema tendrá sentido semántico.
Usando CSS Variables para Motion Consistente
<div class="system-demo">
<button class="sys-btn sys-primary">Botón A</button>
<button class="sys-btn sys-secondary">Botón B</button>
<div class="sys-card">Mismas reglas físicas</div>
</div>Interactúa con ambos botones y la card. Nota que comparten el mismo estilo de movimiento y tiempo.
Errores comunes
Practica lo aprendido
Crea tus propios Motion Tokens con CSS Variables y aplícalos a múltiples componentes.