XDチームのツイートからピックアップしてご紹介します。今回は、アセットの書き出し方法に関連する7つのツイートを取り上げます。すると、画像を書き出すためのパネルが表示されます。OSでは「ファイル」>「書き出し」>「選択済み」と選択します。Windowsでは、ハンバーガーメニューをクリックし、「書き出し」>「選択済み」と選択します。オブジェクトではなく、アートボードを選択してこの操作を行うと、アートボード自体を画像として書き出すという指示になります。画面一覧をPDF化する場合などに便利な機能です。ちなみに、書き出される画像の名前にはレイヤー名が使われます。アートボードを書き出した場合は、アートボード名が画像の名前に使われます。書き出す形式を選択するXDからは、PNG、SVG、JPG、PDFのいずれかの形式を選択して、アセットを書き出せます。PNGへの書き出し以外は、選択の必要があるオプションはひとつだけです。JPGの場合は画像の品質を選択、PDFの場合はひとつのPDFにまとめるか、アセットごと別のPDFに分けるかを選択して書き出します。2018SVGへの書き出しも、オプションは埋め込み用かリンク用かの選択のみです。境界線が常に「中央」が指定されているものとして扱われる点に注意が必要です。カンバス上で「中央」以外が指定されている画像をSVGに書き出した場合は書き出される画像のサイズが変わります。2018さて、PNG書き出しを行う場合です。ここでは、「書き出す対象」と「デザインの倍率」の2種類のオプションを選択することになります。書き出す対象は4種類から選択できます。「デザイン」以外の選択肢では、以下のように複数の画像がまとめて書き出されます。等倍でデザインしておいて、2X画像は2倍に拡大して書き出す2倍の大きさでデザインしておいて、1X画像は半分に縮小して書き出すを書き出し時に指定できるようにするためです。XDに対して「このアセットは等倍でデザインされているから、高解像度画面用の画像は拡大して!」と伝えられるのです。選択できるデザインの倍率は、書き出す対象に対応して変わります。iOSには3種類の選択肢が提供されます。これは、1Xと2Xと3Xのどれを基準にデザインされていても対応できるようにするためです。Androidなら選択肢は6種類です。具体的には上のビデオをご覧ください。「デザイン」は、アセットをそのまま書き出したいときに選ぶオプションのため、倍率を選択するオプションは無効になります。2018アイコンに使用する画像を書き出す場合は、等倍でデザインすることが推奨されています。書き出し時に縮小を行うと線がぼけてしまう可能性があるためです。2018書き出す時に毎回アセットを選択する代わりに、あらかじめ選択しておいたアセットを書き出す機能がバッチ書き出しです。同じ組み合わせのアセットを、繰り返し書き出す場合に便利です。バッチ書き出しを使うには、対象となる要素に事前にマークを付けておきます。この操作はレイヤーパネルで行います。上のビデオのように、マウスオーバーで表示されるアイコンをクリックすると、書き出し対象に追加されます。一般的なオブジェクトだけでなく、グループやシンボルも選択できます。キーを押下すると、バッチ書き出しが行われます。2018アセットの書き出しには、他のアプリとの連携や、プラグインも利用できます。Zeplinを使っている環境であれば、XDからZeplinのプロジェクトにデザインデータを出力できるため、既存のワークフローをそのまま利用できます。上のビデオでその様子が確認できます。アセット書き出しができるプラグインとしては、以下のようなものがあります。CSSやHTMLの書き出しから、アプリのコードを生成するものまで、幅広く揃っています。