ご質問または共有するアイデアがある場合は、Adobe XD コミュニティにぜひご参加ください。皆様からのご意見や作品をお待ちしております。
- Adobe XD ユーザーガイド
- はじめに
- デザイン
- アートボード、ガイド、レイヤー
- シェイプ、オブジェクト、パス
- テキストとフォント
- コンポーネントとステート
- マスキングと効果
- レイアウト
- ビデオと Lottie アニメーション
- プロトタイプ
- 共有、書き出し、およびレビュー
- デザインシステム
- クラウドドキュメント
- 統合とプラグイン
- XD iOS 版および Android 版
- トラブルシューティング
- 既知の問題と修正された問題
- インストールと更新
- 起動時のクラッシュ
- クラウドドキュメントおよび Creative Cloud ライブラリ
- プロトタイプ作成、公開、レビュー
- 読み込み、書き出し、その他のアプリの操作
デザインスペックのカラー、テキスト、数値、コンポーネントのステート、インタラクションのハイライトなどの属性を表示および確認する方法について説明します。
共有デザインスペックリンクでは、プロトタイプを表示して体験したり、状況に応じてコメントとフィードバックを追加したり、デザインの測定値とスペック情報を取得したりすることができます。
デザインスペックリンクを開くと、デフォルトでプロトタイプモードに設定されています。プロパティと仕様の情報を取得するには、右レールの アイコンをクリックしてデザインスペックのタブに切り替えます。
デザインスペックタブに切り替えると、カンバス上で要素を選択して検査し、プロパティインスペクターに表示されるカラー、テキスト、測定値、ステート、その他のプロパティなどの属性を取得できます。
{} アイコンをクリックして、変数タブに切り替えます。このタブは、デザイナーが web のデザインスペックリンクを公開すると使用できるようになります。デザイナーがデザインのカラーと文字スタイルの変数名を定義すると、デザイントークン情報を変数タブに表示できます。
以下では、デザインスペックの属性を表示し、照合する方法について説明します。
画面の詳細ビュー
アートボードの外側をクリックすると、画面の詳細ビューが表示されます。このビューでは、画面とインタラクションのハイライトなどの詳細を調べることができます。
画面の詳細とプロパティ
A. 画面の詳細:画面の寸法を表示します。
B. カラー:書き出し用にマークされた色を表示します。
C. レイアウトグリッドのプロパティ:グリッドを表示するには、オンにします。
不透明度スライダーを使用して、カラーの透明度を制御できます。
XD アプリでエクスポートするレイヤーをマークすると、そのレイヤーで使用されているカラーは画面の詳細ビューに表示されません。
オーバーレイ
「インタラクション」をクリックすると、適用したオーバーレイのアートボードの詳細、スタイル、デザインとビューポートのサイズ、オーバーレイの位置、カラー、文字スタイル、ターゲット情報が表示されます。
インタラクションハイライト
Shift キーを押したままにすると、インタラクションのハイライトが表示されます。それらのハイライトを確認するには、「インタラクション」セクションに表示されているアーティファクトをクリックするか、Shift キーを押しながらそのインタラクションのハイライトをクリックします。
レイヤーの詳細ビュー
アートボードでレイヤーを選択すると、レイヤーの詳細ビューに切り替わります。プロパティインスペクターでは、レイヤー名に加え、寸法や外観などのプロパティを表示できます。
テキストとアピアランス
A. テキストのプロパティ:テキストの行を選択し、px、pt、dp など、デフォルトの単位が付いたテキストプロパティを表示します。
B. アピアランス:オブジェクトまたはテキストで使用されるカラーが「アピアランス」セクションに表示されます。
シェイプ
シェイプを選択して、次の属性を確認します。
- 幅、高さ、回転。
- カラー、境界線のサイズ、ダッシュ、ギャップ、ストローク、不透明度などの外観属性。
画像
画像を選択して、次の属性を確認します。
- 幅、高さ、回転。
- 不透明度。
部分テキスト
テキスト要素内のサブ範囲にポインターを合わせると、テキスト要素内の類似したサブ範囲がハイライトされます。
ハイパーリンク
オブジェクトハイパーリンク
- アートボード上のオブジェクトを選択すると、そのすべてのハイパーリンクがプロパティインスペクターの「インタラクション」セクションに表示されます。
- 「インタラクション」セクションのハイパーリンクにポインターを合わせると、アートボード上の関連するオブジェクトが示されます。
- ハイパーリンクの URL をクリップボードにコピーするには、オブジェクトの詳細セクションで、ハイパーリンクをクリックします。
- 「インタラクション」セクションでハイパーリンクをクリックすると、リンクが開きます。「インタラクション」セクションからハイパーリンクの URL をコピーするには、ハイパーリンクの URL を右クリックします。
- 「インタラクション」セクションで、https または mailto 以外のプロトコルを持つハイパーリンク、プロトコルを持たないハイパーリンク、無効なドメインを持つハイパーリンクをクリックした場合、URL は開かず、画面の下にエラーメッセージが表示されます。
- オブジェクトに複数のハイパーリンクインタラクションが定義されている場合、オブジェクトの詳細セクションからそれらをコピーすることはできません。「インタラクション」セクションのハイパーリンクをコピーするには、ハイパーリンクを右クリックします。
テキストハイパーリンク
- アートボード上でテキストオブジェクトを選択すると、プロパティインスペクター(「インタラクション」セクションとオブジェクトの詳細セクションの両方)に、そのオブジェクトに定義されているすべてのハイパーリンクインタラクションが表示されます。
- テキストオブジェクトに対して定義されたハイパーリンクのインタラクションは、他のオブジェクトのハイパーリンクを確認するのと同様の方法で確認できます。
- オブジェクト内のテキスト(部分テキスト)を選択したときに、そのテキストに個別のハイパーリンクがある場合は、オブジェクトの詳細セクションに個別のハイパーリンクの URL が表示されます。ただし、「インタラクション」セクションには、オブジェクトに対して定義されたハイパーリンクやその他のインタラクションが引き続き表示されます。
- 部分テキストのハイパーリンクの URL をクリップボードにコピーするには、オブジェクトの詳細セクションで、ハイパーリンクをクリックします。
XD のハイパーリンクについては、「ハイパーリンクの作成」を参照してください。
コードスニペット
CSS コード
- CSS コードを生成するには、XD アプリで共有/開発を選択し、「Web 用に書き出し」を選択してデザインスペックを公開します。
- CSS スニペットセクションからデザインの CSS コードを表示してコピーできます。
- コードスニペットをコピー&ペーストするには、スニペットをクリックしたままドラッグし、コードエディターに切り替えて貼り付けます。
HTML コード
- Lottie ファイルとビデオファイルの HTML コードを生成するには、XD アプリで共有/開発を選択し、「Web 用に書き出し」を選択してデザインスペックを公開します。
- HTML コードは、プロパティインスペクターの HTML セクションからコピーできます。
- コードスニペットをコピー&ペーストするには、スニペットをクリックしたままドラッグし、コードエディターに切り替えて貼り付けます。
コンポーネントのステート
- このリストでコンポーネントの非アクティブステートをクリックすると、アートボード上のステートとそのインタラクションが表示されます。
- コンポーネント名が長く、その一部しか表示されていない場合は、プロパティインスペクターで名前を選択してコピーします。
ダウンロード可能なコンポーネントのすべてのステートをダウンロードすることができます。XD アプリで、デザイナーがコンポーネントの複数のインスタンスを書き出し対象としてマークした場合、レイヤーパネルの最後にあるインスタンスのみが書き出されます。
非表示のレイヤー
- 特定の領域にポインター合わせて右クリックすると、そのピクセルポイントにあるレイヤーとそのコンテキストの詳細のリストが表示されます。
- グループ名が長く、その一部しか表示されていない場合は、プロパティインスペクターで名前を選択してコピーします。
詳細情報
XD のデザインスペックについて詳しくは、以下のビデオをご覧ください。
視聴時間:8 分
次のステップ
ここでは、デザインスペックの表示と確認の方法について説明しました。さらに一歩踏み込んで、デザインスペックの確認方法とデザインスペックからアセットを抽出する方法を確認してください。
ご質問または共有するアイデアがある場合