アートボードにグリッド(ガイド)を表示する

Adobe XDでグリッドの表示する方法です。

ショートカットキー

⌘ + ‘もしくは、⌘ +Shift+ ‘

基本的な使い方

1.アートボードを選択

アセット（Photoshopで言うところのレイヤー）を選択してもそのアセットを書き出すことが出来ます。
アートボードを書き出す場合は以下のいずれかの方法でアートボードを選択します。

• レイヤーパネルでアートボードを選択
• Commandを押しながらアートボードをクリック
• アートボードをダブルクリック

アートボードを選択すると右側のプロパティの一番下に「グリッド マス目」が表示されます。

2.プロパティで「グリッド マス目を」チェック

グリッドが表示されます。
アートボードを選択している状態であれば「⌘ +Shift+ ‘」でも表示されます。

オプション

グリッドの間隔を変更する

チェックボックスの横にある「数字」を編集すると、グリッドの間隔をpxで指定できます。初期値は8です。

グリッド線の色を変更する

チェックボックスの横にカラーピッカーのアイコンがあるので、選択するとピッカーが立ち上がります。スケール、HEX、カラーパレットから色を選択できます。

補足

スマホカンプに使いやすいグリッド幅

スマホカンプやアプリデザインでiphone6（width: 375px）をする場合、15px、25px、75px幅位がキリが良く使いやすいです。

複数のアートボードのグリッドを一括で操作する

複数のアートボードも複数選択でグリッドの表示・非表示や間隔を変更できます。