以前のAdobe XD リリースで導入された機能の概要については、機能の概要 | 以前のリリースを参照してください。
XD では、Adobe Photoshop との統合が強化されました。これにより、Photoshop で直接 XD 画像を開いて編集し、リアルタイムでそれらを更新できます。Photoshop で画像を編集して保存すると、XD により統合されたファイルが保存され、（編集されたファイルではなく）ビットマップが XD に配置されます。
詳しくは、外部アセットの操作を参照してください。
XD の最新リリースでは、デザインキャンバスと共に、XD ユーザーエクスペリエンス内から直接 XD プラグインを起動して操作できます。レイヤーおよびアセットパネルと同様に、新しいプラグインパネルでは XD 内からプラグインを簡単に表示して変更できます。これにより、XD デザインの作業中にクリエイティブフローを維持できます。
詳しくは、プラグインの表示とインストールを参照してください。
デザインの機能的な Web サイトへの変換を簡単にするために、デザインスペックから CSS コードスニペットをコピーして、コード内に貼り付けることができます。
CSS コードは、デザインスペックの公開時に開発用に共有ウィンドウで出力先として「Web」を選択した場合、自動的に生成されます。デザインスペックを公開すると、XD によって、選択したレイヤーの CSS コードスニペットが自動的に表示されます。
詳細については、XD でデザインスペックを確認するを参照してください。
コンポーネントでは様々なオーバーライドがサポートされ、様々な画面サイズに合わせてシームレスにサイズ変更されますが、効果を適用したりオブジェクトを再編成したりする際に使用が困難になる場合があります。以前のバージョンの XD では、元のマスターコンポーネントの境界外にオブジェクトを追加すると、コンテンツが切り取られました。
コンポーネントの境界に関する問題の解決策として、マスターコンポーネントを選択し、右クリックして「境界をコンテンツに合わせる」を選択します。コンポーネントの境界は、インスタンスだけでなくマスターコンポーネント内のすべてのクリップされたオブジェクトを表示するように調整されます。
コンポーネントを新規作成する場合：
- シャドウとぼかしは、コンポーネントバウンディングボックスの外でレンダリングされます。
- 境界領域は、コンポーネント内のすべてのコンテンツに合わせられます。
HiDPI 画面用に設計する場合、フラクショナルピクセルによりコンテンツが歪みます。XD 22.0 以降では、デザインの摩擦や画像の歪みをなくすために、オブジェクト、コンポーネント、画像マスクのグループのサイズを変更するときにピクセル値が丸められます。ただし、XD 22.0 より前に作成したコンテンツの小数値は XD により保持されます。
すべてのアートボードのレイアウト情報を含むデザインフローの全体像を把握するには、画面の左上にあるプロトタイプ名またはデザインスペック名をクリックします。デフォルトのグリッドビューから、グリッドビューとフロービューの間を切り替えて、次を表示することもできます。
- グリッドビューでは、すべてのアートボードがグリッド形式に配置して表示され、アートボードを確認したり、ナビゲートしたりすることができます。
- フロービューには、デザインとレイアウトの階層を表すように、アートボードが配置されます。
詳細については、XDでのデザインスペックのナビゲートを参照してください。
XD 21.0以降では、共有される開発リンクに、インタラクティブプロトタイプ情報がデザインスペックとともに追加され、機能がさらに充実しました。共有リンク内で、スペックを表示トグルアイコン
をクリックすると、デザインスペックとプロトタイプビューが切り替わります。
従来のバージョンのXDでは、デザイナーが、プロトタイプ用とデザインスペック用の2つの異なるリンクを別個に共有していました。開発者はデザイナーの意図を解釈するために、これら2つリンクを切り替えて表示せざるを得ず、コラボレーションが非効率的になっていました。
デザイナーは、デザイン意図を効率的に伝えることができ、開発者が構築に必要とするすべてのリソースを1つの共有リンクで提供できます。開発者は、インタラクションと意図された動作をより的確に理解できます。また、プロトタイプとデザインスペックを別個のリンクで共有する場合と異なり、リンクを頻繁に切り替える必要がないので、貴重な時間を節約できます。
A. スペックを表示トグルアイコン
詳細については、XDでのデザインスペックのナビゲートを参照してください。
Adobe XD 21.0では、デザインスペックのUXフロービューの代わりに、効率的に移動できるまったく新しいグリッドビューが採用されました。関係者や開発者は、プロトタイプやデザインスペックのグリッドビューを使用して、最も適切なアートボードにすばやく簡単に移動できます。
XDの以前のバージョンでは、プロトタイプビューでアートボードを1つ1つクリックして最適なアートボードを見つける必要がありました。
レビュー担当者は、グリッドビューで次の操作を実行できます。
- すべての画面のサムネール表示
- 特定のアートボードに対するコメント数の表示
- アートボードを名前で検索
- リンクされた画面アイコンをクリックして、特定のアートボードにリンクされたすべての画面を表示
これらの変更は、以下の点で開発者や利害関係者にとって有益です。
- 開発者：UX フローの代わりに、シンプルかつ統一的なビューですべてのアートボードを表示できます。
- 関係者：複数の画面でXDプロトタイプの間を移動し、最も適切なプロトタイプのパーツにジャンプできます
A. アートボードに対するコメント数 B. リンクされた画面のアイコンをクリックすると、リンクされた画面が表示されます C. アートボード「First Cards」にリンクされた画面
詳細については、XDでのデザインスペックのナビゲートおよびXD でのプロトタイプの操作を参照してください。
クラウドドキュメントに対する編集の競合と作業の重複を避けるために、XDでは、他のデザイナーが同じクラウドドキュメントを使用していることを示す視覚的インジケータが導入されました。デザイナーは、同じクラウドドキュメントで作業している他のデザイナーのプロフィールアバターを表示できます。
ドキュメントプレゼンスについて詳しくは、XDのクラウドドキュメントを参照してください。
レビュー担当者の多くが、外出先からモバイルデバイスでプロトタイプにアクセスして、コメントを追加し、他のユーザーの意見を参照したいと考えています。
この最新リリースのXDでは、デスクトップWebブラウザーからだけでなく、モバイルデバイスからもWebプロトタイプを表示してコメントできます。これにより、レビューサイクルが迅速化され、関係者がタイムリーかつ適切なタイミングで容易にフィードバックを提供できます。
詳細については、Adobe XDでのプロトタイプの操作を参照してください。
XD 21.0以降では、テキスト要素に複数のスタイルが設定されている場合、テキスト要素内の一部分にカーソルを合わせると、テキスト要素内で、同じスタイルが設定された類似の部分がデザインスペックにより強調表示され、以前と同様、それらの個別のプロパティにアクセスできます。以前は、テキスト要素内で複数のテキストスタイルが使用されている場合、それらのスタイルを分離し、どの部分が同じスタイルを使用しているかを解明することはできませんでした。
詳細については、XDでデザインスペックを確認するを参照してください。
Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。