書き出しをする – PNG SVG PDF –
基本操作
2017.01.04
書き出しをする – PNG SVG PDF –
Adobe XD で書き出しをする方法です。
2017年1月のベータ版時点では「.png」「.svg」「.pdf」の3種類に対応。
各拡張子ごとの書き出し方法を解説します。
ショートカットキー
⌘ +E
基本的な使い方
1.アートボード（アセット）を選択
アセット（Photoshopで言うところのレイヤー）を選択してもそのアセットを書き出すことが出来ます。
アートボードを書き出す場合は以下のいずれかの方法でアートボードを選択します。
- レイヤーパネルでアートボードを選択
- Commandを押しながらアートボードをクリック
- アートボードをダブルクリック
2.書き出しを選択
書き出しを選択します。
- メニュー > ファイル > 書き出し
- Command + E
3-1.PNG形式での書き出し
PNG形式の場合、出力デバイスに合わせて画像サイズを簡単に選択できます。
Ratinaなど解像度に合わせ、自動的に画像サイズを調整することが出来ます。
| 項目名 | 説明 |
| デザイン | アートボードやレイヤーを1xで書き出します。画像でデザインカンプを出力したい場合やバナーなどの素材を等倍で使用する場合はこの設定を使用します。 |
| Web | 素材部分を1x〜2xで書き出します。PCサイトのみのコーディングを行う場合はこちらを使用します。 |
| iOS | 素材部分を1x〜3xで書き出します。 |
| Android | Androidの解像度を表現する画面密度（dpi）を選択し書き出します。
|
Androidの画面サイズはdpiについては開発者向け情報を参照してください。
3-2.SVGで書き出し
SVGでの書き出しは、画像形式を選択して書き出すことが出来ます。
| 埋め込み | ビットマップ画像が SVG にエンコードされます。 |
| リンク | 画像をリンク画像として書き出します。画像が 別ファイルに保存されます。 |
SVGの書き出しはマスクがおかしくなる場合があるので注意が必要です。
[Adobe XD] Illustrator使いさんに捧げるSVG書き出しのコツ
3-3.PDFで書き出し
PDFは保存方法を選択して書き出すことが出来ます。
2017年1月ベータ版時点では表示は問題ありませんが、テキスト情報のコピーなどは出来ません。
| 単独のPDFファイル | 1つ、あるいは複数のアートボード（アセット）をページを分けてに1つのファイルに保存します。 |
| 複数のPDFファイル | 選択しているアートボード数やアセット数に応じ、それぞれ1つのPDFファイルとして保存します。 |
