デザインシステムのコンポーネントに複数のステートを追加して、インタラクティブコンテンツを簡単に開発する方法を説明します。

ユーザーの操作によって外観が変化するコンポーネントは、忠実度の高いプロトタイプを作成するうえで非常に役立ちます。

コンポーネントを作成し、複数のバリエーション(ステート)を追加した後、それらを接続することで、実際のユーザービヘイビアーを模倣できます(コンポーネントを複数回コピーする必要はありません)。 

またコンポーネントにステートを定義すると、アセットの管理とインタラクティブデザインシステムの作成も容易になります。 

component-states

ステートを持つコンポーネントの一般的な例には、ボタン、チェックボックス、アニメーショントグルボタンがあります。これらのコンポーネントは、ユーザーがコンポーネントをタップまたはホバーして操作するときに変化する必要があります。

コンポーネントのステートの追加

コンポーネントの作成を完了すると、プロパティインスペクターに、初期設定のステートのコンポーネントを一覧表示する新しいセクションが作成されます。ここでは、新規ステートホバーステートの 2 種類のステートをコンポーネントに追加できます。以下では、ステートの追加方法について説明します。

新規ステート

「新規ステート」は、コンポーネントのバリエーション(コンポーネントの無効バージョンやクリックされたバージョンなど)が表示されるシナリオに使用します。

プロパティインスペクターでマスターコンポーネントの初期設定のステートの横にある「+」ボタンをクリックし、「新規ステート」を選択します。

新規ステート」には、事前に定義されたインタラクティブ機能はありません。プロトタイプモードでインタラクションを接続する必要があります。詳しくは、コンポーネントへのインタラクティブ機能の追加を参照してください。

ホバーステート

「ホバーステート」は、ユーザーがカーソルを合わせたときにコンポーネントが変化し、異なるステートが表示されるようにコンポーネントを作成する場合に使用します。 

プロパティインスペクターでマスターコンポーネントの初期設定のステートの横にある「+」ボタンをクリックし、「ホバーステート」を選択します。

ホバーステートを使用する場合、プロトタイプモードに移動してインタラクションを接続する必要はありません。この処理は自動的に行われます。

コンポーネントにステートを追加する
コンポーネントにステートを追加する

ステートは、マスターコンポーネントにのみ追加できます。コンポーネントインスタンスは、常にマスターコンポーネントからステートを継承します。

様々なステートのコンポーネントの確認

コンポーネントのステートを作成した後、コンポーネントのプロパティを編集し、コンポーネントを操作するユーザーに対して、コンポーネントがどのように表示されるかを目で確認できます。 

  1. コンポーネントを選択します。
  2. プロパティインスペクターに移動し、複数のステートを切り替えます。
プロパティインスペクターでステートを切り替える
プロパティインスペクターでステートを切り替える

コンポーネントへのインタラクティブ機能の追加

プロトタイプモードでは、コンポーネントのステート間にホバーとタップのインタラクションを接続できます。コンポーネントステートにインタラクションを接続する手順は、アートボード間にインタラクションを追加する手順に似ています。主な違いは、コンポーネントステートのインタラクションの接続では、接続先にアートボードではなくステートを選択する点です。

1. コンポーネントを選択して、プロトタイプモードに切り替えます。

プロパティインスペクターのコンポーネントセクションに、作成したすべてのステートが表示されます。

2. プロパティインスペクターで、コンポーネントの「 > 」アイコンまたはインタラクションセクションの「+」をクリックします。

3. インタラクションを追加するステートを選択します。 

4.トリガーとして「タップ」(クリックイベントの場合)または「ホバー」(マウスオーバーアクションの場合)を選択します。

5.アクションタイプ(自動アニメーショントランジションなど)を選択します。

6.接続先のステートを選択します。 

7.プレビューウィンドウに切り替え、コンポーネントのインタラクティブ機能をテストします。

インタラクティブ機能を追加する
コンポーネントのステートを接続してタップ時のインタラクションを作成する

ドロップダウンで、ステートはアートボードの上に仕切りで区切られて一覧表示されます。

同じコンポーネントのステートに対して複数のインタラクションを定義できます。例えば、ホバー状態とタップ状態の両方を持つトグルスイッチがある場合、ステップ 4〜7 を 2 回繰り返してタップ状態とホバー状態を定義することで、両方のインタラクションを定義できます。複数のインタラクションを作成すると、インタラクションセクションに定義されたインタラクションが表示されます。表示されているインタラクションを切り替え、要件に合うようにインタラクションのプロパティを変更します。

1 つのコンポーネント内の複数のインタラクション
1 つのコンポーネント内の複数のインタラクション

コンポーネントステートの編集

マスターコンポーネントのステートに対してインタラクションを定義すると、そのコンポーネントのすべてのインスタンスがそれらのインタラクションを自動的に継承します。つまり、コンポーネントを特定のアートボードまたは状態に接続すると、そのコンポーネントのすべてのインスタンスにもそれらのインタラクションが含まれます。 

カンバス上でインスタンスが選択されているときに、既存のステートを編集するか、マスターコンポーネントに新しいステートを追加する場合、次のいずれかのオプションを使用しておこなうことができます。

オプション 1

コンポーネントインスタンスを右クリックし、「マスターコンポーネントを編集」を選択します。

ScreenRecorderProject47

オプション 2

「編集」をクリックしてマスターコンポーネントに選択を切り替え、ステートを追加または編集します。

「編集」をクリックしてマスターコンポーネントに選択を切り替え、ステートを追加または編集する

コンポーネントインスタンスがマスターコンポーネントにリンクされます。マスターコンポーネントに加えた変更が、そのインスタンスに反映されます。詳しくは、単一ソースの複数コンポーネントの管理を参照してください。

コンポーネントステートの名前の変更と削除

コンポーネントステートの名前の変更:プロパティインスペクターでコンポーネントステート名をダブルクリックし、新しい名前を入力します。

マスターコンポーネントからのコンポーネントステートの削除:コンポーネントステートを右クリックし、「削除」を選択します。マスターコンポーネントからコンポーネントステートを削除すると、カンバス上でそのステートがアクティブになっているコンポーネントインスタンスが初期設定のステートに戻ります。

名前の変更または削除ができるのは、マスターコンポーネントのステートのみです。初期設定のステートの名前を変更することはできません。

単一ソースの複数コンポーネントの管理

コンポーネントステートの管理を簡素化するために、マスターコンポーネントについてのみ、ステートの追加、名前変更、削除ができます。コンポーネントのインスタンスには、マスターコンポーネントでおこなわれたステートの変更が自動的に継承されます。マスターコンポーネントは、カンバス上の緑色に塗りつぶされた菱形またはプロパティインスペクターのコンポーネントセクションで簡単に識別できます。インスタンスは緑色に縁どられた菱形で示されます。 

コンポーネントステートの継承

マスターコンポーネントおよびインスタンスの両方でステートを編集する際には、次の原則に従います。

  • コンポーネントインスタンスをオーバーライドする場合と同様に、ステートのプロパティ(テキスト、ビットマップ、サイズ、外観、構造の変更)をオーバーライドできます。 
  • マスターコンポーネントのステートを編集すると、そのステートはすべてのインスタンスで更新されます。
  • インスタンスのステートを編集すると、その変更内容は対象インスタンスのみのオーバーライドとして扱われ、マスターステートでそのプロパティが変更されても同期しなくなります。

オーバーライドの結果に満足できない場合は、インスタンスを右クリックして「マスターコンポーネントにリセット」を選択することで、いつでも元のマスターコンポーネントに戻すことができます。この操作で、インスタンス上のすべてのオーバーライドがクリアされ、マスターコンポーネントにリセットされます。

ステートのオーバーライドをリセットして元のマスターコンポーネントに戻す
ステートのオーバーライドをリセットして元のマスターコンポーネントに戻す

コンポーネントでのオーバーライドの動作について詳しくは、XD でのコンポーネントの操作を参照してください。

ドキュメント間でリンクされたコンポーネントステート

単一のソースを作成して維持し、それを再利用して作成できるコンポーネントでそのステートと定義済みのインタラクションを併せて使用できます。例えば、ボタンコンポーネントに 5 つのステート(プライマリ、セカンダリ、ホバー、タップ、無効)が定義されている場合、そのコンポーネントをコピーして別のドキュメントに貼り付けると、定義されたコンポーネントステートとステートのインタラクションをすべて維持したリンクコンポーネントが XD によって作成されます。 

ソースドキュメントでリンクされたコンポーネントのプロパティ(スタイル、インタラクションなど)を変更すると、そのリンクされたコンポーネントのインスタンスを持つドキュメントに対し、それらの更新が XD によって通知されます。そこから、変更を確認するか、その変更を受け入れるか無視するかを選択できます。 

リンクされたコンポーネントは、ステート間で定義されたインタラクションのみをサポートします。アートボード間のインタラクションはサポートされません。

例とサンプルファイル

ユーザーのタップでオン/オフを切り替えるトグルスイッチを作成してみましょう。

サンプルアセットを使用してアニメーショントグルボタンを作成する
サンプルアセットを使用してアニメーショントグルボタンを作成する
  1. トグルボタンのサンプルファイルをダウンロードして、XD で開きます。
  2. オブジェクト全体を選択し(円が選択されていることを確認してください)、command + K(macOS)または Ctrl + K(Win)を押します。
  3. 新しいステートを追加し、「無効」という名前を付けます。
  4. 「無効」ステートで、「角丸長方形」を選択し、塗りつぶしを灰色に変更します。円を選択して左に移動します。
  5. プロトタイプモードで、次のインタラクションを接続します。
    • 初期設定のステート:「トリガー」を「タップ」に、「アクション」を「自動アニメーション」に、「移動先」を「無効」に設定します。
    • 無効ステート:「トリガー」を「タップ」に、「アクション」を「自動アニメーション」に、「移動先」を「標準ステート」に設定します。
  6. (オプション):マウスを合わせたときにトグルボタンを光らせる場合は、コンポーネントを選択して、「ホバーステート」を追加し、コンポーネントを編集してグロー効果を持たせます。

詳細情報

ステートを持つコンポーネントを使用してインタラクティブ機能を作成する方法について詳しくは、このビデオをご覧ください。 

視聴時間:7 分


ご質問または共有するアイデアがある場合

ご質問または共有するアイデアがある場合は、Adobe XD コミュニティフォーラムにぜひご参加ください。皆様からのご意見や作品をお待ちしております。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー