Adobe XDをもっと使いこなすヒント！第14回レイヤーパネルの操作

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

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、レイヤーパネルの操作方法に関連する5つのツイートを取り上げます。

Tip 1. レイヤーパネルを表示する

#adobexd #protip Launch the layers panel from the lower left hand corner, or type Cmd+Y (Mac) or Ctrl+Y (Windows). @adobexd pic.twitter.com/LXv4aShUXv

— Elaine Chao (@elainecchao) September 3, 2018

レイヤーパネルを使うには、まずパネルを表示しましょう。画面左下のアイコンをクリックするか、ショートカットキー Cmd+Y (Mac) または Ctrl+Y (Windows) をタイプすると、レイヤーパネルを開いたり閉じたりできます。
レイヤーパネル内には、選択されているアートボードのレイヤーが表示されます

アートボードが選択されていない状態では、レイヤーではなく、アートボードの一覧が表示されます。
任意のアートボードをクリック操作で選択すると、ラベルの背景が青くハイライトされます。同時に、カンバス上では、対応するアートボードが青い線で囲まれて、どのアートボードが選らばれたかを確認できます。

Tip 2. アートボードを選択してレイヤーを表示する

#adobexd #protip Your selected artboard is highlighted in blue in the layers panel. Double click the artboard in the panel to zoom in and reveal its layers, and press the back button go back to an overview of all your screens. @adobexd pic.twitter.com/uebol4seoI

— Elaine Chao (@elainecchao) September 4, 2018

アートボード一覧が表示された状態で、任意のアートボード名をダブルクリックすると、そのアートボードを選択した状態になります。
レイヤーパネル内には、選択したアートボード内のレイヤー一覧が表示されます。同時に、カンバスでは対応するアートボードが拡大表示されます。

パネル最上部の戻るボタン「＜」をクリックする（またはEscキーを押す）と、パネルはアートボード一覧に戻り、同時にカンバスは全てのアートボードが表示された状態に戻ります。

このように、レイヤーパネルは、アートボードを確認する手段としても便利です。

Tip 3. パネル内のレイヤーを操作する

#adobexd #protip Layers in XD are contextual, which means that you’ll only see what’s on the same artboard as your selected object. @adobexd pic.twitter.com/YD7nmdKnhC

— Elaine Chao (@elainecchao) September 5, 2018

前述の通り、レイヤーパネル内に表示されるレイヤーは、選択されているアートボードのものだけです。カンバスで別のアートボードを選択すると、それに対応して、表示されるレイヤーも変わります。

パネル内のレイヤーを選択して、Cmd+L (Mac) または Ctrl+L (Windows) キーでロックとロック解除の切り替えができます。また、Cmd+; (Mac) または Ctrl+; (Windows) キーにより、表示と非表示を切り替えられます。
（レイヤー上にマウスオーバーして表示されるアイコンからも同じ操作が可能です）

Tip 4. レイヤーの重なり順を変える

#adobexd #protip As with other programs, you can quickly and precisely change your Z-order. Note that the little navigation circle in the layers panel will indent if you’re placing in a group. @adobexd pic.twitter.com/CN4IWADloW

— Elaine Chao (@elainecchao) September 6, 2018

レイヤーの順番は、オブジェクトの重なり順を表しています。ドラッグ操作でレイヤーの順番を入れ替えると、オブジェクトの上下関係を変更できます。

レイヤーをドロップできない位置にドラッグしている場合は、赤いアイコンが警告として表示されます。

Tip 5. レイヤー名を変更する

#adobexd #protip Jam through layer renaming with a simple Tab to bring you to the next layer to name. Don’t forget, you can go up the panel by pressing Shift+Tab. @adobexd pic.twitter.com/QvUIaqnwOu

— Elaine Chao (@elainecchao) September 7, 2018

レイヤー名をダブルクリックすると、レイヤー名を編集できる状態になります。フォーカスが別のオブジェクトに移動すると確定されます。

Tabキーを押すと、順に次の行に移動するため、次々に変更するときには便利です。Shift+Tabキーを押すと、カーソルは反対に上向きに移動します。

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

次回をお楽しみに！