クリエイティブ

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

akihiro kamijo

12-19-2019

X X Logo LinkedIn LinkedIn Logo Facebook Facebook Logo Copy Copy to Clipboard

連載

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

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

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

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. pic.twitter.com/iJokw4UwZ7

— Elaine Chao (@elainecchao)

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

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

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

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

— Elaine Chao (@elainecchao)

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

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

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

— Elaine Chao (@elainecchao)

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

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

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

— Elaine Chao (@elainecchao)

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

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

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

— Elaine Chao (@elainecchao)

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

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

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. pic.twitter.com/qD9LAG9sd9

— Elaine Chao (@elainecchao)

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

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. pic.twitter.com/WuGHRU5xaT

— Elaine Chao (@elainecchao)

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

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

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

— Elaine Chao (@elainecchao)

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

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

次回をお楽しみに！

クリエイティブUI/UX & Web