Adobe XDをもっと使いこなすヒント！第1回レイアウトグリッドの見た目を調整

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

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、レイアウトグリッドの見た目を調整する方法をテーマに、4つのツイートを取り上げます。

Tip 1. アートボード上にグリッドを表示する

#adobexd #protip Turn out layout grids by selecting the artboard and clicking the checkbox in the property inspector. You can also use the shortcut Shift+Cmd+’ (Mac) or Shift+Ctrl+’ (Win). @adobexd pic.twitter.com/Xm0QMOsj91

— Elaine Chao (@elainecchao) June 11, 2018

グリッドを表示したいアートボードを選択しましょう。そして、プロパティインスペクタの「グリッド」欄のチェックボックスをクリックします。
すると上の動画のようにレイアウトグリッドが表示されます。代わりにショートカットキーを利用して、表示を切り替えることもできます。（Mac: Shift+Cmd+’）

方眼グリッドに切り替えたいときは、チェックボックスの横のプルダウンから選択します。ショートカットキー（Mac: Cmd+’、Win: Ctrl+’）は、現時点では日本語キーボードでは動作しません。

Tip 2. レイアウトグリッドのアウトライン表示

#adobexd #protip If you prefer outline mode over block mode for layout grids, switch your opacity to 0. @adobexd pic.twitter.com/cpGXfphl8A

— Elaine Chao (@elainecchao) June 15, 2018

レイアウトグリッドのカラムを塗りつぶしではなく、アウトライン表示にしたいときは、上のビデオのように、グリッドの透明度を0にしましょう。
これで、グリッドの各列が、枠線だけ表示されるようになります。

同様に、グリッドの色も簡単に変更できます。カラーパレットを開いたら好みの色を選んでみましょう。

#adobexd #protip You can change grid colors easily directly from the property inspector. @adobexd pic.twitter.com/oTiq3cyG6l

— Elaine Chao (@elainecchao) June 13, 2018

Tip 3. カラム数、配置の変更

#adobexd #protip Quickly adjust the number of columns in your layout grid by editing the number in the property inspector. The column width automatically adjusts to accommodate. @adobexd pic.twitter.com/vDVcc7zDtR

— Elaine Chao (@elainecchao) June 18, 2018

カラム数の変更は、プロパティインスペクタ内の「縦列」の数値を変更するだけです。カラムの幅は自動的に調整され、ぴったりとピクセル上に重なるよう等間隔に配置されます。

列幅、ガター、左右のマージンも同様にプロパティインスペクタを使って変更できます。値を変更すると、カラム数の変更の場合と同じ様に、自動的に他の値が調整されます。

Tip 4. グリッドへの吸着のオン／オフ

#adobexd #protip Turn off grid snapping by holding down Cmd (Mac) or Ctrl (Win) while dragging your object. @adobexd pic.twitter.com/iwZFh53x1e

— Elaine Chao (@elainecchao) June 14, 2018

これは見た目とは関係ありませんが、知っていると便利な使い方です。

オブジェクトをドラッグする際、グリッドへ吸着する／しないをコントロールできます。デフォルトではオブジェクトをドラッグするとグリッドに吸着しますが、ドラッグ中にショートカットキー（Mac: Cmd、Win: Ctrl）を押した状態にすると、自由に位置を選択できます。

上のビデオでは、グリッド吸着がオンのときとオフのとき、それぞれの動作の違いを確認できます。

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