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

Creative Cloud UI/UX & Web

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

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

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

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

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

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

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

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

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


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

次回をお楽しみに!

POSTED ON 2019.10.24