デザインスペックリンクのさまざまなビューを移動する方法について説明します。

共有される開発リンクに、インタラクティブプロトタイプ情報がデザインスペックとともに追加され、機能がさらに充実しました。共有リンク内で、スペックを表示トグルアイコンをクリックすると、デザインスペックとプロトタイプビューが切り替わります。この新しい機能には、次の利点があります。

  • デザイナーは、デザイン意図を効率的に伝えることができ、開発者が構築に必要とするすべてのリソースを1つの共有リンクで提供できます。
  • 開発者は、インタラクションと意図された動作をより的確に理解できます。また、プロトタイプとデザインスペックを別個のリンクで共有する場合と異なり、リンクを頻繁に切り替える必要がないので、貴重な時間を節約できます。 
  • 開発者は、デザインスペックの表示をグリッドビューとフロービューとの間で簡単に切り替えることができます。

グリッドビューとフロービュー

すべてのアートボードのレイアウト情報を含むデザインフローの全体像を把握するために、グリッドビューとフロービューを切り替えることができます。

グリッドビューは、アートボードレイアウト情報がシンプルなグリッド形式で表示されているため、効率的にナビゲートできます。それに対して、フロービューでは、アートボードレイアウトとそのアーキテクチャが保持されます。

デフォルトのグリッドビューを表示するには、左上隅のグリッドアイコン をクリックします。グリッドビューフロービューを切り替えるには、画面の右上隅にある フロービューアイコンをクリックします。

グリッドビュー
グリッドビュー
フロービュー
フロービュー

グリッドビューでは、次の操作を実行できます。

  • すべての画面のサムネール表示
  • 特定のアートボードに対するコメント数を表示
  • 特定のアートボードを名前で検索
  • 特定のアートボードのリンクされた画面の表示。

フロービューでは、次の操作を実行できます。

  • デザインとレイアウトの階層を伝達
  • アートボードにカーソルを合わせて、リンクされたアートボードを表示

Adobe XD User Voice を使って、この新しい機能に関するフィードバックをお寄せください。

スペックビュー

スペックビューには使用されているアートボードの詳細、色、文字スタイルおよびターゲットが表示されます。折りたたみ可能な矢印を使用して、個々のセクションを折りたたみまたは展開できます。

プロパティパネルでは、次のものを表示できます。

  • アートボードの詳細、そのアートボードで使用されている固有の色や文字スタイル、そのアートボードにリンクされているターゲットアートボード。
  • デザインの CSS コードスニペット。開発者がコード内に直接コピー&ペーストできます。
  • 色や文字スタイルが使用されているインスタンス。対象にポインターを合わせます。
  • アートボードで使用されている色の 16 進カラーコードとカスタムラベル。
  • トランジション、オーバーレイ、音声、自動アニメーションなどの様々なインタラクションの詳細。 
  • アートボードに関連するコメント。 

画面下部には矢印キーとホームアイコンがあります。左向き矢印キーを押すと前のアートボードに移動し、右向き矢印キーを押すと次のアートボードに移動します。ホームアイコンをクリックするとホームアートボードに移動します。

デザインスペックに固有のキーボードショートカットについては、ショートカットキーを参照してください。

注意:

カスタムラベルは、デザイナーがアセットパネルでカラーラベル名を指定した場合にのみ確認できます。

スペックビュー
スペックビュー

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

リーガルノーティス   |   プライバシーポリシー