デザイン システムでは、色、間隔、タイポグラフィーにすでにトークンが使用されています。モーション トークンは、同じ考え方をアニメーションに適用します。これらは、「小さな要素は素早く動き、穏やかに落ち着く」などの決定を、すべてのデザイナーと開発者が使用する名前付きの値に変換します。
一般的なセットには、持続時間 (短、中、長)、イージング カーブ (標準、開始、終了) が含まれ、さらに剛性、減衰、質量によって定義されるスプリングも含まれます。スプリングは自然な感触があり、コード内の中断をうまく処理できるため、人気があります。
ネーミングは重要です。 motion.enter や motion.emphasis など、目的に基づいた名前は、生の数値よりも正しく適用するのが簡単です。セットを小さくしてください。すべてのコンポーネントが独自の曲線を取得すると、トークンはその仕事を停止します。
アクセシビリティもトークンに含まれます。ユーザーがモーションの軽減をオンにした場合に何が起こるかを定義します。たとえば、大きな動きではなく短いフェードを使用するなど、すべてのコンポーネントが同じ方法で処理します。
トークンは通常 JSON に保存され、トークン構築ツールによって CSS 変数、Swift、Kotlin、または JavaScript に変換されます。当社の無料のモーション トークン ジェネレーターは、適応可能なスターター セットを生成します。