エディターより

UXPinエディタからWireを開くには、いくつかの方法があります:

単一のコンポーネントから

UXPinのキャンバス上で、Mergeベースのコンポーネント(カード、フォーム、モーダル、プロダクトタイルなど)を選択します。右側の「プロパティ」パネルに「New Wire」アプリボタンが表示されます。このボタンをクリックすると、そのコンポーネントがWireで開きます。

Wireは、Mergeライブラリのコードコンポーネントに対応しています。独自のライブラリを接続していない場合は、Shadcn、MUI、AntD、Bootstrapといった組み込みのオプションのいずれかを使用できます。UXPin独自の要素はサポートされていません。

image.png

複数の画面から

既存の複数の画面を1つのフローにまとめたい場合は、まずキャンバス上で何も選択されていないことを確認してください。その後、プロパティパネルの「New Wire app」をクリックします。Wireは、キャンバス上のすべての画面を1つのコンテナにまとめ、そこでForgeを使用してそれらを相互に接続することができます。

image.png

Forgeから

エディタでForgeを使用してUIを生成すると、生成結果をWireで開くかどうかを尋ねるプロンプトが表示されます。これは、生成された画面をすぐに接続したり、Forgeが生成したばかりの画面にロジックを追加したりしたい場合に便利です。

image.png

Wire にアクセスしたら、Forge を使ってロジックを追加し、画面を接続し、ユーザー体験を磨き上げます。Playground で実際に動作を確認しながらテストを行い、Forge またはコードエディタで直接編集を行います。

Wireダッシュボードより

image.png

「Wireダッシュボード」には、アプリのメインダッシュボードにある「Wire」タブからアクセスできます。このダッシュボードでは、アカウント内のすべてのビルドを一か所にまとめて表示します。

ダッシュボードから新しいアプリを作成するには:

  1. 左上の「New Build」をクリックします。
  2. 作成したいアプリの内容を説明します。