デザインスペックからアセットを書き出すおよびダウンロードする方法について説明します。

デザインスペックからアセットを書き出す

レイヤーを書き出しとしてマークし、デザインスペックを公開するときにアセットを含めると、それらを公開済みのデザインスペックのリンクからダウンロードできます。ベクターアセットは SVG、PNG および PDF、ビットマップアセットは PNG および PDF で使用できます。

デザインスペック用にアセットを書き出してダウンロードする方法について詳しくは、こちらのビデオをご覧ください。


レイヤーをマークして書き出し

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

  • 任意のアートボードレイヤーをクリックし、ポップアップメニューの書き出しマークを追加チェックボックスをオンにします。
  • カンバス上のレイヤーを右クリックし、ポップアップメニューから「書き出しマークを追加」を選択します。
  • macOS で キーボードショートカットを、Windows OS で キーボードショートカットを使用します。
  • レイヤーパネルを開いて、レイヤー名の横にある書き出しのためにマークアイコン  をクリックします。 

複数のアセットを書き出すには、アートボード内で複数のレイヤーを選択し、「書き出しマークを追加」をクリックします。

画像付きの Illustrator または Photoshop ドキュメントを読み込んだり開いたりしたとき、XD によりすべてのビットマップ画像が書き出し用に自動的にマークされます。 

アセットをマークして書き出し
アセットをマークして書き出し

デザインスペックをアセット付きで公開する

デザインスペックを公開するときにアセットを含め、その公開済みのリンクを開発者と共有するときは、それらのアセットを一元的にダウンロードするための場所を提供します。

  1. XD でレイヤーを書き出し用にマークします。

  2. 画面の右上で「共有」アイコンをクリックし、「開発用に共有」を選択します。デザインスペックでは、デザインは 1 倍の解像度であると想定されています。

    開発用に共有
    開発用に共有
  3. 書き出し先ドロップダウンからデザイン書き出しのプラットフォームを選択します。「ダウンロードにアセットを含める」オプションを選択して、「リンクを作成」をクリックします。

    プロトタイプにアセットを含める
    プロトタイプにアセットを含める

    デザインを作成するプラットフォームに応じて、一連の解像度の設定は異なります。

    • Web:アセットは 1 倍および 2 倍の解像度で書き出されます。
    • iOS:アセットは 1 倍2 倍および 3 倍の解像度で書き出されます。
    • Android:アセットは最適化され、次の Android 画面密度で書き出されます。
      • ldpi - 低密度(75%)
      • mdpi - 中密度(100%)
      • hdpi - 高密度(150%)
      • xhdpi - 超高密度(200%)
      • xxhdpi - 超超高密度(300%)
      • xxxhdpi - 超超超高密度(400%)
  4. 公開済みのデザインスペックをブラウザーで開くには、「ブラウザーで開く」アイコンをクリックし、アートボードを選択してアセットを表示します。選択したアセットとその他のアートボードの詳細がブラウザーに表示されます。

    アセットの上にポインターを置くと、「状況に応じた選択」機能により、選択したアセットが青色でハイライト表示されます。

    Web 上でのアセット
    Web 上でのアセット

デザインスペックからアセットをダウンロードする

公開済みのデザインスペックを開発者と共有すると、開発者はそこからアセットをダウンロードできます。開発者はアセットを個別にまたは同時にダウンロードできます。

 command + A キーまたは Ctrl + A キーを使用してすべてのアセットを選択するか、Shift キーを使用して複数選択することもできます。アセットは、お使いのコンピューターのダウンロードフォルダーに .zip ファイルとしてダウンロードされます。ベクターアセットの形式を SVGPDF および PNG に変更、ビットマップアセットの形式を PNG および PDF に変更できます。

アセットをダウンロードする
アセットをダウンロードする

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー