Adobe XDをもっと使いこなすヒント！第37回プロトタイプモードのプロパティインスペクタ

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

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、プロトタイプモードでも利用可能になったプロパティインスペクタの使い方に関する4つのツイートを紹介します。

Tip 1. プロトタイプモードでプロパティインスペクタを使う

#adobexd #protip Use the property inspector in prototype mode to make adjustments to your interactions. @AdobeXD pic.twitter.com/yJCseafhSR

— Elaine Chao (@elainecchao) July 16, 2019

プロトタイプモードの画面では、プロパティインスペクタを使ってインタラクションの種類や属性を指定できます。アートボードまたはオブジェクトを選択すると、プロパティインスペクタが有効化され、各種オプションを指定できるようになります。

ただし、インタラクションが未設定のアートボードまたはオブジェクトについては、選択してもプロパティインスペクタがアクティブになりません。その際は、アンカーをクリックするか、アンカーをドラッグして遷移先のアートボードを指定すると、プロパティインスペクタを利用できるようになります。

Tip 2. 複数のプロパティをまとめて変更する

#adobexd #protip Changes to the interaction and animation properties can be made on one (or more) wires at the same time now that there’s a property inspector in prototoype mode. @AdobeXD pic.twitter.com/Uxbf6GUHa0

— Elaine Chao (@elainecchao) July 18, 2019

複数のワイヤーを選択してプロパティインスペクタを使用すると、まとめて属性を変更することが可能です。複数のワイヤーを選択するには、Shiftキーを押しながらトリガーの指定されている側のアンカーをクリックします。アンカーの色がブルーになれば選択されています。もう一度クリックすると、表示がグレーに変わり選択は解除されます。

ワイヤーが設定されていないアンカーを複数選択の対象に含めることはできません。

Tip 3. スクロール位置を保持する設定を行う

#adobexd #protip If you’ve wondered where preserve scroll position went – it moved to prototype mode! It’s now available in the property inspector when you create transitions. @AdobeXD pic.twitter.com/iRQNA6m5V4

— Elaine Chao (@elainecchao) July 17, 2019

トランジションの際に、アートボード間でスクロール位置を保持することを指定するチェックボックスが、プロトタイプモードのプロパティインスペクタ内に配置されています。

以前は、デザインモードのプロパティインスペクタ内にありました。トランジションに関する属性指定のため、プロトタイプモードへのプロパティインスペクタ追加の際に行われた仕様変更です。

Tip 4. キー入力を使ったインタラクションを設定する

#AdobeXD #protip In addition to simple tap, you can now create interactions using keyboard triggers. Simply select your artboard, select keyboard and gamepad transition, and quickly set up a key trigger. @AdobeXD pic.twitter.com/bqFr3OiqVp

— Elaine Chao (@elainecchao) July 19, 2019

プロパティインスペクタでは、キー入力を使ったインタラクションも設定できます。トリガーから「キーとゲームパッド」を選択して、その下に表示される「キー」フィールドに、トリガーとして使いたいキーを指定します。トリガーには、Enterキーや、Ctrl+Cのような組み合わせも指定できます。

音声トリガーも同様の手順で設定することができます。

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