インターフェース

ProtoPieは、WebブラウザのようなタブUIを備えており、1つのウィンドウから別のファイルに簡単に移動したり、複数のファイルを同時に処理することができます。

ProtoPieを実行すると、ダッシュボードが表示されます。ダッシュボードでは、さまざまなサンプルファイルや教材を確認することができます。

プロトタイプを開くと、新しいタブが作成されます。中央には、シーンごとにデザインできるようにキャンバスがあり、左右にレイヤーパネル、ツールバー、インタラクションパネルなどで構成されています。

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

ダッシュボード

ダッシュボードページでは、直近で作業したファイルを一目で確認することができます。また、基本的なインタラクションの作成方法についてのチュートリアルを見ることも可能です。

学習素材

ProtoPieは初めてですか？ あらゆるユースケース向けに用意したさまざまな例をご覧ください。 また、特定の機能についての説明が記載されたワークショップやドキュメントを見つけることができます。

サポート

デザインツールに関するサポートが必要ですか？ブログでProtoPieのニュースをチェックしたり、新しい機能の追加をリクエストしたり、あるいはユーザコミュニティに参加することもできます。コミュニティは、世界各国のユーザーとProtoPieに関してコミュニケーションができる空間です。

Prototyping

1. レイヤーパネル

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

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

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

2. シーンパネル

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

3. キャンバス

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

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

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

4. プロパティパネル

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

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

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

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

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

6. タイムライン

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

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

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

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

8. ツールバー

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

• レイヤーの追加
• プロトタイプのデバイスを変更する
• プレビューウィンドウを使用する
• ProtoPie Playerに接続する
• ProtoPie クラウドページにてプロトタイプを共有する

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

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

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

10. 可変パネル

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

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