デザインスペックのナビゲート

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

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

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

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

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

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

スペックビュー

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

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

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

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

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