Adobe XDをもっと使いこなすヒント! 第43回 コンポーネントにステートを追加する

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、コンポーネントのステート機能を扱う方法に関連する8つのツイートを紹介します。

Tip 1. 新しいステートを追加する

ステートはコンポーネントの異なる状態を表現することができる機能です。例えば、ボタンコンポーネントにステートを1つ追加して、追加したステートには非アクティブの状態をデザインするといった使い方ができます。

ステートを追加するには、コンポーネントを選択してから、プロパティインスペクタの「初期設定のステート」の右に表示される「+」アイコンをクリックします。表示されるプルダウンから「新規ステート」を選択すると新しいステートが追加されます。ステート名は分かりやすい名前に変更しましょう。

Tip 2. ステートの見た目をカスタマイズする

コンポーネントの各ステートは独立しており、個別にカスタマイズすることが可能です。プロパティインスペクタで編集したいステートを選択したら、スタイルの変更や要素の追加/削除などを自由に行いましょう。

上の動画では、追加したスタイルにチェック済みであることを示すアイコンが追加されています。このようにオリジナルのステートのデザイン要素を再利用しつつ差分を表現できるため、重複作業を減らすことができます。

アートボート上に配置されたコンポーネント(のインスタンス)には、どのステートを表示するのかを指定できます。上の動画では、マスターコンポーネントの下にインスタンスをコピーして配置し、インスタンス側は、新しく追加されたステートが表示されるよう変更しています。

Tip 3. ステートにインタラクションを設定する

スタイルと同様に、インタラクションもステートごとに設定することが可能です。プロトタイプモードに切り替えて、編集したいコンポーネントを指定してから、プロパティインスペクタ内の一覧から目的のステートを選択します。

上の動画では、2つのステートを使ってトグルボタンの2つの状態を作成し、タップ操作でステートが切り替わるよう指定しています。このように、指定するトリガーの種類によっては、遷移先に他のアートボードだけでなく他のステートも選ぶことができます。

ステートからステートへと順番に移動するように遷移を指定することもできます。

Tip 4. ホバーステートを追加する

ホバーステートはマウスオーバーの状態を扱うためのステートです。簡単に追加できるように、プルダウンから選択して追加できるようになっていて、「+」アイコンをクリックしたら「ホバーステート」を選択するだけでインタラクションも自動的に追加されます。上の動画では、マウスオーバーでツールチップが表示されるコンポーネントを作成しています。

後からステートにホバー時の振る舞いを追加することも可能です。その場合は、プロトタイプモードでインタラクションを追加する際、トリガーに「ホバー」を選択して、遷移先のステートを指定します。

Tip 5. 不要なステートを削除する

ステートを削除する場合は、プロパティインスペクタ内の削除したいステートの上で右クリックします。「削除」ボタンが表示されたらクリックすると、そのステートが削除されます。この操作はデザインモードとプロトタイプモードの両方で行えます。


いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

POSTED ON 2019.12.19