Designsysteme verwenden bereits Token für Farbe, Abstand und Typografie. Bewegungstoken wenden die gleiche Idee auf Animationen an. Sie verwandeln Entscheidungen wie „kleine Elemente bewegen sich schnell und setzen sich sanft ab“ in benannte Werte, die jeder Designer und Entwickler verwendet.
Ein typischer Satz umfasst Federn (kurz, mittel, lang), Entspannungskurven (Standard, Eintritt, Austritt) und zunehmend auch Federn, die durch Steifigkeit, Dämpfung und Masse definiert sind. Federn sind beliebt, weil sie sich natürlich anfühlen und Unterbrechungen im Code gut bewältigen.
Benennung ist wichtig. Zweckbasierte Namen wie „motion.enter“ oder „motion.emphasis“ lassen sich leichter korrekt anwenden als reine Zahlen. Halten Sie das Set klein. Wenn jede Komponente eine eigene Kurve erhält, hören die Token auf, ihre Aufgabe zu erfüllen.
Auch Barrierefreiheit gehört zu den Tokens. Definieren Sie, was passiert, wenn der Benutzer reduzierte Bewegungen einschaltet, z. B. kürzere Überblendungen anstelle großer Bewegungen, damit jede Komponente auf die gleiche Weise damit umgeht.
Token werden normalerweise in JSON gespeichert und von einem Token-Build-Tool in CSS-Variablen, Swift, Kotlin oder JavaScript umgewandelt. Unser kostenloser Motion-Token-Generator erstellt ein Starterset, das Sie anpassen können.