【初心者】AdobeXDデータからコーディングしてみた。やり方をザックリ解説。

f:id:gharuto:20201003113358j:image

前々回の記事で「AdobeXDのデザインはブラウザで共有できるので、コーダーはAdobeXDをインストールする必要はない」と書きましたが、

AdobeXDからコーディングする方法を勉強をしました。簡単に解説します。
案件獲得に向けて最近ココナラを色々見ているのですが、 コーダーの皆さん、やはりAdobeXDからもコーディングできますと書いてある人がほとんど。 私みたいにPhotoshopからしかコーディングできないようでは厳しいのか...

もしかしたら案件で、AdobeXDデータ(拡張子.xdのファイル)からのコーディングをお願いされるかもしれない。

ということで、一応AdobeXDデータからコーディングする練習をしてみました。

AdobeXDデザインデータを無料ダウンロード。

AdobeXDデザインデータはクリ★スタというサイトで無料配布しており、ダウンロードできます。

(AdobeXDデータを開くにはAdobeXDのインストールが必要です。)

初級編、中級編、上級編があるのですが、

レベル的にちょうどいい中級編をやってみることにしました。

まず画像を全て書き出す。

まず画像を全て書き出します。

選択ツールを選択し、画像をクリックします。

が、あれ?画像だけを選べません。

f:id:gharuto:20201002215238p:plain

理由はレイヤーが違うからです。

ダブルクリックしていくとどんどん奥のレイヤーになっていき、画像だけを選択できます。

自分が今どのレイヤーを選択しているのか分からない時は、ここを見るとわかります↓

f:id:gharuto:20201002215303p:plain

画像を選択した状態で「CTRL+E」を押すと、このような画面が出てきます↓

f:id:gharuto:20201002215327p:plain

「形式」は、写真ならJPG、イラストならPNGがいいと思います。

「書き出し設定」は、「デザイン」だと倍率1xの一枚、「Web」だと倍率1xと2xの二枚書き出されます。

倍率2xというのはレティナ対策だと思うのですが、私はまだよくわからないので、とりあえず1xの一枚だけでいいので「デザイン」を選択。

「書き出し先」は、画像の書き出し先のフォルダを選択できます。

私はあらかじめ作っておいた「crestaフォルダ」にしました。

最後に「書き出し」をクリックすると、フォルダ内に書き出されます。

これを画像の数だけ繰り返すだけです。

まとめて書き出す方法もあるみたいですが、今回はやりません。

文字情報を書き出す。

文字情報も画像と一緒で、選択ツールで調べたい文字のところをダブルクリックしていきます。

文字のレイヤーが選択できたら、右側に文字情報が出てきます。

f:id:gharuto:20201002221918p:plain

CSSで書くときは、letter-spacingは、値を1000で割った値にemの単位を付けます。

line-heightは、line-height÷font-sizeの値となります。

(この辺はPhotoShopからのコーディングと一緒です)

色は、スポイトアイコンをクリックし、取りたい色の部分をクリックするとカラーコードが取れます。

f:id:gharuto:20201002223629p:plain

余白の長さを調べる。

余白の長さは、基準となる要素を選択した状態から「ALT」を押したままカーソルを動かすと、基準の要素からの余白の長さが出てきます。

(これはすごい)

こちらのサイトにも分かりやすく書かれています↓

Adobe XDのデザインカンプからコーディングに必要な画像や値を取得する方法 | HPcode

コメント

タイトルとURLをコピーしました