Adobe XDをもっと使いこなすヒント！ 第45回 XDから画像を書き出す
Adobe XDをもっと使いこなすヒント！
この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、アセットの書き出しに関連する8つのツイートを紹介します。
Tip 1. 書き出す画像の名前を指定する
#AdobeXD #ProTip By default, your object will export with the name of your layer. If you don’t name your layers, you can always change the name of the output. @AdobeXD pic.twitter.com/R716qfxMRr
— Elaine Chao (@elainecchao) December 24, 2019
書き出す画像の名前には、レイヤー名が使われます。macOS環境では、アセットを書き出す際にダイアログからファイル名を指定することができます。
Tip 2. アセットをデザインしたサイズで書き出す
#AdobeXD #ProTip Select “Design” to export only one size of the asset – where 1 virtual point inside of XD = 1px of your exported asset. @AdobeXD pic.twitter.com/joxcEDe3SB
— Elaine Chao (@elainecchao) December 25, 2019
書き出したい画像サイズがひとつだけで、XD内でデザインしたサイズ通りに書き出したい場合は、書き出し設定から「デザイン」を選択します。形式に「PNG」か「JPG」が選ばれているときに利用できます。
Tip 3. Web用にアセットを書き出す
#AdobeXD #ProTip Exporting at web will give you two sizes, one for high and one for low resolution. Select “designed at 1x” to also export a version that is twice the size you designed at. @AdobeXD pic.twitter.com/zFkrsOGAFe
— Elaine Chao (@elainecchao) December 26, 2019
書き出し設定に「Web」を選択すると、2倍のサイズの画像も一緒に書き出されます。デザイン倍率のオプションには、等倍と2倍のどちらを基準にデザインしたかを指定します。「1x」を指定すると、XD内でデザインしたサイズの画像（1x）と、その2倍のサイズの画像（2x）が書き出されます。
#AdobeXD #ProTip Export with the setting “designed at 2x” if you want a low res asset that is half the size of what you’ve designed on screen. @AdobeXD pic.twitter.com/CeEAEmtuDU
— Elaine Chao (@elainecchao) December 27, 2019
デザイン倍率に「2x」を指定すると、2倍のサイズのアセットをデザインしたという意味になります。すなわち、XDでデザインしたサイズ（2x）とその半分のサイズ（1x）の画像が書き出されます。
Tip 4. iOS用にアセットを書き出す
#AdobeXD #ProTip iOS asks for 3 different sizes for assets, so select “Designed at 1x” to scale your assets up and provide high res assets for use. (Note: you should preflight your bitmaps when importing.) @AdobeXD pic.twitter.com/AjxaCGaThl
— Elaine Chao (@elainecchao) December 30, 2019
書き出し設定に「iOS」を選択すると、等倍と2倍と3倍のサイズの画像が書き出されます。デザイン倍率に「1x」が指定されていると、XD内で等倍のサイズを基準にデザインしたものとして扱われます。
#AdobeXD #ProTip If you want to scale your assets down for your 1x, 2x, and 3x, set your “Designed At” to 3x. @AdobeXD pic.twitter.com/LtJ2mstHE1
— Elaine Chao (@elainecchao) December 31, 2019
デザイン倍率に「3x」を指定するのは、XD内でデザインしたサイズは3倍のサイズの画像であるという意味になります。従って、1xと2xの画像は、XD内の画像サイズの縮小版として書き出されます。
Tip 5. PDFでアセットを書き出す
#AdobeXD #ProTip You can easily export an asset or artboard as a PDF. You’ll want to do the former for iOS development, as your developers can use these assets for icons, as XCode can automatically translate the vectors inside to 1x, 2x, and 3x. @AdobeXD pic.twitter.com/rcxhcBniSz
— Elaine Chao (@elainecchao) January 8, 2020
PDFとしてベクター画像を書き出すと、それをXCodeに読み込んで、1x, 2x, 3xの画像を生成するという手法が使えます。iOSの開発に便利な方法です。PDFとして書き出すには、形式に「PDF」を指定するだけです。
Tip 6. Android用にアセットを書き出す
#AdobeXD #ProTip Android requires multiple versions of assets, so you can set your multiplier and what you designed at for a set your assets exported at exactly the right sizes for your developer. @AdobeXD pic.twitter.com/wlZ2uZVIcT
— Elaine Chao (@elainecchao) January 1, 2020
Android用には多くのサイズの画像が必要です。書き出し設定に「Android」を指定して、デザイン倍率にXDでデザインした基準倍率（例えば100%）を指定すると、サイズが計算されて必要なアセットが書き出されます。
いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？
次回をお楽しみに！