モーションシステムとは何ですか? UI チームのための実践ガイド
モーション システムは、製品の動きを決定する共有ルール、トークン、コンポーネントです。 1 つに何が属するか、それを管理する方法、および ExodeUI がどこに収まるか。
核心
モーション システムは、製品の動きを決定するルール、トークン、コンポーネント、コードの共有セットです。継続時間、イージング、スプリング、振り付け、インタラクションの状態をカバーしているため、チームは承認されたモーションを画面ごとに再構築するのではなく、再利用できます。モーション システムは、設計上の問題であると同時に管理上の問題でもあります。所有者、信頼できる情報源、生産への道筋が必要です。
モーションシステムとは何ですか?
モーション システムは、動きを記述するデザイン システムの一部です。これは、メニューが開く速度、ボタンが押されたときの反応、ユーザーがトランジションを中断したときに何が起こるか、どのスプリング値がどのサーフェスに属するかなど、静的コンポーネント ライブラリではできない質問に答えます。出力はスタイル ガイド ページではありません。出力は、デザイナーや開発者が毎回新しいアニメーションを作成することなく適用できる、再利用可能な決定の小さなセットです。
モーションシステムに属するもの
便利なモーション システムは 5 つの部分から構成されます。 1 つスキップすると、システムは誰も使用しないファイルのフォルダーになります。
Principle
製品の個性を説明する短いルール。たとえば、最初のフレームでモーションが入力を確認したり、大きなサーフェスは小さなサーフェスよりも動きにくくなります。
トークン
motion.enter.fast や motion.spring.snappy など、デュレーション、イージング、スプリングの名前付き値。トークンによりモーションがレビュー可能になり、値の一貫性が保たれます。
パターン
一般的なジョブの再利用可能な動作: 入力、終了、展開、並べ替え、ドラッグ、閉じる、成功、エラー。
コンポーネント
すでにパターンを使用しているライブビルディングブロックなので、チームはドキュメントを読んで再構築する代わりに、パターンをドロップすることができます。
ガバナンス
誰がシステムを変更できるか、変更がどのようにレビューされるか、非推奨のモーションがどのように廃止されるか。
モーション システム vs デザイン システム vs モーション トークン
デザイン システムには、色、タイプ、間隔、コンポーネント、使用ルールが含まれます。モーション システムはその内部の動きのレイヤーであり、動きは色とは異なる理由で変化するため、多くの場合、独自の所有者が存在します。モーション トークンはそのレイヤーの最小単位であり、タイミングと物理の名前付き値です。トークン ライブラリは必要ですが、十分ではありません。パターンやライブコンポーネントがなければ、トークンはデザイナーが画面ごとに異なる解釈をする数値のリストになります。
モーションシステムが失敗する理由
ほとんどのモーション システムは、美的理由ではなく、操作上の理由で失敗します。トークンは、コンポーネントから切り離されたドキュメント内に存在します。承認されたモーションはプロトタイプにのみ存在し、開発者は実行できません。あるチームはこのシステムを採用し、別のチームはハードコードされた期間を出荷し続けます。このシステムには所有者がいないため、漂流します。これを修正するということは、設計ファイル、コンポーネント ライブラリ、コード レビューなど、すでに作業が行われている場所にシステムを配置することを意味します。
モーションシステムを管理する方法
小規模な所有サーフェスから始めて、システムを簡単なパスにします。
- トークンの信頼できる情報源を 1 つ選択し、設計ファイルとコードベースからそれにリンクします。
- 値ではなく意図によってトークンに名前を付ける: motion.exit.fast は motion.200ms よりも便利です
- さらにトークンを追加する前に、パターンの小さなセットを出荷します
- コードの変更などのモーションの変更を前後の記録で確認します
- 再利用の追跡: カスタム タイミングの代わりに承認されたパターンを使用する新しいコンポーネントの数
- システムが重複を蓄積しないように、スケジュールに従って古い値を破棄します。
ExodeUI が適合する場所
ExodeUI は、モーションを別の仕様ではなく、開いている .exode ファイル内に保持します。レイアウト、状態、タイムライン、スプリング物理学、ロジック、入力が共存し、ランタイム パッケージは React、Vue、Svelte、Angular、Solid、React Native、SwiftUI、Flutter でファイルを再生します。これにより、モーション システムに動作するリファレンスが提供されます。設計者は承認されたコンポーネントを開き、開発者は同じファイルを検査し、AI コーディング ツールは MCP サーバーを通じてそれを編集できます。このファイルはガバナンスに代わるものではありません。それはガバナンスに何か具体的な指示を与えるだけです。
1 回のスプリントでモーション システムを開始する方法
最もよく使用される 10 個のコンポーネントを監査し、それらのすべての持続時間、カーブ、スプリングをリストします。同じジョブを実行する値をグループ化し、グループに名前を付けます。ほとんどのインタラクションをカバーする 5 つのパターンを選択します。パターンごとに 1 つの参照コンポーネントを構築し、それをいつ使用するかを文書化して、デザイン ライブラリとコード ライブラリにトークンを追加します。次に、新しいシステムで 1 つの機能を実行し、まだ必要なカスタム値の数を測定します。その数値が次のスプリントのベースラインになります。
実装コード例
import { ExodeUICanvas } from 'exodeui';
// The motion system lives in the .exode file. Your app supplies inputs
// and listens for events; it does not restate spring values in code.
export function SystemButton({ pressed, onConfirm }) {
return (
<ExodeUICanvas
src="/system_button.exode"
inputs={{ pressed }}
onTrigger={(name) => name === 'confirm' && onConfirm()}
/>
);
}覚えておきたい原則
- モーション システムはデザイン システムの動作レイヤーであり、プロトタイプ ビデオのフォルダーではありません。
- 原則、トークン、パターン、ライブコンポーネント、ガバナンスが必要です
- 使用ルールのないトークンは、チームごとに異なる解釈をする数字になる
- モーションの変更はコードの変更と同様にレビューする必要があります
- ExodeUI は、ランタイムが再生できる 1 つの開いたファイルにモーション、状態、ロジックを保持します