前々回の記事で「AdobeXDのデザインはブラウザで共有できるので、コーダーはAdobeXDをインストールする必要はない」と書きましたが、
もしかしたら案件で、AdobeXDデータ(拡張子.xdのファイル)からのコーディングをお願いされるかもしれない。
ということで、一応AdobeXDデータからコーディングする練習をしてみました。
AdobeXDデザインデータを無料ダウンロード。
AdobeXDデザインデータはクリ★スタというサイトで無料配布しており、ダウンロードできます。
(AdobeXDデータを開くにはAdobeXDのインストールが必要です。)
初級編、中級編、上級編があるのですが、
レベル的にちょうどいい中級編をやってみることにしました。
まず画像を全て書き出す。
まず画像を全て書き出します。
選択ツールを選択し、画像をクリックします。
が、あれ？画像だけを選べません。
理由はレイヤーが違うからです。
ダブルクリックしていくとどんどん奥のレイヤーになっていき、画像だけを選択できます。
自分が今どのレイヤーを選択しているのか分からない時は、ここを見るとわかります↓
画像を選択した状態で「CTRL+E」を押すと、このような画面が出てきます↓
「形式」は、写真ならJPG、イラストならPNGがいいと思います。
「書き出し設定」は、「デザイン」だと倍率1xの一枚、「Web」だと倍率1xと2xの二枚書き出されます。
倍率2xというのはレティナ対策だと思うのですが、私はまだよくわからないので、とりあえず1xの一枚だけでいいので「デザイン」を選択。
「書き出し先」は、画像の書き出し先のフォルダを選択できます。
私はあらかじめ作っておいた「crestaフォルダ」にしました。
最後に「書き出し」をクリックすると、フォルダ内に書き出されます。
これを画像の数だけ繰り返すだけです。
まとめて書き出す方法もあるみたいですが、今回はやりません。
文字情報を書き出す。
文字情報も画像と一緒で、選択ツールで調べたい文字のところをダブルクリックしていきます。
文字のレイヤーが選択できたら、右側に文字情報が出てきます。
CSSで書くときは、letter-spacingは、値を1000で割った値にemの単位を付けます。
line-heightは、line-height÷font-sizeの値となります。
（この辺はPhotoShopからのコーディングと一緒です）
色は、スポイトアイコンをクリックし、取りたい色の部分をクリックするとカラーコードが取れます。
余白の長さを調べる。
余白の長さは、基準となる要素を選択した状態から「ALT」を押したままカーソルを動かすと、基準の要素からの余白の長さが出てきます。
（これはすごい）
こちらのサイトにも分かりやすく書かれています↓
コメント