はじめてのプロトタイプ作成

プロトタイプを作成する前に、ProtoPieをダウンロードしましょう。

このページでは、デザインをインポートして、インタラクションを作成、プロトタイプをテストして共有する方法を説明しています。

ProtoPieのモデルは、Object+ Trigger+ Responseであり、どのようなインタラクションも簡単に作成できるようになります。

ProtoPieのダウンロードはこちらから。

1. デザインのインポート

Figma、Sketch、またはAdobe XDから、それぞれのProtoPieプラグインを使用してProtoPieにデザインをインポートします。

アートボードまたは一番上のフレームをシーンとしてインポートし、Figma、Sketch、Adobe XDと同じレイヤー階層、配置、制約を持つオブジェクトとしてインポートします。

デザインのインポートについて詳細はこちらをご参照ください。

より現実的なインタラクションを作成するには、ProtoPie独自の概念モデルを理解することが不可欠です。インタラクションに必要な要素を組み合わせて、最初のインタラクションを作成してみましょう。

次の製品モデルの動画をご覧ください。この概念モデルは、ProtoPieの土台でありオブジェクトの動きを基にしています。

要创建一个原型，就需要先创建其交互；而要创建其交互，则应先把涉及的对象、一个触发动作、一个或多个反应动作关联在一起。

オブジェクトのトリガーとレスポンスを組み合わせてインタラクションを作成します。トリガーは、１つもしくは複数のレスポンスを作り出します。レスポンスはトリガーによって変化することから、様々なパターンを作り出すことが可能なのです。

元素の周期表に触発されたProtoPieの概念モデルには、トリガーとレスポンスの2があります。各トリガーとレスポンスには、独自の機能とプロパティがあり、トリガーとレスポンスを組み合わせて、あらゆるインタラクションを作成できます。

上記の例では緑色の四角形をタップすると、右側に移動します。これはTapのトリガーにMoveのレスポンスを組み合わせた結果です。

より複雑な、高度なインタラクションも作成できます：

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

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

ProtoPie Studioを開いた時やプロトタイプの切り替え時に、デフォルトでプレビューウィンドウを非表示にしたい場合は、Preferencesでオフに切り替えてください。

ProtoPie PlayerはProtoPie Studioと連動しているアプリです。このアプリを使用して、iOS、iPadOS、Android環境でプロトタイプを簡単に確認することができます。

ProtoPie Playerの詳細については、こちらをご参照ください。