UI デザインに 1 つのファイル: 単一の開いたファイルがハンドオフをどのように置き換えるか
1 つのファイルの UI デザイン ワークフローでは、レイアウト、状態、モーション、ロジック、データ バインディングが 1 つの開いたファイルに保持されます。何が変わり、何が解決しないのか、そして ExodeUI がそれをどのように使用するのか。
核心
1 ファイルの UI デザイン ワークフローでは、コンポーネントのレイアウト、インタラクション状態、モーション、ロジック、データ バインディングを、デザイン ファイル、プロトタイプ、コードベースに分散させるのではなく、開いている 1 つのファイルに保持します。ファイルは、デザイナーが編集し、開発者がレビューし、AI エージェントが読み取ることができるものになります。 ExodeUI はこのモデルを使用します。.exode ファイルはコンポーネントを記述し、ランタイム パッケージはそれをアプリ内で再生します。
UI デザインにおける「1 つのファイル」とは何を意味しますか?
これは、コンポーネントに 1 つの信頼できるソースがあることを意味します。アートボード、ホバー状態と押された状態、スプリング値、次にどの状態になるかを決定する条件、アプリが設定できる入力はすべて同じドキュメント内に存在します。別の引き継ぎメモには重要なことは何も残されません。ファイルが変更されると、コンポーネントも変更されます。
1 つのファイルでハンドオフの問題が解消される
一般的なハンドオフでは、デザイナーは静的ファイルとプロトタイプ、およびモーションの書面による説明を渡します。開発者がそのモーションをコードで再構築すると、2 つのバージョンがすぐにドリフトします。 1 つのファイルのワークフローでは、ファイルがカバーする部分の再構築手順が削除されます。レビューの必要性がなくなるわけではありませんが、レビュー担当者には、2 つの説明の代わりに同じ成果物が提供されます。
開いている UI デザイン ファイルに含まれるもの
正確な構造はツールによって異なりますが、同じジョブをカバーする便利なファイルがあります。
- ブレークポイントとコンポーネントのリフロー方法を含むレイアウト
- アイドル、ホバー、押下、読み込み、成功、エラーなどのインタラクション状態
- タイムライン、バネの物理学、状態間の遷移を含むモーション
- どの状態がアクティブであるかを決定するロジックと条件
- 入力とイベントにより、アプリケーション コードがコンポーネントを駆動し、コンポーネントに反応できるようになります。
- 実行時にアプリから取得される値のデータ バインディング
ファイルの外に残るもの
コンポーネント ファイルはアプリケーション全体ではありません。ルーティング、認証、データの取得、権限、分析、対話型コントロールのアクセシビリティ ラッパーはコードベース内に残ります。プラットフォームのナビゲーションとシステム ジェスチャも通常はプラットフォーム固有のままです。その境界を明確にすることが重要です。1 ファイルのワークフローは、対話型コンポーネントを処理し、アプリケーションの問題をアプリケーションに任せる場合に採用しやすくなります。
チームは 1 つのファイルをレビューできますか?
はい、形式がオープンで読み取り可能な場合は可能です。 ExodeUI は、開いている .exode JSON ファイルにコンポーネントを保存するため、変更内容を比較、レビューし、バージョン管理に保存できます。これは、バイナリ設計ファイルに比べて実際的な利点です。レビュー担当者はファイル内で何が変更されたかを確認でき、AI コーディング ツールは独自のデコーダなしでファイルを読み取ることができます。オープン性はガバナンスのすべての疑問に答えられるわけではありませんが、レビューは可能になります。
ExodeUI が 1 つのファイルを使用する方法
ExodeUI では、.exode ファイルはレイアウト、ブレークポイント、タイムライン、ステート マシン、スプリング物理学、ロジック、入力、およびデータ バインディングを保持できます。ランタイム パッケージは、React、Vue、Svelte、Angular、Solid、React Native、SwiftUI、Flutter でファイルを再生します。コードは、モーションを再記述する代わりに、入力を渡し、イベントを受け取ります。同じファイルをブラウザまたはデスクトップ エディタで開くことができ、AI コーディング ツールは MCP サーバーを通じて編集できます。
1 つのファイルの選択が間違っている場合
1 つのファイルは、インタラクティブなコンポーネントではない作業、たとえば、長い形式のビデオ、重い 3D シーン、初期のアイデア作成のための自由形式のホワイトボードなどには適していません。また、チームにレビュー プロセスがなく、標準を独自に適用するために 1 つのファイルが必要な場合にも適していません。この形式により、優れた実践が容易になります。実践に代わることはできません。
実装コード例
import { ExodeUICanvas } from 'exodeui';
// One component, one file. Layout, states, motion and logic stay in the
// .exode file; the app only supplies inputs and handles events.
export function CheckoutButton({ loading, disabled, onComplete }) {
return (
<ExodeUICanvas
src="/checkout_button.exode"
inputs={{ loading, disabled }}
onTrigger={(name) => name === 'complete' && onComplete()}
/>
);
}覚えておきたい原則
- 1 ファイルのワークフローにより、レイアウト、状態、モーション、ロジック、入力が 1 つの信頼できるドキュメントに保持されます。
- インタラクティブコンポーネントの再構築ステップが削除されますが、レビューは必要ありません。
- ルーティング、認証、データ取得などのアプリケーションの問題はコードベース内に残ります
- 開いている JSON ソース ファイルは、AI ツールで比較、バージョン管理、読み取りが可能です
- ExodeUI は、Web、モバイル、デスクトップ フレームワーク上のランタイムを通じて同じ .exode ファイルを再生します