多くの企業は、デザインプロセスを高速化し、作業全体の一貫性を確保するためにデザインシステムを使用しています。Sketch のような従来の UI デザインツールでデザインシステムを使う際の欠点は、ライブラリが静的であることです。ライブラリのコンポーネントは、常に 1 つの状態しか表示できません。チームとインタラクションライブラリを作成して共有することで、デザインシステムをまったく別のレベルへ引き上げることができます。ProtoPie では完全にインタラクティブなコンポーネントを作成できることは、すでにご存じかもしれません。インタラクションライブラリを作成することで、動的なコンポーネントをチーム全体と共有し、各自の Pie で再利用してもらえます。
必要なもの
1 つ以上のコンポーネントを作成した Pie が必要です。自分で作成することもできますし、このガイドに沿って進めるには、次のサンプル Pie を使用してください。
ライブラリを他のチームメンバーと共有する予定がある場合は、Team または Enterprise プランに登録している必要があります。Individual プランの加入者は、個人用ライブラリしか作成できません。
学習内容
このチュートリアルが終わるころには、次の操作ができるようになります:
新しいインタラクションライブラリを作成し、コンポーネントを公開する
ライブラリをチームと共有する
Component Guide でライブラリのコンポーネントをドキュメント化する
ライブラリに追加のコンポーネントを追加して公開する
完了時間: ≤30 分
ステップ 1: コンポーネントの入った Pie を開く
上のサンプル Pie を開きます。中には 2 つのローカルコンポーネントがあります。Button コンポーネントと Switch コンポーネントです。
これらのコンポーネントには、インタラクティブにするためのロジックが組み込まれています。たとえば、Switch コンポーネントをダブルクリックしてみてください。そこには、Switch コンポーネントを機能的かつ柔軟にするためのさまざまなトリガーとレスポンスが組み込まれています。
ステップ 2: 新しいインタラクションライブラリを作成する
ローカルコンポーネントの下には、さらに 3 つのグループが表示されます:
チームライブラリ: これらは、チームと共有するインタラクションライブラリです。Team および Enterprise プランの加入者が利用できます。
個人ライブラリ: これらは、個人での使用だけを目的としたインタラクションライブラリです。他の人は見ることができません。チームと共有できない点を除けば、Team ライブラリと同じように動作します。
パブリックライブラリ: これらは ProtoPie Studio に含まれている組み込みライブラリです。これについては後ほど詳しく説明します。
このチュートリアルでは Team Library を使います。Team Libraries グループの横にある +** **アイコンをクリックして、新しい Team Library を作成してください。
ライブラリに名前と説明を付け、共有するチームメンバーを選択できます。終わったら 作成 をクリックします。
新しく作成したライブラリが編集モードで新しいタブに開きます。シーン上部に青いバーで ライブラリ編集モード。 と表示されていれば、ライブラリを編集中だとわかります。
ステップ 3: 最初のコンポーネントを追加する
1 つ目のタブをクリックして、サンプル Pie ファイルに戻ります。コンポーネントパネルで Switch のメインコンポーネントをクリックし、右クリックして コピー を選択します。次に、ライブラリのタブをクリックして、コンポーネントを貼り付けます。
Switch コンポーネントがライブラリに表示されるはずです。ダブルクリックすると、すべてのトリガーとレスポンスも一緒に引き継がれていることがわかります。
ステップ 4: Component Guide でコンポーネントをドキュメント化する
ライブラリに、他の人と共有する予定のコンポーネントを追加したら、その使い方を相手が理解できるようにしておくことが大切です。このステップは完全に任意で、コンポーネントが単純な場合はやりすぎかもしれません。しかし、複雑なインタラクションでは、Component Guide は他の人がコンポーネントを使い始めるのを助ける優れた方法です。
**ライブラリ編集モード **画面のまま、Switch コンポーネントをダブルクリックして編集します。右端に **コンポーネントガイド。 ** と表示された項目があるので、その横の鉛筆アイコンをクリックします。
表示されたウィンドウで、コンポーネントの動作を説明できます。まず概要説明を記入します。上書き可能な変数が次に一覧表示されるので、その使い方を説明できます。
コンポーネントがメッセージを受け取れる場合は、** Message In **セクションで各メッセージの動作を説明できます。
同様に、コンポーネントがメッセージを送信する場合は、Message Out セクションに記載できます。
ステップ 5: ライブラリを公開する
ライブラリへの変更は、公開するまで他の人には表示されません。まだ公開する準備ができていない場合は、変更を保存することもできます。ただし、これらの変更はクラウドに保存されます。インタラクションライブラリはそこに存在するためです。
ステージ上部の青いバーで **公開** ボタンをクリックします。まだ変更を保存していない場合は、先に保存する必要があります。
これで、新しく公開した変更内容を説明できます。
詳細を入力してから、公開をクリックします。
画面下部に、変更が正常に公開されたことを示す確認メッセージが表示されるはずです。これでチームメンバー全員が更新内容を確認できます。編集はここで終了してかまいません。ファイル → 閉じる。 を選択します。
新しいライブラリを使う
ライブラリを公開したので、使い方を見てみましょう。新しい Pie を作成します。まだ開いていない場合は、コンポーネントアイコンをクリックしてコンポーネントパネルを開きます。
新しいライブラリは チームライブラリ。 の下に表示されるはずです。ライブラリ作成時に共有先として指定したチームメンバーは、自動的にアクセスできるようになります。
ライブラリをクリックすると、含まれているすべてのコンポーネントが表示されます。
ローカルコンポーネントと同じように Pie にドラッグできます。Switch コンポーネントをシーンへドラッグしてください。
Component Guide を覚えていますか？ここから確認できます。右端のインスペクターパネルを見てください。Component というラベルの横に、2 本の線が入った白いボックスのようなアイコンがあります。それをクリックします。
ここで、上の **ステップ 4 ** で追加したドキュメントがすべて表示されます。
ライブラリにさらにコンポーネントを追加する
ライブラリに追加のコンポーネントを追加するには、上と同じ手順をそのまま実行できます。ただしまず、ライブラリを再び編集用に開く方法を知っておく必要があります。元の Pie のタブ、つまり Button と Switch のローカル版がある方をクリックします。
Button コンポーネントをライブラリに追加しましょう。前と同じように Button コンポーネントを右クリックし、コピー を選択します。
次に チームライブラリ グループを展開して、作成した新しいライブラリを表示します。ライブラリにマウスを重ねると、三点リーダーのアイコンが表示されます。それをクリックして ライブラリを編集 を選択します。ライブラリは再び **編集モード。** で開きます。
先ほどと同じように、コンポーネントを貼り付けます。必要なら Component Guide を編集してください。
ライブラリからコンポーネントを削除することもできます。新しいライブラリが作成されると、ProtoPie は既定で空の Component 1 をライブラリに追加します。削除したい場合は、右クリックして **削除。** を選択します。
ライブラリ内で直接コンポーネントを作成することも常に可能です。Pie ファイルからコピーしてくる必要はありません。ライブラリ名の横にある ** + ** アイコンをクリックして新しい空のコンポーネントを作成し、ダブルクリックして編集してみましょう。
最後に、変更を公開します。
パブリックライブラリ
ProtoPie には、すぐに使える組み込みライブラリがいくつか用意されています。これらはコンポーネントパネルの **パブリックライブラリ** グループの下に表示されます。Team Library とまったく同じように使用できます。ライブラリからコンポーネントをそのままシーンにドラッグするだけです。
*Material Design 用のライブラリと iOS UI キットもあります。*
自分のコンポーネントライブラリと同様に、Component Guide を参照して詳しい使い方を確認できます。
Pie と同じくらい簡単！
これで、自分だけのインタラクションライブラリを作成し、チームと共有する準備が整いました。おめでとうございます！
リソース
条件を使ってトグルボタンを作る方法: ProtoPie で条件がどのように機能し、トグルボタンなどを作成できるかを学びましょう。
コンポーネントと Send & Receive を使ってチェックボックスフォームの項目を確認する: このレッスンでは、チェックボックスコンポーネントを効果的に使って、プロトタイプ内の項目をチェック／チェック解除する方法を学びます。
コンポーネントを使ってテレビのコントローラーを作る: このチュートリアルでは、キーボード（左右矢印キー）で操作できるテレビコントローラーの作成方法を学べます。
コンポーネントを使ってより速いワークフローでドロップダウンメニューを試作する: ProtoPie は、繰り返し作業を減らすコンポーネントを使って、ドロップダウンメニューをより高速に作成できるよう支援します。ProtoPie は送受信機能も使って、入力間で情報をシームレスに共有します。楽しんでください！
