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

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

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

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

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

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

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

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

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

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