【XD】作業効率が10倍になる要素間の余白表示方法とは?

XDで余白を表示させる方法

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • Adobe XDで要素と要素との余白(マージン)を測る方法が知りたい
  • XDで2つのオブジェクト同士の距離を調べたいけどやり方が分からない
  • XDの便利機能を使ってコーディングの効率を爆上げしたい

という方のお悩みを解決します!

optionキーとホバーで簡単測定!

結論。以下の手順で2つの要素間の余白を測ることができます!

 

  1. オブジェクトを選択して
  2. optionキー(windowsはAlt)を押しながら、
  3. 距離を測りたいオブジェクトにホバーする

 

実際に上記の手順で長方形と長方形の余白を測った時の動画がこちら!

まとめ

以上、Adobe XDで2つのオブジェクト間の距離をサクッと測る方法を紹介しました。

いかがだったでしょうか?かなり感動しませんでしたか?

 

少なくともぼくはこの方法を知った時、全身にビビット電撃が走ったかのような興奮を感じましたよ笑

だって、それを知るまで余白を測る時には、距離を測るようの長方形を作成してそれで測ってましたから。。。

なんと愚かで非効率なことをしていたのだろうと過去の自分を殴ってやりたくなりましたね笑

 

実際のWebサイト制作案件でデザインファイルをXDでいただくことってほとんどなくて使える頻度は少ないかも知れませんが知識として頭の片隅に留めておいていただければ幸いです!

*ほんと、デザインする人はみんなXDで使ってほしい!!笑

 

「Webサイト制作のコーディングでXDでよく使う便利なTipsをもっと知りたい!」

という方は以下の記事も目を通してみてくださいまし〜

XD クリッピングマスク(シェイプでマスク)の作成方法【XD】クリッピングマスク(シェイプでマスク)の作成方法

2 Comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です