XDのデザインカンプから必要な値を取得するためには?
1、各項目の数値の表示方法
カンプ内の画像やテキストをクリックすると右側に、各項目の数値が表示される。
ここから得られる数値は以下の通り。
- font-family (⓵)→ 游ゴシック体
- font-weight (⓵)→ Bold
- font-size (⓶)→ 24px
- line-height (⓶⓷)→ 1.7(41px ÷ 24px)
- letter-spacing (⓶⓸)→ 0px(24px × 0)*
-
color (⓹)→ #333333(⓹をクリックするとコピーできる)
+ **width (w)→ 182px
+ **height (H) → 24px
*letter-spacingについて
⓸の値が文字間隔(トラッキング)をさす。
今回は⓸の値が0でしたが、そうじゃない場合にどうしたらletter-spacingを計算できるのかをメモ。
(例)⓶のFont-sizeが16px、⓸のAVが75の場合
トラッキング数値 ÷ 1000で出た数値に**'em'**をつける。
つまり75÷1,000=0.075em となる。
この数値をそのまま使うか、pxに直す場合は16px × 0.75=1.2px とする。
2、余白の測り方
余白を測りたい対象を選択した状態で、Altキーを押しながら他の対象の上にマウスを移動すれば、画面上に余白の値が表示される。