XD でデザインスペックを確認する方法について説明します。

デザインスペックを受け取った時点で、アートボード内の様々なオブジェクトの色、テキスト、計測値、ホットスポットなどの属性を調べることができます。

計測値を表示および確認する

アートボード内のオブジェクトを選択して、その計測値とスタイルを確認します。

オブジェクト間の間隔を確認するには、オブジェクトを選択し、アートボード内の他のオブジェクトの上にポインターを置きます。

オブジェクトの計測値を調べる
オブジェクトの計測値を確認する

色、文字スタイルおよびアセットを表示する

デザインスペックのリンクでアートボードを選択すると、そのアートボードで使用されているすべての固有の色が「」セクションに表示されます。利用可能な色の形式を表示し、ドロップダウンリストを使用して任意の形式を選択できます。例えば、HSLA で作業する場合は、ドロップダウンリストを使用して色の形式を HSLA に変換します。この変更はセッションを通して有効で、別のアートボードを表示するときに同じ色の形式が使用されます。

同様に、アートボードの固有の文字スタイルをすべて、「文字スタイル」セクションで確認できます。

アートボード内のいずれかのレイヤーを書き出す対象としてマークした場合、「アセット」セクションでそれらのレイヤーの色と文字スタイルを確認できます。

注意:

アートボードでオブジェクトを選択すると、そのオブジェクトで使用されている色が「アピアランス」セクションに表示されます。

色の形式を変換する
色の形式を変換する

テキストのプロパティを表示、確認およびコピーする

アートボード内のテキストのプロパティを調べるには、テキスト行を選択します。プロパティパネルからテキストとその色をコピーすることもできます。

Adobe XD にはユニットがなく、オブジェクト間の関係性に焦点を当てます。例えば、375 x 667 ユニットで iPhone 6/7 のアートボードをデザインし、10 ユニットのフォントサイズのテキストを使用している場合、デザインを物理的に拡大縮小しても関係性は変わりません。

ただし、デザインスペックでは、pxptdp などのデフォルトの単位を、基本となる単位のない測定値にプラットフォームに合わせて追加するため、開発しているプラットフォームの測定値を把握できます。デザインスペックで測定単位を変更することもできます。

測定単位を変更する
測定単位を変更する

レイアウトグリッドのプロパティを表示して検証する

レイアウトグリッドを表示するには、プロパティインスペクターの「レイアウトグリッド」をオンに切り替えます。このオプションは、デザインスペックのすべてのアートボードに対してレイアウトグリッドを有効にします。

アートボードからレイアウトグリッドを削除するには、切り替えボタンを使用します。不透明度スライダーを使用して、レイアウトグリッドの透明度を制御できます。

レイアウトグリッド内でパラメーターを設定した場合は、それらのパラメーターの上にポインターを置き、表示されるアートボード上でハイライト表示します。

注意:

デザインスペックに方眼グリッドは表示されません。

デザインスペックのリンクを公開する前に、関連するアートボードでレイアウトグリッドを有効にしてください。デフォルトでは、デザインでレイアウトグリッドを使用していない場合、グリッドはデザインスペックのリンクに表示されません。

レイアウトグリッドのプロパティ
レイアウトグリッドのプロパティ

オーバーレイを表示および確認する

デザインスペックビューの UX フロー画面でオーバーレイの接続を確認できます。

適用されたオーバーレイを確認するには、プロパティインスペクターの「インタラクション」セクションに移動して、表示されたアーティファクトをクリックするか、Shift キーを押しながらデザインスペックでホットスポットをクリックします。

オーバーレイを表示および確認する
オーバーレイを表示および確認する

適用されたオーバーレイの次のアートボードの詳細、スタイルおよびターゲット情報を確認できます。

  • ビューポートのサイズ:ページにアクセスするために使用されるデバイスのサイズに基づいて変化する可視領域のサイズを表示します。
  • デザインのサイズ:アートボードのデザインのサイズを表示します。
  • オーバーレイの位置:pxpt および dp 形式のソースアートボードを基準としたオーバーレイの位置を表示します。
  • カラー:色を RGBAHex および HSLA 形式で表示します。
  • 文字スタイル:文字スタイルを pxpt および dp サイズで表示します。オーバーレイ位置の形式は、設定した文字スタイルに基づいて変更されます。
  • インタラクション:ターゲットアートボードに関連付けられているインタラクションやアクションに関する情報を表示します。

ソースアートボードに戻すには、Esc キーを押すか、画面上の「オーバーレイを閉じる」をクリックします。

固定オブジェクトを表示および確認する

デザインスペックでは、固定オブジェクトをアートボード上でクリックすると、左上隅にピンアイコンが表示されます。 

固定オブジェクトを確認する
固定オブジェクトを確認する

ホットスポットを表示および確認する

アートボードで定義されているホットスポットを表示するには、Shift キーを長押しします。ホットスポットを確認するには、「インタラクション」セクションに表示されているアーティファクトをクリックするか、Shift キーを押しながらそのホットスポットをクリックします。

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

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