Adobe XDをもっと使いこなすヒント！ 第44回 オブジェクトに複数のインタラクションを指定する
Adobe XDをもっと使いこなすヒント！
この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、ひとつのオブジェクトに複数のインタラクションを指定する方法についての7つのツイートを紹介します。
Tip 1. 同じアートボードへ複数トリガーを指定する
#AdobeXD #ProTip New in our November release – multiple interactions! If a wire has already been created from an object, click on the plus button on the wire or the plus button on the Property Inspector to create a second wire on the same object. @AdobeXD pic.twitter.com/Gjl5LRu94J
— Elaine Chao (@elainecchao) November 26, 2019
2019年11月のアップデートで、オブジェクトに複数のインタラクションを定義できるようになりました。既にワイヤーが接続されているオブジェクトを選択すると、青い**＋アイコンが表示されます。これをクリックするか、プロパティインスペクタの右上の＋ボタン**をクリックすると、新たにワイヤーが表示されます。
そのままワイヤーを遷移先にドラッグするか、プロパティインスペクタで遷移先を指定すると、インタラクションを追加することができます。例えば、同じターゲットに対して、タップとキー操作で遷移したいときに利用できます。
Tip 2. 同じアートボードへの複数の遷移からの選択
#AdobeXD #ProTip If you have two interactions to the same artboard, a number will appear on the wire indicating how many interactions are there. You can then select between them in the Property Inspector to refine any properties. @AdobeXD pic.twitter.com/s4YAoZcRCE
— Elaine Chao (@elainecchao) November 27, 2019
オブジェクトを選択した時に、同じアートボードへの遷移が複数定義されていると、ワイヤーの上に数字が表示されます。その際、プロパティインスペクタには、数字の数だけインタラクションが並んでいるはずです。その中から任意のインタラクションを選択して、プロパティを変更できます。
Tip 3. 複数のインタラクションからひとつを削除
#AdobeXD #ProTip If you want to delete an interaction from a wire that has two on the same object, you can select it in the Property Inspector and press Delete. @AdobeXD pic.twitter.com/cZA38hMwnZ
— Elaine Chao (@elainecchao) November 28, 2019
複数のインタラクションが定義されているオブジェクトから、どれかひとつを削除したいときは、オブジェクトを選択した状態で、プロパティインスペクタから削除したいインタラクションを選択します。続けてDelキーを押下すると、選択したインタラクションを削除できます。
Tip 4. 異なるアートボードへのインタラクションを指定する
#AdobeXD #ProTip You can also set multiple interactions on the same object to different artboards by clicking on the + button on the wire or in the Property Inspector. @AdobeXD pic.twitter.com/PuhMnS2tzL
— Elaine Chao (@elainecchao) November 29, 2019
ひとつのオブジェクトから複数のアートボードへの遷移を指定することも可能です。単純に2つ目のインタラクションを追加する際、遷移先に別のアートボードを指定すればOKです。
Tip 5. インタラクションのトリガーを確認する
#AdobeXD #ProTip If you have two different targets for different interactions on the same objects, you can hover over the wire to figure out which one it is, then click on it to adjust individual properties in the Property Inspector. @AdobeXD pic.twitter.com/StBNIcK7h1
— Elaine Chao (@elainecchao) December 2, 2019
複数の遷移先が指定されている場合、オブジェクトを選択しただけでは定義済みのインタラクションがプロパティインスペクタに表示されません。インタラクションを確認するには、ワイヤーを直接クリックします。
ワイヤーの上にカーソルを移動すると、設定されているトリガーの種類がツールチップで表示されるので、それを確認してからクリックすると間違いを防ぐのに有効です。
Tip 6. インタラクションをコピーする
#AdobeXD #ProTip You can copy interactions between objects by using Paste Interaction. Select the object, copy it, and then select a destination object and Paste Interaction. @AdobeXD pic.twitter.com/pOQRkSLO5k
— Elaine Chao (@elainecchao) December 4, 2019
オブジェクト間でインタラクションをコピーすることが可能です。オブジェクトをコピーしてから、コピー先のオブジェクトで右クリックして「インタラクションをペースト」を選択します。複数のインタラクションが定義されていれば、全部まとめてコピーすることができます。ただし、遷移先がコピー先のアートボードに一致するインタラクションはコピーされません。
#AdobeXD #ProTip Paste Interaction also works on multiple objects, so copy your interaction, then Shift+select a number of objects to paste the interaction to all of them. @AdobeXD pic.twitter.com/kKeUYNKvFB
— Elaine Chao (@elainecchao) December 5, 2019
複数のオブジェクトにまとめてコピーすることもできます。複数のオブジェクトを選択したら、選択されているオブジェクト（どれでも構いません）の上で右クリックして「インタラクションをペースト」を選択すると、選択されているすべてのオブジェクトにインタラクションが追加されます。
いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？
次回をお楽しみに！