LOGzeudon

名古屋で働いているWebデザイナーのブログです

AdobeXDのレイアウトグリッドはShiftキーを押しながら微調整するのがオススメ

小ネタです。

⌘ shift ' で表示・非表示できるこのレイアウトグリッドですが、プロパティインスペクターで数値を普通にいじって調整しようとするとめちゃくちゃしんどいですよね。こんな感じ。

http://data.rokuzeudon.com/blog/img/xd-layout-grid-02.gif

段間隔、列の幅、余白…。ある値をいじると他の値も自動で勝手に変わってしまい、うまくいかないどころか、なんだかどんどん元の状態から遠ざかってしまう…。

そんな時は、Shiftキーを押しながら、上下キーでそれぞれの値を操作してみてください。

http://data.rokuzeudon.com/blog/img/xd-layout-grid-03.gif

グリッドの余白・幅をイメージ通り調整できるのではないでしょうか。

ちなみにBootstrapだと、1280pxのアートボードならこんな設定になります。

f:id:rokuzeudon:20200106221137j:plain

XDは、アートボードの幅に対してグリッドの左右(上下)に余白を付与する…という捉え方になっています。常に可変ならまだしも、グリッドの最大幅や位置が決まってる場合はちょっと扱いにくく感じますね 😅