01 Capítulo 1 · Lección 14

Sistema Consistente de UI

Redactado por

Sebastian V.

Fecha de publicación

14/04/2024

Tiempo de lectura

5 min

Tema

CSS Transitions

El problema de los números mágicos

A medida que tu proyecto web crece, tendrás docenas de botones, tarjetas, inputs y modales. Si en cada uno de ellos te pones a escribir duraciones aleatorias (0.2s aquí, 0.35s allá, ease acá, linear en otro lado), tu web terminará pareciendo un parque de diversiones caótico. No habrá consistencia. Tu marca no tendrá una "identidad de movimiento".

Motion Tokens

Al igual que guardamos nuestra paleta de colores en Variables CSS (Design Tokens), debemos hacer lo mismo con nuestras reglas de animación (Motion Tokens). Definiremos una escala de duraciones y una paleta de curvas (easing).

> _

/* Ejemplo de una escala profesional */
--duration-fast: 150ms;   /* Microinteracciones, hovers simples */
--duration-normal: 300ms; /* Desplegables, menús, estados focales */
--duration-slow: 500ms;   /* Transiciones de página, modales grandes */

Consejo profesional

Frameworks modernos como Tailwind CSS incluyen un sistema de escalas por defecto (clases como duration-300 o ease-in-out). Usa esos tokens de diseño para no reinventar la rueda.

Ejemplo práctico

> _

<div class="system-demo">
  <button class="btn">Botón Principal</button>
  <input type="text" class="input" placeholder="Campo de texto" />
  <div class="tag">Etiqueta</div>
</div>

<style>
  .system-demo {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
</style>

:root {
  /* Motion Design Tokens */
  --dur-fast: 0.15s;
  --dur-base: 0.3s;
  --dur-slow: 0.5s;
  
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.btn {
  padding: 12px 24px;
  background: #a855f7;
  color: #0f172a;
  border: none;
  border-radius: 0;
  font-weight: bold;
  font-family: 'afronaut', serif;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-bounce),
              background var(--dur-fast) var(--ease-out);
}

.btn:hover {
  background: #c084fc;
  transform: scale(1.05);
}

.input {
  padding: 10px 12px;
  background: #18181b;
  border: 1px solid #3f3f46;
  border-radius: 0;
  color: white;
  font-family: 'afronaut', serif;
  outline: none;
  transition: border-color var(--dur-base) var(--ease-out);
}

.input:focus {
  border-color: #a855f7;
}

.tag {
  padding: 6px 12px;
  background: rgba(255,255,255,0.1);
  border: 1px dashed rgba(255,255,255,0.3);
  border-radius: 0;
  color: white;
  font-family: 'afronaut', serif;
  font-weight: 300;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-in-out);
}

.tag:hover {
  background: rgba(255,255,255,0.2);
}

> _

Etiqueta

Todos los elementos de este contenedor están sincronizados usando variables. Si hiciéramos un cambio global, todos responderían al unísono manteniendo la armonía en toda la página.

Errores comunes

Valores quemados (Hardcoded) Escribir 0.28s en diferentes archivos de manera manual. Usa variables para que los cambios sean escalables a nivel de sistema.

Variables excesivamente complejas Tener --duration-200, --duration-250, --duration-300. Demasiadas opciones derrotan el propósito del sistema. Limítate a rápido, base y lento.

Practica lo aprendido

Audita tu código actual y reemplaza todos los tiempos estáticos por variables CSS.

01 Extrae tus duraciones comunes (150ms, 300ms) a variables CSS.

02 Extrae tus curvas de Bezier favoritas a variables.

03 Usa estas variables en todos los componentes de tu proyecto.

04 Si un día quieres que la app se sienta "más rápida", solo cambias las variables base.

05 A esto se le llama un "Motion Design System".