Los sistemas de diseño ya utilizan tokens para el color, el espaciado y la tipografía. Los tokens de movimiento aplican la misma idea a la animación. Convierten decisiones como "pequeños elementos se mueven rápidamente y se asientan suavemente" en valores con nombre que todo diseñador y desarrollador utiliza.
Un conjunto típico incluye duraciones (corta, media, larga), curvas de relajación (estándar, entrada, salida) y, cada vez más, resortes definidos por rigidez, amortiguación y masa. Los resortes son populares porque se sienten naturales y manejan bien las interrupciones en el código.
El nombre importa. Los nombres basados en el propósito, como motion.enter o motion.emphasis, son más fáciles de aplicar correctamente que los números sin formato. Mantenga el conjunto pequeño. Si cada componente tiene su propia curva, los tokens dejan de hacer su trabajo.
La accesibilidad también pertenece a los tokens. Defina qué sucede cuando el usuario activa el movimiento reducido, por ejemplo, desvanecimientos más cortos en lugar de un movimiento grande, para que todos los componentes lo manejen de la misma manera.
Los tokens generalmente se almacenan en JSON y se convierten en variables CSS, Swift, Kotlin o JavaScript mediante una herramienta de creación de tokens. Nuestro Motion Token Generator gratuito produce un conjunto inicial que puedes adaptar.