Adobe XDでデザインデータをHTMLにコーディングするまでの手順をご紹介します！
Adobe XDをHTMLに書き出すための準備
画像を取得
HTMLを記述する際に使用する画像を書き出していきます。
以下3種類のパターンで書き出し形式を分けるのがおすすめです。
- 通常の写真は「jpg」
- 背景透過の切り抜きやアイコンは「png」
- ロゴは「svg」
WEB上で正しく画像を表示するためにも書き出し形式は重要なので、覚えておきましょう！
書き出し方法は、以下の手順で行います。
まず書き出したい画像を「shift」+「クリック」で選択しましょう。
次にXD上部のメニューから「ファイル」→「書き出し」→「選択したオブジェクト…」をクリックします。
Winの場合は「Ctrl ＋ E」、Macの場合は「Command ＋ E」でも同じ操作ができます。
保存場所と書き出し形式が出てくるので、フォーマットや書き出し先などを設定し、「書き出し」をクリックすれば保存できます。
等倍のサイズだとデバイスによっては、画像が荒く見えてしまうことがあるため、JPGとPNGの場合は、「デザイン倍率」を2×にして書き出すのがおすすめです。
この設定をすると1×と2×の両方のサイズで画像を書き出すことができます。
JPGとPNGの場合は、「デザイン倍率」を2×にして書き出そう！
テキスト情報を取得
次にテキスト情報を取得していきます。
まず、選択ツールでテキストの上をクリックします。
右側のパネルにfont-familyやfont size、colorなどが出てくるので、必要な情報を取得していきましょう。
colorの詳細情報（カラーコード）は、色の部分をクリックするとが確認できます！
要素の詳細情報（CSS）を取得
次にコーディングに必要な以下の詳細情報を取得していきます。
- wrapperの幅
- 要素のwidthやheight
- 要素の色味
- 要素の透過率やシャドウ
- 余白
手順はとても簡単です。
まず調べたい要素（オブジェクト）をクリックしましょう。
右側に詳細情報がでてくるので、この部分から必要な情報を取っていきます。
要素間のmarginやpaddingは、オブジェクトが選択されている状態からWindowsの場合は「Alt」、Macの場合は「option」を押して隣の要素や余白部分にカーソルを動かすと確認できます。
Adobe XDをHTMLにコーディング(書き出し)する方法
HTMLからコーディングする
基本情報やheader、mainなどの大枠から順番にHTMLを記述していきましょう。
テキストデータはXDデータから抜き取りながらHTMLを記述していきます。
後の工程でCSSをスムーズに追加できるよう、HTMLを記述する際にclassもつけておくのがおすすめです！
XDデータとテキストエディタを行き来するのが面倒な人は、事前準備の時にテキストをメモ帳などに全てコピーしておいても良いかと思います。
準備の際に取得した情報を元にCSSでスタイリング
HTMLの記述が完了した段階では、テキストや画像などの情報が並んでいるだけの状態です。
デザインデータに近づけるためにボタンの色味や要素の配置、余白などをCSSで付け加えていきましょう！
Adobe XDをHTMLに書き出す際のコツ
XDはデザインデータを共有できる
XDデータは、自分以外の誰かに共有できる優れた機能があります。
ブラウザ上でデザインを確認できるので、adobeソフトを利用していない人にも共有ができます！
指定した部分にコメントを付け足すこともできるので、制作会社の現場では、プロジェクトチームやお客様とのコミュニケーションツールなどでも利用されています。
共有のやり方も非常に簡単です！
まずは、画面上部の「共有」タブをクリックします。
次に右側のパネルにでている「リンクを作成」というボタンがあるのでクリックします。
自動生成されたリンク（URL）がでてくるので、これを共有したい人に送るだけです！
デフォルトの状態だとリンクを知っている人なら誰でも見ることができます。
勝手にアクセスされる可能性は低いですが、もし外部の誰かに閲覧されるのが心配な人は「リンクへのアクセス」から招待されたユーザーのみ閲覧できるように変更することも可能です！
Zeplinと連携すればコーディングが効率化できる
Zeplinは一言でいうとデザインデータから書き出しに必要な情報を素早く取得できる作業効率化ソフトです。今回ご紹介した事前準備の作業をZeplinで一通り賄うことができます。
他にも、CSSの自動生成やテキストデータを簡単にコピーできるなどの機能があり、かゆいところに手が届く万能ソフトです。
連携も簡単にできるので、XDやPhotoshopなどのデザインデータをコーディングする人は、インストールしておきましょう！
Adobe XDをHTMLに書き出してみよう！
元々XDは、ワイヤーフレームや資料作成に使われるのが一般的でしたが、便利な機能が徐々に追加されていき、今ではXDでデザインを作成するデザイナーが増えてきています。
需要が高まってきているので、XDデータをHTMLに書き出す手順を覚えれば、コーダーとしてのスキルの幅を広げることにも繋がります。実際に手を動かして書き出し方法をマスターしましょう！