初めの頃に戸惑った（今でも戸惑うことはある）デザインカンプの読み取り方をまとめてみました。
WETCHでは社内デザインをする際にXDを使用しているので、今回はXDで作成されたデザインカンプを例にして見ていきたいと思います！
１. 基本的な設定
XDは見た目がシンプルで直感的に操作ができるため、ほとんどの設定を画面右側のパネル（プロパティインスペクターと呼ぶらしいです）から読み取ることができます。
図形など
テキスト
画像が荒めで申し訳ないです。。
初めの頃よく分からなかった、letter-spacingとline-heightの出し方はこちら。
letter-spacing：0.02em (AVの値 / 1000。上記の例だと「20/1000 = 0.02」)
line-height：1.5 (行間 / font-size。上記の例だと「24/16 = 1.5」)
今でも見落としてデザイナーさん、ディレクターさんに突っ込まれることがあります。。。
２. 全体の把握
画面左側（アセットパネル）ではデザインの全体的な確認ができます。
例えば、アセットに登録されているカラーをcssで変数として設定しておく、コンポーネントとして登録されているパーツは共通パーツとしてコーディングしていく、など気に留めておくと、コーディング設計をする際に役に立つ気がします。
また、各アセットを右クリックして「カンバスでハイライト」を選択すると、実際にどこで使われているかが一目で分かるので、個人的には全体的なデザインを把握するのに活用しています。
３. マージンなど余白の読み取り
対象を選択し、Altキーを押しながら距離を測りたい別対象をホバーすると、その間の距離を表示してくれます。
なかなか上手くいかない時や、距離が測りにくい時は、図形を作成しても良いかと思います。
マージンの大きさごとに色を変更し、自分でアセットに登録しておくと、共通マージンが設定されている部分が視覚的に分かりやすく良いかもしれません。。。
４. 画像の書き出し
対象を選択し、[command] + E で書き出せます。
まとめて書き出したいときは [command] + [control] + E で「書き出しアセット」にぽいぽいと追加し、後でまとめて書き出しができます。
書き出しアセットに追加されているオブジェクトは、レイヤーパネル上で下記のアイコンが色付きになります。
svgを書き出す時には。
svgで書き出したいときは図形をパス化するのを忘れないようにしましょう！
「オブジェクト」→「パス」→「パスに変換」で、パス化することができます。
図形がどのような状態かはレイヤーパネルで確認できます。
ピクセルパーフェクトのためには、デザインカンプの正確な読み取りが欠かせないのですが、まだまだ慣れずです。
マージンとか測った側から忘れてしまうので。。。
自分にあった効率の良いデザインカンプの読み取り、コーディング方法を見つけていきたいと思います！
