Les systèmes de conception utilisent déjà des jetons pour la couleur, l'espacement et la typographie. Les jetons de mouvement appliquent la même idée à l'animation. Ils transforment des décisions telles que « les petits éléments se déplacent rapidement et s'installent en douceur » en valeurs nommées que chaque concepteur et développeur utilise.
Un ensemble typique comprend des durées (courtes, moyennes, longues), des courbes d'assouplissement (standard, entrée, sortie) et, de plus en plus, des ressorts définis par la rigidité, l'amortissement et la masse. Les ressorts sont populaires car ils semblent naturels et gèrent bien les interruptions dans le code.
Le nom est important. Les noms basés sur un objectif, tels que motion.enter ou motion.emphasis, sont plus faciles à appliquer correctement que les nombres bruts. Gardez l'ensemble petit. Si chaque composant a sa propre courbe, les jetons cessent de faire leur travail.
L'accessibilité appartient également aux jetons. Définissez ce qui se passe lorsque l'utilisateur active un mouvement réduit, par exemple des fondus plus courts au lieu d'un mouvement important, afin que chaque composant le gère de la même manière.
Les jetons sont généralement stockés dans JSON et transformés en variables CSS, Swift, Kotlin ou JavaScript par un outil de création de jetons. Notre générateur de jetons de mouvement gratuit produit un ensemble de démarrage que vous pouvez adapter.