北九州市小倉南区で Web プログラミング パソコン教室ならささのは

北九州市小倉南区守恒本町2-6-6 GROWTH SI 守恒509号室
モノレール守恒駅から徒歩3分

XDの便利機能②-オブジェクトとの距離・余白を確認する

XD

他のオブジェクトの距離

Webデザインカンプを見ながらCSSのコーディングをする際、「オブジェクト間の余白はどのくらい空いているのだろう?」と測りながらコーディングしていませんか?


私はIllustratorやPhotoshopのデザインカンプに余白などの数値をあらかじめ調べてから、CSSをコーディングすることもしばしばあります。

ですが、XDを使ったデザインカンプの場合、オブジェクト間の余白を簡単に調べることができます。
この機能を使えば、あらかじめ余白をすべて洗い出す、といった工程を経ずに、CSSをコーディングしながら余白を調べても、ストレスに感じずに作業ができそうです!!

実際に調べてみよう

例えば、以下の二つの四角。
このオブジェクトの間は、何ピクセル空ければいいのでしょう?

ぱっと見るだけでは、何ピクセル空いているのかわかりません。
もちろん、Y座標を見て計算してもよいのですが、面倒です。

この場合は、どちらかのオブジェクトをあらかじめ選択します。
今回はピンク色のオブジェクトを選択しておきます。

そして、キーボードのAltキーを押しましょう。
すると、アートボードからの距離が表示されます。

これだけでも便利なのですが、Altキーを押したままカーソルを青のオブジェクトにあわせます。
すると、カーソルを合わせたオブジェクトの距離が表示されます。

簡単な操作なのに、とっても便利だと思います。
デザインを行うときはもちろん、コーディングの際もぜひ利用してみてくださいね。