https://uxpincommunity.cdn.prismic.io/uxpincommunity/wEvL8Vzp3Va4lu_C_Wire_interface.mp4

Wire を起動すると、ワークスペースは主に 2 つの領域に分かれています。左側が「Forge」パネル、中央と右側が作業領域です。

上部のトップバーには、以下の要素が含まれています：

1. Forge パネルの表示/非表示切り替えボタン（左上） – Forge パネルを表示または非表示にします
2. バリアントと履歴のコントロール – 保存されたバリアントを切り替えたり、編集履歴を閲覧したりできます
3. Playground / コードエディタ タブ切り替えボタン – トップバーの中央にあります
4. 表示設定、共有、公開 – 右側にあります

Forge パネルでは、プロンプトの入力、Forge とのチャット履歴へのアクセス、選択した要素へのピンポイント編集を行うことができます。トグルを使用していつでも非表示にすることで、作業領域のスペースを広く確保できます。

プレイグラウンド

「Playground」は、アプリのライブプレビュー機能です。ここで直接操作を行ったり、フローを順にクリックして進めたり、フォームに入力したり、ナビゲーションをテストしたり、ロジックや状態が期待通りに動作しているかを確認したりすることができます。

1. プレビューバー： Playgroundの上部には、ブラウザのようなバーが表示され、現在のルートやパス（例：/#menu）が表示されます。ここからプレビューを更新することもできます。
2. レスポンシブプレビュー： 側面のハンドルをドラッグしてプレビューのサイズを変更するか、特定の幅と高さの値を入力して、さまざまな画面サイズをテストできます。
3. 選択と編集： 「Select & Edit」ボタンを使用するか、「Cmd」+「E」キーを押して、Playground内で特定の要素を直接選択します。選択後は、テキストをインラインで編集するか、Forgeパネルを使用してその要素のみを変更することができます。

「Forge in Wire」

https://uxpincommunity.cdn.prismic.io/uxpincommunity/KwzrE355VGIbl5_y_Wire_13.mp4

Forgeは、左側の「Playground」から利用できます。ビルド全体にわたる広範囲な変更や、選択した単一の要素に対するピンポイントな更新に使用できます。

WireのForgeでは、次のような操作が可能です：