インターフェース

ProtoPieは、すでにご利用されている他のデザインツールと似たようなインターフェイスの作りにしています。

ProtoPie Studioの中心には、シーンごとにデザインを配置するキャンバスがあり、 キャンバスの周りにはレイヤーパネル、ツールバー、およびインタラクションパネルが配置されています。

すでにProtoPieのインターフェースには慣れてらっしゃいますか?次は、プロトタイプ作成をしてみましょう!詳しくはこちらから。

[object Object]

1. レイヤーパネル

レイヤーパネルで、シーンごとに階層的に作成されたすべてのレイヤーを見ることができます。 シーンがどのような仕組みになっているか学んでみましょう。こちらにアクセスしてください。

他のデザインツールと同じように、レイヤーパネルでレイヤーの並べ替え、名前の変更、ロックとロック解除、非表示と表示が可能です。

Figma、Sketch、またはAdobe XDからデザインをインポートすると、レイヤーパネルに同じ階層のレイヤーが表示されます。あなたのデザインをインポートする方法についてはこちらをご参照ください。

2. シーンパネル

シーンパネルはデフォルトでは表示されません。 シーンパネルにアクセスするには、ウィンドウの左側にあるシーンパネルアイコンをクリックします。 プロトタイプ内のすべてのシーンの表示、並べ替え、シーンパネルからシーンを開くことができます。シーンについて詳しくはこちらをご覧ください。

3. キャンバス

キャンバスで、シーンとそのシーンのレイヤーを表示します。 キャンバスには、一度に1つのシーンしか表示されません。

キャンバスへのさまざまなレイヤーの挿入は、いくつか方法があります。 デザインツールからインポートする、作成する、または手動で追加できます。レイヤーについて詳しくはこちらをご覧ください。

キャンバスをパンするには、スペースバーを押したままクリックしてドラッグします。

4. プロパティパネル

プロパティパネルで、選択した内容に応じて、シーン、レイヤー、トリガー、またはレスポンスのプロパティと設定を表示します。 複数のレイヤーを選択すると、それらに共通しているプロパティが一度に表示されます。

5. インタラクションパネル

インタラクションパネルでインタラクションを作成します。 トリガーを追加することから始めて、1つまたは複数のレスポンスと組み合わせましょう。

インタラクションパネルには、シーン内のすべてのインタラクションがリストとして表示されます。 レイヤーパネルとは異なり、インタラクションパネルには階層がありません。

インタラクションの作成方法についてはこちらをご参照ください

6. タイムライン

応答の継続時間、遅延、および繰り返しの表示がされます。 プロパティパネルでプロパティを変更すると、タイムラインにこれらのプロパティが反映されます。

7. プレビューウィンドウ

プレビューウィンドウでプロトタイプを実行します。 プレビューウィンドウを使用して、実際のインタラクションを確認できます。 インタラクションが機能しない場合、または途中でミスをした場合は、プレビューウィンドウに表示されます。

デフォルト設定にて、レイヤーまたはインタラクションに変更を加えると、プレビューウィンドウが自動的に更新されるようになっています。

8. ツールバー

ツールバーを使用すると、ProtoPieで頻繁に使用するアクションに簡単にアクセスできます。

9. コンポーネントパネル

シーンパネルと同様に、コンポーネントパネルはデフォルトでは表示されません。 コンポーネントパネルにアクセスするには、ウィンドウの左側にあるコンポーネントパネルアイコンをクリックします。 ローカルコンポーネントとインタラクションライブラリの概要を表示します。

コンポーネントについてはこちら、インタラクションライブラリの詳細についてはこちらをご覧ください。

10. 可変パネル

シーンおよびコンポーネントパネルと同様に、可変パネルはデフォルトでは表示されません。 可変パネルにアクセスするには、可変をクリックします。 プロトタイプ全体または開いているシーン全体で使用される変数の概要を表示します。(可変?変数?UIの表示を確認!)

変数について詳しくはこちらをご覧ください。

Back To Top