AdobeXDデザインデータを無料ダウンロード。AdobeXDデザインデータはクリ★スタというサイトで無料配布しており、ダウンロードできます。(AdobeXDデータを開くにはAdobeXDのインストールが必要です。あるのですが、レベル的にちょうどいい中級編をやってみることにしました。画像を全て書き出します。選択ツールを選択し、画像をクリックします。あれ?画像だけを選べません。理由はレイヤーが違うからです。ダブルクリックしていくとどんどん奥のレイヤーになっていき、画像だけを選択できます。「形式」は、写真ならJPG、イラストならPNGがいいと思います。「書き出し設定」は、「デザイン」だと倍率1xの一枚、「Web」だと倍率1xと2xの二枚書き出されます。倍率2xというのはレティナ対策だと思うのですが、私はまだよくわからないので、とりあえず1xの一枚だけでいいので「デザイン」を選択。「書き出し先」は、画像の書き出し先のフォルダを選択できます。私はあらかじめ作っておいた「crestaフォルダ」にしました。最後に「書き出し」をクリックすると、フォルダ内に書き出されます。これを画像の数だけ繰り返すだけです。まとめて書き出す方法もあるみたいですが、今回はやりません。文字情報も画像と一緒で、選択ツールで調べたい文字のところをダブルクリックしていきます。文字のレイヤーが選択できたら、右側に文字情報が出てきます。CSSで書くときは、letter-spacingは、値を1000で割った値にemの単位を付けます。line-heightは、line-height÷font-sizeの値となります。(この辺はPhotoShopからのコーディングと一緒です)色は、スポイトアイコンをクリックし、取りたい色の部分をクリックするとカラーコードが取れます。余白の長さは、基準となる要素を選択した状態から「ALT」を押したままカーソルを動かすと、基準の要素からの余白の長さが出てきます。adobeXDシェアするTwitterFacebookはてブPocketLINEコピーハルトをフォローするハルトプログラミング独学の軌跡AdobeXDからコーディングする方法を勉強をしました。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。adobeXDプロフィールプロフィール管理人のハルトです。