Adobe XD をWebExportでHTML出力してみた

どうも、かわうそです。

今日のテーマ:『スマホからパソコンへデータを移動できる便利アイテムを使い方まで紹介』

Adobe XDのデザインデータをHTML出力する方法を紹介します。

結論、Web Export(公式サイト)というプラグインを使用することで可能になります。
しかし、ソースコード自体は実運用するには難しい仕上がりで課題は残る、というのが正直なところです。

Contents

HTML・CSS・画像を一括書き出し「Web Export」
使い方：アートボードをエクスポートするだけ
「Web Export」の問題点
結論：神ツールに見えて使えない

HTML・CSS・画像を一括書き出し「Web Export」

Web Exportを使えば

HTML
CSS
画像

をワンクリックで一括書き出ししてくれます。

仕上がりはこんな感じ。使えるかどうかはさておき、見た目の再現性はよさそう。

使い方：アートボードをエクスポートするだけ

プラグインをインストールしたら、「Web Export」をクリック。

書き出したいアートボードを選択してから、「輸出 Artsboard」をクリック。

ポップアップが開くので、「Export」をクリックして、保存先を選択したら完了です。

保存先にはHTMLファイルと画像がずらずらっと吐き出されています。

「Web Export」の問題点

今のところ素晴らしいツールに思えるけれど、品質を検証し、使える使えないの判断を下していきます。

HTML

まずはHTMLから見ていきます。

大枠の構造としては
headで全体のスタイルシートとJSが読み込まれており
body配下にHTMLソースコードが展開されている、よく見る構造ですね。

ではbodyの中身を確認していきます。

なんと、、、さすがにこれで納品・ページ公開はできないソースコードです。

突っ込み放題ではありますが、具体的に何が問題か考えていきます。

SVG

このようなSVGコードがたっくさん出てきます。

<svg class="n_1142">
 <rect id="n_1142" rx="8" ry="8" x="0" y="0" width="260" height="368">
 </rect>
</svg>

</rect>

</svg>

SVGを簡単に言うと、拡大縮小しても画質が全く変わらない、テキストベースの画像フォーマットです。テキストベースなので、HTMLにインラインで直接書いたり、、、なんかも可能です。
※参考 https://jp.ext.hp.com/techdevice/technologysc/creator_004/

XD上で生成された四角や丸、線などの「オブジェクト」データがSVGタグとして吐き出されています。

これらはCSSで装飾ができるため不要なソースコードと言えます。

※ちなみにSVGタグの詳細は下記になります。

rect：長方形などの四角を描写
elipse：楕円や丸を描写
path：直線や曲線・円弧を描写

クラス名やID

設定次第で変更は可能ではありますが、IDやクラス名が連番指定だったり、繰り返し要素にも規則性がありません。

メンテナンスを絶対にさせないぞ！という意思を感じさせるような構造ですね。

<div id="n_3381">
  <svg class="n_1150_c">
    <rect id="n_1150_c" rx="8" ry="8" x="0" y="0" width="536" height="82">
    </rect>
  </svg>
  <div id="n_3378_c">
    <div id="Get_my_computer_fixed">
      <span>Get my computer fixed?</span>
    </div>
    <svg class="ic_chevron_right_24px_da" viewBox="8.59 6 7.41 12">
      <path id="ic_chevron_right_24px_da" d="M 10.00005912780762 6 L 8.590000152587891 7.409999847412109 L 13.17019367218018 12 L 8.590000152587891 16.59000015258789 L 10.00005912780762 18 L 16.00031280517578 12 L 10.00005912780762 6 Z">
      </path>
    </svg>
  </div>
</div>

</rect>

</svg>

<span>Get my computer fixed?</span>

</div>

</path>

</svg>

</div>

モバイル対応

モバイル対応もしていません。

iPhone12Proでのviewを確認しましたが、レスポンシブには非対応です。

CSS

CSSはこんな感じです。HTMLに指定されているIDやクラスが使われています。

共通パーツにまとめてCSSを指定する効率的なコードにはなっていません。

また、potision: absolute; やtop,left,bottom,right の絶対位置指定や
overflow: hidden; などの不要なスタイル指定が多く、手直しは不可能なソースコードになっています。

#Capital_Confidential_Big_Short {
  left: 28px;
  top: 163px;
  position: absolute;
  overflow: visible;
  width: 201px;
  height: 128px;
  line-height: 25px;
  margin-top: -2.5px;
  text-align: left;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  color: rgba(19,59,58,1);
}
#n_3447 {
  position: absolute;
  width: 260px;
  height: 368px;
  left: 139px;
  top: 1205px;
  overflow: visible;
}

#Capital_Confidential_Big_Short {

left: 28px;

top: 163px;

position: absolute;

overflow: visible;

width: 201px;

height: 128px;

line-height: 25px;

margin-top: -2.5px;

text-align: left;

font-family: Roboto;

font-style: normal;

font-weight: normal;

font-size: 20px;

color: rgba(19,59,58,1);

}

#n_3447 {

position: absolute;

width: 260px;

height: 368px;

left: 139px;

top: 1205px;

overflow: visible;

}

画像(image)

画像オブジェクト単位で自動書き出しされました。命名規則は目をつぶりましょう。
（命名規則も個別で指定することも可能っちゃ可能ですが、めちゃくちゃめんどくさい。）

使いにくいのは、例えば3枚の画像グループを1つの画像として書き出ししたいのに、
画像オブジェクト毎 = 1枚ずつ書き出しされてしまうので、画像管理は難しそうです。

ソースコードに関しては、端末のデバイスピクセル比に応じて読み込む画像を変更してくれる
srcset属性を自動指定してくれたり、その辺は嬉しい。


<img id="matthew-henry-VviFtDJakYk-unsp" src="matthew-henry-VviFtDJakYk-unsp.png" srcset="matthew-henry-VviFtDJakYk-unsp.png 1x, matthew-henry-VviFtDJakYk-unsp@2x.png 2x">

1 2	<img id="matthew-henry-VviFtDJakYk-unsp" src="matthew-henry-VviFtDJakYk-unsp.png" srcset="matthew-henry-VviFtDJakYk-unsp.png 1x, matthew-henry-VviFtDJakYk-unsp@2x.png 2x">