Systemy projektowe wykorzystują już tokeny do określania koloru, odstępów i typografii. Żetony ruchu stosują tę samą ideę do animacji. Zamieniają decyzje takie jak „małe elementy poruszają się szybko i delikatnie osadzają się” w nazwanych wartościach, z których korzysta każdy projektant i programista.
Typowy zestaw obejmuje czasy trwania (krótki, średni, długi), krzywe luzowania (standardowe, wejściowe, wyjściowe) i coraz częściej sprężyny określone przez sztywność, tłumienie i masę. Sprężyny są popularne, ponieważ sprawiają wrażenie naturalnych i dobrze radzą sobie z przerwami w kodzie.
Nazewnictwo ma znaczenie. Nazwy oparte na celu, takie jak motion.enter lub motion.emphasis, są łatwiejsze do prawidłowego zastosowania niż surowe liczby. Trzymaj zestaw mały. Jeśli każdy komponent otrzyma własną krzywą, żetony przestaną wykonywać swoją pracę.
Dostępność również należy do tokenów. Zdefiniuj, co się stanie, gdy użytkownik włączy ograniczony ruch, na przykład krótsze zanikanie zamiast dużego ruchu, aby każdy komponent obsługiwał to w ten sam sposób.
Tokeny są zwykle przechowywane w JSON i przekształcane w zmienne CSS, Swift, Kotlin lub JavaScript za pomocą narzędzia do tworzenia tokenów. Nasz darmowy generator tokenów ruchu tworzy zestaw startowy, który możesz dostosować.