Language日本語
柱06・デザインシステム
Motion Tokens: デザイン システムの完全なアーキテクチャ
製品エコシステム全体でモーションを標準化します。数十の開発者リポジトリにわたって任意の 300 ミリ秒の 3 次ベジエをハードコーディングするのをやめます。
What is Motion Tokens: in ExodeUI?
モーション トークンは、ばねの剛性、減衰比、質量、イージング カーブ、継続時間などのアニメーション パラメータを機械可読形式で定義する標準化された設計トークンです。無料の Motion Token Generator は、CSS および JSON 用にエクスポートできるスターター セットを作成し、トークン ビルド ツールはそれらを各プラットフォームのコードに変換します。
コアアーキテクチャ
エンジニアとデザイナーが ExodeUI を選ぶ理由
Design, logic and motion in one file that runs inside your app.
春の物理トークン
任意のタイミング数値ではなく、物理的なトークン (剛性、減衰、質量) を使用してモーションを定義します。
自動コード生成
既存のトークン ビルド パイプラインを使用して、トークンを CSS 変数とプラットフォーム コードに変換します。
意味階層
モーション トークンをグローバル、セマンティック、およびコンポーネント レベルに編成します (motion.spring.snappy、motion.フィードバック.success など)。
設計ツールの同期
Figma 変数と運用 Git コードベース間でモーション トークンをシームレスに同期します。
客観的な評価
ExodeUI との比較 Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- 物理的なスプリング トークンと速度カーブのファースト クラスの完全なサポート
- ネイティブ モバイル (SwiftUI/Compose) と Web 形式に同時にエクスポート
- ビジュアルインスペクターにより、デザイナーはトークンの物理をリアルタイムで感じることができます
- 優先モーションの自動アクセシビリティ フォールバック
Traditional Design Tokens (Color/Type Only)
- ほとんどのトークン ツールは、静的な色、タイポグラフィ、および間隔のみをサポートします。
- モーションは「300msイーズインアウト」のような大まかな継続時間の文字列に縮小されます。
- コードに移す前にトークンのダイナミクスをテストする視覚的な方法がない
- エンジニアはモーションスペックをフレームワークコードに手動で解釈する必要がある
開発への引き継ぎ
コードでの使い方
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
import { ExodeUICanvas } から 'exodeui';
// スプリング、ステート、タイミングは .exode ファイル内に存在します (
// エディター）。コードは入力を渡し、イベントを受信します。
エクスポート関数 SnappyButton() {
戻る (
<ExodeUIキャンバス
src="/snappy_button.bexode"
onTrigger={(名前) => console.log('ExodeUI イベント:', 名前)}
/>
);
}設計システムが動作中に失敗する理由
現代のデザイン システムは、完璧なカラー パレット、タイポグラフィ スケール、立面影、および間隔グリッドを備えています。しかし、動きは忘れ去られたデザインの象徴のままです。ほとんどの組織では、モーションのドキュメントは、「アニメーションはきびきびしている必要がある」や静的な 250 ミリ秒の継続時間変数などのあいまいなガイドラインで構成されています。
- 一貫性のないブランド感: あるエンジニアはイーズアウトを使用し、別のエンジニアはイーズインアウトを使用し、モバイルでは Apple のデフォルトを使用します。
- 脆いデュレーション カーブ: 時間指定されたアニメーションは、小さな要素では遅く感じられ、大きな下部シートでは速く感じられます。
- アクセシビリティの無視: チームは、すべてのコンポーネントにわたって一貫したモーション削減オーバーライドを実装できません。
3 層のモーション トークン階層
ExodeUI は、3 つの構造化された層にわたるモーション トークンをモデル化します。
階層 1: グローバル プリミティブ トークン
生の数学定数 (例: 剛性-400、減衰-25、質量-1)。
階層 2: セマンティック インテント トークン
インテントに関連付けられた機能名 (motion.interactive.snappy、motion.modal.enter など)。
層 3: コンポーネント固有のトークン
特定のコンポーネントにバインドされたオーバーライド (button.toggle.switch など)。
Topic Cluster Network
関連する概念とツール
ご質問はありますか
よくある質問
本物の動きで、生きたコンポーネントを作る。
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.