Adobe XDでアセットを書き出す

Adobe XDで作成したデザインで画像を書き出すことがあったので、書き出す方法をメモ。

書き出し方法

書き出したいレイヤーを選択して、左上のハンバーガーメニューをクリックします。

書き出し > 選択済み… をクリックします。

書き出しのオプションを設定します。

「形式」はPNG・SVG・PDF・JPGを選択できます。
今回はPNGを選択します。

「書き出し設定」はデザインかWeb、iOS、Androidを選択できます。
デザインの場合は1倍のみ、Webの場合は1倍と2倍、iOSの場合は1倍と2倍と3倍、Androidの場合は0.75倍～4倍の6種類の倍率で書き出されます。
今回はWebを選択します。

「デザイン倍率」はデザインデータをどの倍率で作成しているかの指定で、書き出し設定がWebの場合は「1x」か「2x」を選択できます。
今回は等倍での作成なので1xとします。

最後に「書き出し先」で保存先を指定して、書き出しを行います。

書き出しを行うと、「グループ化 1.png」というファイル名で等倍の画像、「グループ化 1@2x.png」というファイル名で2倍サイズの画像を書き出すことができました。
　

【参考サイト】

• Adobe XD から制作用素材を PNG、SVG、JPG および PDF ファイルとして書き出す方法を説明します。