動画の内容はテキストで読むこともできます

XDユーザーズガイドのテキストを読みながら学ぶとより理解できます

公式テキストを読む

Tutorial

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

この動画のサンプルファイル

share-navigate-design-specs.zip (143 MB)

開発用に共有されたリンクを開くと、全体像を把握できるグリッドビューおよびフロービュー、そして、開発に必要な情報が表示されるデザインスペックを利用できます。

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

グリッドビューでは、すべての画面のサムネイルがグリッド状に表示されます。アートボードを名前で検索したり、特定のアートボードからリンクされている画面の表示が可能です。

フロービューでは、アートボードの階層が表示されます。アートボードにカーソルを合わせて、他のアートボードとのリンクを表示することもできます。

スペックビューを表示するには、画面右上のコードアイコンをクリックします。スペックビューには、以下の項目が表示されます。

  • アートボードで使用されている色、文字スタイル
  • リンクされているアートボード
  • コピー&ペースト可能なCSSコードスニペット
  • トランジションやインタラクションの詳細
  • アートボードに対するコメント