連載  /  

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

BY 公開

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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


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

次回をお楽しみに!

  TAGS

  AUTHOR

akihiro kamijo

アドビのコンサルティングチームでリードアーキテクトとして主にUIデザインプロジェクトに関わる。現在は独立してデザイン/開発に関連のマーケティング企画や情報発信、プロジェクト支援を行っている。