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

Adobe XDをもっと使いこなすヒント！

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

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

#AdobeXD #ProTip New in the latest release: component states! Create a new state in the property inspector by selecting a component and clicking on the plus sign. @AdobeXD pic.twitter.com/iJokw4UwZ7

— Elaine Chao (@elainecchao) November 7, 2019

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

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

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

#AdobeXD #ProTip Since they’re independent, components can now be a container for all of your UI element variations, which eliminates duplication in your assets panel. @AdobeXD pic.twitter.com/h6RLpfOuCo

— Elaine Chao (@elainecchao) November 11, 2019

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

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

#AdobeXD #ProTip Your states can be independent, which means that you can use different states on different instances of a component. @AdobeXD pic.twitter.com/o5MNdPKOHW

— Elaine Chao (@elainecchao) November 8, 2019

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

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

#AdobeXD #ProTip Easily add interactions between your states by double clicking into your component, then selecting another state as the target. @AdobeXD pic.twitter.com/SU9Zm5r5JU

— Elaine Chao (@elainecchao) November 12, 2019

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

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

#AdobeXD #ProTip You can link between multiple states in a component, not just two. @AdobeXD pic.twitter.com/NowQ8Z2e1b

— Elaine Chao (@elainecchao) November 22, 2019

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

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

#AdobeXD #ProTip If you’ve forgotten something in a state, you can still copy and paste it in – just double click into the component with the destination state selected, then paste it into the component. @AdobeXD pic.twitter.com/qD9LAG9sd9

— Elaine Chao (@elainecchao) November 14, 2019

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

#AdobeXD #ProTip Once placed, the states of a component are in relative position to the displayed start state. This means that hover states can go in any direction. @AdobeXD pic.twitter.com/WuGHRU5xaT

— Elaine Chao (@elainecchao) November 13, 2019

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

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

#AdobeXD #ProTip Need a quick hover state? Create your first hover directly from the property inspector instead of wiring after the fact. @AdobeXD pic.twitter.com/xh6i2vRwAk

— Elaine Chao (@elainecchao) November 15, 2019

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

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

次回をお楽しみに！