これら 2 つの用語はさまざまな質問に答えます。 Smart Animate は「何が変わるの?」に答えます。 2 つのフレームを調べ、名前が一致するレイヤーを見つけて、それらの位置、サイズ、回転、不透明度、その他のプロパティを一方のフレームからもう一方のフレームにアニメーション化します。
イジングは「時間の経過とともにどのように変化するか?」と答えます。 Figma を使用すると、イーズアウト、カスタム 3 次ベジェ曲線、またはスプリングなどの標準曲線を選択できます。スプリングのイージングは、固定された持続時間ではなく、物理的な設定、剛性、減衰、質量によって定義されるため、実際のオブジェクトと同じようにモーションが高速化し、安定します。
実際の違いはコードに現れます。製品では、要素の現在の位置と速度からスプリングを開始できます。ユーザーがトランジションを中断したり、シートをフリックしたりすると、モーションはジャンプせずに自然に継続します。プロトタイプのトランジションは毎回同じように再生されます。これは意図を示すには問題ありませんが、実際の入力下でモーションがどのように動作するかを示しません。
したがって、Figma プロトタイプは良い参考になりますが、開発者は依然としてコードでモーションを再構築します。値の一貫性を保つために、多くのチームはスプリング設定をモーション トークンとして保存します。無料の Figma アニメーション to Spring コンバーターは、Figma イージングをコードで使用できるスプリング設定に変換します。
インタラクティブ バージョンを参照ではなく成果物にしたい場合は、ランタイムを備えたツールが必要です。私たちが作成した ExodeUI は、アプリ内で実行される 1 つのファイルに状態、スプリング、イベントを保存します。