コーディングはクライアントの制作会社などからデザインカンプを貰い、そこから、
- 画像の書き出し
- 要素の長さ・余白を取得
- カラーコードを取得
- アニメーションなどの指示を確認
- テキストをコピー
という感じで各種数値などを取得してコーディングしていく。
画像を書き出す
コーディングを始める前に画像を書き出す必要がある。
まずは書き出したい画像を選択ツール（左上の矢印）を選択した状態でクリックし『ファイル → 書き出し→ 選択したオブジェクト』をクリックする。
（※画像が選択された状態でMacなら⌘＋E、WindowsならCtrl＋Eを押してもダイアログが表示される）
上から順に以下のようになる。
- 画像名
- 保存先
- フォーマット
- 書き出しサイズ
フォーマットに関しては『PNG、JPG、SVG、PDF』の中から選択する。
使い分けとしては以下のような感じになる。
- PNG → 透過された画像（角が丸いなど）
- JPG → 正方形や長方形など、角が丸くない画像
- SVG → ロゴやアイコンなど（拡大縮小しても劣化しない）
また、XDに限らずデザインカンプから画像を書き出す時は、サイズを2倍にして書き出すようにする。
理由はRetinaディスプレイでは1倍だとぼやけてしまい、綺麗に表示させるには2倍で書き出す必要があるため（2倍は2xとなる）。
文字や要素の情報など各数値を取得しながらコーディング
文字をコピー
文字をコピーするには、選択ツールでコピーしたいテキストボックスをダブルクリックすればよい（IllustratorやPhotoshopのようにテキストツールにする必要はない）。
レイヤーが重なっている場合は最初のダブルクリックはブロック全体、次のダブルクリックはテキストエリア全体という感じになるので、何度かダブルクリックをする必要がある。
テキストにカーソルが当たったら、Ctrl＋Aで全選択してコピーする。
フォントの情報を取得
次はフォントの情報を取得してCSSに記述していく。
情報を表示させるには知りたい文字をクリックすれば右側のサイドバーに表示される。
ここで確認出来るフォントの項目は以下の通り。
- font-family（種類）
- font-size（大きさ）
- font-weight（太さ）
- letter-spacing（字間）：値が『100』の場合、letter-spacing: 100;ではなく、100 ÷ 1000 = 0.1となり、単位はemになるためletter-spacing: 0.1em;となる
- line-height（行間）：line-heightが24pxの場合、font-sizeの値（例として16px）を使って計算する。24 ÷ 16 = 1.5となるので、line-height: 1.5; となる
- color（色）：カラーの四角内をクリックするとダイアログが表示されるので、そこでカラーコードを確認する
要素の情報を取得
次はボックスなどの要素の情報を取得する。
確認したい要素をクリックして選択する。
要素によっては何度かダブルクリックしないと確認したい項目が選択されない事もある。
確認する項目は以下の通り。
- width（幅）
- height（高さ）
- transform: rotate( );（角度）
- opacity（透明度）
- border-radius（角丸）
- background-color（背景色）またはグラデーション
- border（線）
- box-shadow（ドロップシャドウ）
背景色がグラデーションの場合
単色ではなくグラデーションの場合は、グラデーションの薄い色と濃い色のカラーコードを確認する必要がある。
- 塗りをクリック
- 要素の薄い方か濃い方の色をクリックして選択する
- カラーコードを確認
- もう片方の色も同様にカラーコードを確認
上から下にかけて色が濃くなるボタンの場合、背景色のコードは以下の通りである。
background: linear-gradient(to bottom, #FFEFF8, #F8CAE5);ドロップシャドウを確認する
ドロップシャドウは『X軸、Y軸、ぼかし、色』を確認する。
色を確認するには『ドロップシャドウ』の左の四角をクリックする。
カラーコードは最初『Hex』になっているかもしれないが、透明度が設定されている場合は『RGB』に変更する。
box-shadowプロパティの記述は以下の通り。
/* box-shadow: X軸（横方向の距離） Y軸（縦方向の距離） ぼかし rgba(カラーコード, 不透明度); */
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25);余白を取得
余白の取得方法は以下の通り。
- 要素をクリックして選択された状態にする
- Altキーを押しながら、距離を測りたい要素にカーソルを乗せる
これで要素の間に数値が表示される。
このやり方で上手くいかない場合は、ラインツールを使用する。左メニューにある『ラインツール』を選択したら、あとは余白を調べたい要素間に線を引くだけである（線はShiftキーを押しながら引くと真っ直ぐ引ける（縦も横も））。
線の長さは右側で確認できる（Wが幅、Hが高さ）。
XDデザインカンプの注意点
XDのデザインカンプでの注意点として、必ずページ全体を書き出した画像も貰うこと。
環境にないフォントとある場合、PC内に該当のフォントがないのでフォントが反映されない（＝実際の見え方と異なる）。
実際の見え方と異なるという事は『PerfectPixelで重ねてもピッタリ重ならない』ので、パーフェクトピクセルが困難になるという事である。フォントの種類によってはかなり大幅にズレてしまう。
したがって、フォントが入っているPCで作業しているデザイナーさんにページ全体を書き出して貰う必要がある。
