Adobe XDをもっと使いこなすヒント！第41回デザインスペックで距離を調べる

Adobe XDをもっと使いこなすヒント！

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、デザインスペックで距離を確認する方法に関連する4つのツイートを紹介します。

Tip 1. オブジェクト間の距離を調べる

#AdobeXD #ProTip Quickly measure between two objects by selecting one, hovering over a second, and holding down Opt (Mac) or Alt (Win). @AdobeXD pic.twitter.com/po5POWUBDv

— Elaine Chao (@elainecchao) August 6, 2019

Adobe XDから、「デザインスペック」を共有すると、ブラウザーを使ってデザインの様々な情報を確認できます。例えば、2つのオブジェクト同士の距離を調べたい場合は、ひとつ目のオブジェクトを選択してからもうひとつのオブジェクトの上にカーソルを移動して、Opt (Mac) または Alt (Win) キーを押下します。

Tip 2. 重なって配置されているオブジェクト同士の距離を調べる

#AdobeXD #ProTip Measurements also work for overlapping objects – simply select one, hover over the second, and get the measurements when you hold down Opt (Mac) or Alt (Win). @AdobeXD pic.twitter.com/GELqiVHMGS

— Elaine Chao (@elainecchao) August 7, 2019

重なって配置されているオブジェクト同士の距離も同様の方法で確認できます。上の動画では、まずテキストエリアを選択してから、その下に配置されている背景画像の上にカーソルを移動して、Opt (Mac) / Alt (Win) キーを押下しています。

Tip 3. オブジェクトとアートボードの距離を調べる

#AdobeXD #ProTip If you want to see the measurements between an object and the artboard itself, select and then hover over the object, and hold down Opt (Mac) or Alt (Win). @AdobeXD pic.twitter.com/qUag6cccSb

— Elaine Chao (@elainecchao) August 8, 2019

オブジェクトとアートボードの相対位置を調べたい場合は、まずアートボードを選択して、それから目的のオブジェクトの上にカーソルを移動します。その状態で Opt (Mac) / Alt (Win) キーを押下すると、オブジェクトからアートボードの各辺までの距離が表示されます。

Tip 4. おまけ、CSSコードスニペットをコピーする

Feature sneak for upcoming @adobexd release. We’re enhancing design specs to enable developers to view and copy CSS code snippets for selected design elements. #ComingSoon #DesignToProduction #Designers #Developers pic.twitter.com/IB4WSNA4ka

— Andrew Shorten (@ashorten) August 6, 2019

8月の更新から、デザインスペックにCSSコードスニペットが表示されるようになりました。上の動画のように、オブジェクトを選択すると、オブジェクトのサイズやスタイルがCSSコードとして表示されます。そのまま必要な行だけ選んでコピーすることができます。

いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？