デザイン素材の書き出し

ビットマップ画像、アイコン、背景パターン、テキスト、アートボードなどのデザイン素材を XD から PNG、SVG、JPG、および PDF として書き出すことができます。これらの書き出されたデザイン素材は、iOS、Android、または Web アプリケーションでのデプロイメント用に最適化されます。

macOS で XD を使用している場合、サードパーティ統合（Zeplin、Avocode、Sympli、Kite Compositor、Protopie など）にデザインを取り込むこともできます。

• バッチ：プロパティインスペクターで「書き出し対象にする」オプションを使用してマークされたデザイン素材をバッチ書き出しできます。複数のオブジェクトを 1 つのデザイン素材として書き出すには、書き出す前にオブジェクトをグループ化します。
• 選択済み：特定のデザイン素材を選択して書き出すことができます。
• すべてのアートボード：デザインプロジェクトで書き出すすべてのアートボードを選択できます。
• After Effects：After Effects に書き出すデザイン素材を選択できます。

書き出し用にレイヤーをマークする

書き出し用にマークされたレイヤーは、デザイン素材としてデザインスペックに含まれます。デザイン素材を書き出し用にマークするには、カンバス上でレイヤーを選択して、次のいずれかのオプションを使用します。

• カンバス上のレイヤーを右クリックし、ドロップダウンメニューから「書き出しマークを追加」を選択します。 
• レイヤーパネルを開き、レイヤー名の横にある書き出しマークを追加アイコン をクリックします。

デザイン素材を異なるファイル形式に書き出す

アセットは、Web サイトで HTML/CSS/JS を使用したり、iOS および Android アプリケーションで Swift や Java などのネイティブ言語を使用したりして、デザインしたものをデベロッパーが再構築するために必要とするデザインファイルです。

一般に、最も一般的なアセットは、ビットマップ画像、アイコン、背景パターンであり、PNG、SVG、PDF、JPG の形式で書き出すことができます。

XD 57 以降では、JPG、PNG、PDF のアセットを一貫したカラーレンディションで書き出すことができます。これを実現するには、ドキュメントのカラープロファイルを sRGB に切り替えます。管理されていないカラープロファイルを含むドキュメントからアセットを書き出そうとすると、書き出されたアセットにカラーの不一致が生じる可能性があることを知らせるメッセージが表示されます。詳しくは、カラーマネジメントを参照してください。

PNG として書き出し

一般的な書き出しサイズまたはプラットフォーム固有の書き出しサイズを選択するか、カスタムの書き出しサイズを設定します。

• プリセットまたはカスタムの書き出しサイズ - プリセットの書き出しサイズ（0.5 x、1 x、1.5 x、2 x、3 x、4x）のいずれかを選択します。0.1 x から 10 x までのカスタムの書き出しサイズを入力することもできます。
• Web - デザイン素材は 1x および 2x 解像度で書き出されます。
• iOS - デザイン素材は 1x、2x、3x 解像度で書き出されます。
  
• Android - デザイン素材は最適化され、次の Android 画面密度で書き出されます。
  • ldpi - 低密度（75％）
  • mdpi - 中密度（100％）
  • hdpi - 高密度（150％）
  • xhdpi - 超高密度（200％）
  • xxhdpi - 超超高密度（300％）
  • xxxhdpi - 超超超高密度（400％）

SVG として書き出し

オブジェクトまたはアートボードを SVG として書き出す場合、次のオプションを設定できます。

ビジュアルスタイル：

• プレゼンテーション属性：各 SVG タグの個々のスタイルプロパティごとに別々の XML 属性を使用します。この形式は、Android Studio で SVG デザイン素材を使用するために必要です。
• 内部 CSS：CSS クラスを持つ単一のスタイルタグを使用し、同じスタイルを持つオブジェクト間でスタイル設定を共有して、ファイルサイズを小さく抑えます。

埋め込み画像またはリンク画像：

• 埋め込み：ビットマップ画像は SVG ファイルにエンコードされます。
• リンク：ビットマップ画像は、SVG ファイルへの参照とは別に保存されます。

PDF として書き出し

デザイン素材を PDF で書き出すには次の方法があります。

• 単一の PDF ファイル：複数のアートボードまたはデザイン素材を選択して、それらを 1 つの PDF ファイルとして書き出すことができます。
• 複数の PDF ファイル：複数のアートボードまたはデザイン素材を選択し、それぞれを個別の PDF ファイルとして書き出すこともできます。選択したアートボードまたはデザイン素材ごとに個別の PDF ファイルが作成されます。

JPG として書き出し

デザイン素材を JPG として書き出す場合、次のオプションを設定できます。

品質： 20％、40％、60％、80％、100％ から選択します。

書き出しサイズ：

• プリセットまたはカスタムの書き出しサイズ - プリセットの書き出しサイズ（0.5 x、1 x、1.5 x、2 x、3 x、4x）のいずれかを選択します。0.1 x から 10 x までのカスタムの書き出しサイズを入力することもできます。
• Web - デザイン素材は 1x および 2x 解像度で書き出されます。

JPG は PDF に変換されません。ラスタライズ画像は画像としてインポートされるため、PDF に変換されることがあります。

デザイン素材をサードパーティアプリケーションに書き出し

XD から他のアプリケーション（Zeplin、Avocode、Sympli、Kite Compositor、ProtoPie）にデザインを提供することもできます。

Zeplin を使用した macOS での XD のサンプルワークフローを以下に示します。

トラブルシューティング

デザイン素材の書き出しについての問題が発生している場合は、書き出しに関する問題を解決するには、Adobe XD でファイルのインポートまたはエクスポートができないのはなぜですか？
を参照してください。

ご質問または共有するアイデアがある場合