![xd-layer-export](/wp-content/uploads/xd-layer-export.jpg)
当ページでは、XDのアートボード上に作成したレイヤーを、個別のパーツとして書き出す方法をご紹介。
例えばデザインしたウェブページの画像パーツを書き出したり、同サイズのバナーを大量に書き出したりするのに、非常に役立つ。ぜひ覚えておこう。
アートボード上のパーツを書き出す方法
XDでは、アートボード上に配置したパーツを、それぞれ個別の画像ファイルとして書き出すことができる。
![xd-layer-export_1](/wp-content/uploads/xd-layer-export_1.jpg)
step
1
![xd-layer-export_2](/wp-content/uploads/xd-layer-export_2.jpg)
step
2
![xd-layer-export_3](/wp-content/uploads/xd-layer-export_3.jpg)
![xd-layer-export_4](/wp-content/uploads/xd-layer-export_4.jpg)
step
3
個別のレイヤー毎に書き出すことも可能
選択するレイヤーは、複数のレイヤーをまとめたフォルダ単位でも構わないし、個別のレイヤーでも構わない。
たとえばこのような、複数のパーツを組み合わせて作ったバナーがあった場合、パーツレイヤーすべてを別々の画像として書き出せる。
![xd-layer-export_5](/wp-content/uploads/xd-layer-export_5.jpg)
step
1
step
2
![xd-layer-export_6](/wp-content/uploads/xd-layer-export_6.jpg)
step
3
複数のレイヤーを書き出したとき、レイヤーの名前がそのまま画像の名前になる。あとから整理するのが面倒になるので、レイヤーのネーミングには気を配ろう。
応用:複数のバナーデザインを作成する
レイヤーでの書き出しは、ウェブページのデザインをXDで制作していて、画像としてコーディングするパーツを一気にまとめて書き出すのに役立つ。
あるいは、同じサイズのバナーを大量に作成したいとき。もしくは、同じデザインのバナーのサイズ違いを大量に作りたいときにも便利だろう。
たとえば「先ほどのバナーと同じデザインで、画像違いのバナーを複数作りたい」といったケースでも、この方法が有効だ。
![xd-layer-export_7](/wp-content/uploads/xd-layer-export_7.jpg)
step
1
![xd-layer-export_8](/wp-content/uploads/xd-layer-export_8.jpg)
step
2
![xd-layer-export_9](/wp-content/uploads/xd-layer-export_9.jpg)
step
3
![xd-layer-export_10](/wp-content/uploads/xd-layer-export_10.jpg)
step
4