Ontwerpsystemen maken al gebruik van tokens voor kleur, spatiëring en typografie. Bewegingstokens passen hetzelfde idee toe op animatie. Ze zetten beslissingen zoals "kleine elementen bewegen snel en nestelen zich zachtjes" om in benoemde waarden die elke ontwerper en ontwikkelaar gebruikt.
Een typische set omvat duur (kort, gemiddeld, lang), versoepelingscurven (standaard, enter, exit) en, in toenemende mate, veren die worden gedefinieerd door stijfheid, demping en massa. Veren zijn populair omdat ze natuurlijk aanvoelen en goed omgaan met onderbrekingen in code.
Naamgeving is belangrijk. Op doel gebaseerde namen, zoals motion.enter of motion.emphasis, zijn gemakkelijker correct toe te passen dan ruwe cijfers. Houd de set klein. Als elk onderdeel zijn eigen curve krijgt, stoppen de tokens met hun werk.
Toegankelijkheid hoort ook bij de tokens. Bepaal wat er gebeurt als de gebruiker verminderde beweging inschakelt, bijvoorbeeld kortere fades in plaats van grote bewegingen, zodat elk onderdeel hier op dezelfde manier mee omgaat.
Tokens worden meestal opgeslagen in JSON en omgezet in CSS-variabelen, Swift, Kotlin of JavaScript door een token-bouwtool. Onze gratis Motion Token Generator produceert een starterset die u kunt aanpassen.