Designsystem använder redan tokens för färg, mellanrum och typografi. Rörelsetokens tillämpar samma idé på animering. De förvandlar beslut som "små element rör sig snabbt och sätter sig varsamt" till namngivna värden som varje designer och utvecklare använder.
En typisk uppsättning inkluderar varaktigheter (kort, medel, lång), lättande kurvor (standard, ingång, utgång) och i allt högre grad fjädrar definierade av styvhet, dämpning och massa. Fjädrar är populära eftersom de känns naturliga och hanterar avbrott bra i kod.
Namngivning spelar roll. Namn baserade på syfte, som motion.enter eller motion.emphasis, är lättare att använda korrekt än råa tal. Håll uppsättningen liten. Om varje komponent får sin egen kurva slutar tokens att göra sitt jobb.
Tillgänglighet hör också till polletterna. Definiera vad som händer när användaren aktiverar reducerad rörelse, till exempel kortare toningar istället för stora rörelser, så att varje komponent hanterar det på samma sätt.
Tokens lagras vanligtvis i JSON och förvandlas till CSS-variabler, Swift, Kotlin eller JavaScript av ett tokenbyggningsverktyg. Vår gratis Motion Token Generator producerar ett startset som du kan anpassa.