Adobe XDのガイドの引き方

Adobe XDでのデザイン制作を行う際にまず行うのはガイドを引く作業です。
デザインルールで決めたサイズを参考にしながら今回紹介する方法でこまめにガイドを引きましょう。

Adobe XDのガイドの引き方

縦方向のガイドの引き方

縦方向(垂直方向)にガイドを引く場合は、アートボードの上部の境目にオンマウスし、
画像のようなカーソル表示になってからアートボードの内側にドラッグします。
ドラッグした時の大きさはピンクの数字が目安になります。

あらかじめデザインルールで決めた余白サイズをピンクの数字と照らし合わせながら、
ブロックごとの境目や見出しの上下、見出しと本文の間などに引いていきましょう。

横方向のガイドの引き方

横方向(水平方向)にガイドを引く場合は、アートボードの左部の境目にオンマウスし、
画像のようなカーソル表示になってからアートボードの内側にドラッグします。
なお、この時の反対側の数字はアートボードの残りの横幅です。

さらに右側や中央にもガイドを引きます。