Adobe XDをもっと使いこなすヒント！第17回アセット書き出しのオプション

Adobe XDをもっと使いこなすヒント！

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、アセットの書き出し方法に関連する7つのツイートを取り上げます。

Tip 1. 書き出しパネルを表示する

#adobexd #protip Select any object and Cmd+E (Mac) or Ctrl+E (Win) to export an asset for production. @adobexd pic.twitter.com/zH3lOELGJJ

— Elaine Chao (@elainecchao) October 4, 2018

画像アセットを書き出すには、対象となるオブジェクトを選択してから、Cmd+E (Mac) または Ctrl+E (Win) キーを押下します。すると、画像を書き出すためのパネルが表示されます。
メニューからパネルを開く場合、mac OSでは「ファイル」>「書き出し」>「選択済み」と選択します。Windowsでは、ハンバーガーメニューをクリックし、「書き出し」>「選択済み」と選択します。

オブジェクトではなく、アートボードを選択してこの操作を行うと、アートボード自体を画像として書き出すという指示になります。画面一覧をPDF化する場合などに便利な機能です。

ちなみに、書き出される画像の名前にはレイヤー名が使われます。アートボードを書き出した場合は、アートボード名が画像の名前に使われます。

Tip 2. 書き出す形式を選択する

XDからは、PNG、SVG、JPG、PDFのいずれかの形式を選択して、アセットを書き出せます。
PNGへの書き出し以外は、選択の必要があるオプションはひとつだけです。JPGの場合は画像の品質を選択、PDFの場合はひとつのPDFにまとめるか、アセットごと別のPDFに分けるかを選択して書き出します。

#adobexd #protip If you’re exporting to SVG, remember that SVG doesn’t support inner or outer stroke. XD converts your paths to center stroke, so the reported dimensions of your SVG might be slightly different than what’s reported within XD. @adobexd pic.twitter.com/wMz8qE1KCK

— Elaine Chao (@elainecchao) October 9, 2018

SVGへの書き出しも、オプションは埋め込み用かリンク用かの選択のみです。ただし、境界線が常に「中央」が指定されているものとして扱われる点に注意が必要です。カンバス上で「中央」以外が指定されている画像をSVGに書き出した場合は書き出される画像のサイズが変わります。（境界線については第12回をご覧ください）

Tip 3. PNGアセットの書き出しオプションを選択する

#adobexd #protip Selecting “Design” will only export one asset at 1 point = 1 pixel, selecting the other options will export multiple sizes. For a detailed explanation: https://t.co/1O6mh0twRr @adobexd pic.twitter.com/8urSejaPhm

— Elaine Chao (@elainecchao) October 5, 2018

さて、PNG書き出しを行う場合です。ここでは、「書き出す対象」と「デザインの倍率」の2種類のオプションを選択することになります。

書き出す対象は4種類から選択できます。「デザイン」以外の選択肢では、以下のように複数の画像がまとめて書き出されます。

Web
- 1Xと2X
iOS
- 1Xと2Xと3X
Android
- ldpi – 低密度（75％）
- mdpi – 中密度（100％）
- hdpi – 高密度（150％）
- xhdpi – 超高密度（200％）
- xxhdpi – 超超高密度（300％）
- xxxhdpi – 超超超高密度（400％）

もうひとつのオプションである、デザインの倍率が用意されている理由は、例えば、Web用に1Xと2Xのアイコンを書き出す際に、

等倍でデザインしておいて、2X画像は2倍に拡大して書き出す
2倍の大きさでデザインしておいて、1X画像は半分に縮小して書き出す

を書き出し時に指定できるようにするためです。XDに対して「このアセットは等倍でデザインされているから、高解像度画面用の画像は拡大して！」と伝えられるのです。

選択できるデザインの倍率は、書き出す対象に対応して変わります。例えばiOSには3種類の選択肢が提供されます。これは、1Xと2Xと3Xのどれを基準にデザインされていても対応できるようにするためです。Androidなら選択肢は6種類です。具体的には上のビデオをご覧ください。

「デザイン」は、アセットをそのまま書き出したいときに選ぶオプションのため、倍率を選択するオプションは無効になります。

#adobexd #protip For icons, you’ll generally want to export as “Designed At” 1x to ensure your lines are crisp at higher fidelity. If you have fractional pixels in your images (“Designed At” 2x or 3x), you’ll end up with antialiased/fuzzy icons. @adobexd pic.twitter.com/VWXFfZA97G

— Elaine Chao (@elainecchao) October 8, 2018

アイコンに使用する画像を書き出す場合は、等倍でデザインすることが推奨されています。書き出し時に縮小を行うと線がぼけてしまう可能性があるためです。

Tip 4. バッチ書き出し機能を使う

#adobexd #protip Mark groups, symbols, and individual elements for batch export using the Layers Panel! @adobexd pic.twitter.com/USekQMe7TC

— Elaine Chao (@elainecchao) February 9, 2018

書き出す時に毎回アセットを選択する代わりに、あらかじめ選択しておいたアセットを書き出す機能がバッチ書き出しです。同じ組み合わせのアセットを、繰り返し書き出す場合に便利です。

バッチ書き出しを使うには、対象となる要素に事前にマークを付けておきます。この操作はレイヤーパネルで行います。上のビデオのように、マウスオーバーで表示されるアイコンをクリックすると、書き出し対象に追加されます。一般的なオブジェクトだけでなく、グループやシンボルも選択できます。

#adobexd #protip Once you’ve selected “Mark for Batch Export,” a batch export command (Shift+Cmd+E on Mac, Shift+Ctrl+E on Win) will export all of your selected assets in a single command. @adobexd pic.twitter.com/VlQm5khyWv

— Elaine Chao (@elainecchao) February 12, 2018

選択が完了したら、Shift+Cmd+E (Mac) または Shift+Ctrl+E (Win) キーを押下すると、バッチ書き出しが行われます。

Tip 5. プラグインを利用して書き出す

Bridging the gap between UI design and development has never been easier. #AdobeXD’s newest update now includes integration with @zeplin_io: https://t.co/yorP37ISM7 pic.twitter.com/hYV6rXUkbg