Adobe XDをもっと使いこなすヒント! 第44回 オブジェクトに複数のインタラクションを指定する

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、ひとつのオブジェクトに複数のインタラクションを指定する方法についての7つのツイートを紹介します。

Tip 1. 同じアートボードへ複数トリガーを指定する

2019年11月のアップデートで、オブジェクトに複数のインタラクションを定義できるようになりました。既にワイヤーが接続されているオブジェクトを選択すると、青い+アイコンが表示されます。これをクリックするか、プロパティインスペクタの右上の+ボタンをクリックすると、新たにワイヤーが表示されます。

そのままワイヤーを遷移先にドラッグするか、プロパティインスペクタで遷移先を指定すると、インタラクションを追加することができます。例えば、同じターゲットに対して、タップとキー操作で遷移したいときに利用できます。

Tip 2. 同じアートボードへの複数の遷移からの選択

オブジェクトを選択した時に、同じアートボードへの遷移が複数定義されていると、ワイヤーの上に数字が表示されます。その際、プロパティインスペクタには、数字の数だけインタラクションが並んでいるはずです。その中から任意のインタラクションを選択して、プロパティを変更できます。

Tip 3. 複数のインタラクションからひとつを削除

複数のインタラクションが定義されているオブジェクトから、どれかひとつを削除したいときは、オブジェクトを選択した状態で、プロパティインスペクタから削除したいインタラクションを選択します。続けてDelキーを押下すると、選択したインタラクションを削除できます。

Tip 4. 異なるアートボードへのインタラクションを指定する

ひとつのオブジェクトから複数のアートボードへの遷移を指定することも可能です。単純に2つ目のインタラクションを追加する際、遷移先に別のアートボードを指定すればOKです。

Tip 5. インタラクションのトリガーを確認する

複数の遷移先が指定されている場合、オブジェクトを選択しただけでは定義済みのインタラクションがプロパティインスペクタに表示されません。インタラクションを確認するには、ワイヤーを直接クリックします。

ワイヤーの上にカーソルを移動すると、設定されているトリガーの種類がツールチップで表示されるので、それを確認してからクリックすると間違いを防ぐのに有効です。

Tip 6. インタラクションをコピーする

オブジェクト間でインタラクションをコピーすることが可能です。オブジェクトをコピーしてから、コピー先のオブジェクトで右クリックして「インタラクションをペースト」を選択します。複数のインタラクションが定義されていれば、全部まとめてコピーすることができます。ただし、遷移先がコピー先のアートボードに一致するインタラクションはコピーされません。

複数のオブジェクトにまとめてコピーすることもできます。複数のオブジェクトを選択したら、選択されているオブジェクト(どれでも構いません)の上で右クリックして「インタラクションをペースト」を選択すると、選択されているすべてのオブジェクトにインタラクションが追加されます。


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

次回をお楽しみに!

POSTED ON 2020.01.23