XDの多彩な機能を、個別に動画で学ぶすべてUIデザインプロトタイピング共有デザインシステム機能拡張とツール連携まずはここから。オブジェクトへカラーの塗りを適用するには、まずオブジェクトを選択して、次にカラーピッカーを表示します。カラーフィールドとカラースライダーを使用して色を調整する...UIデザイン繰り返しオブジェクトの作成リピートグリッド機能は、カードUIの様にオブジェクトを繰り返し配置するデザインの作成を効率化します。1/3(ホバーステート)コンポーネントに複数のステートを追加すると、ユーザーの操作によって外観が変化するインタラクティブなコンポーネントを開発できます。ページを開いたりメールアプリを起動するハイパーリンクを作成できます。ライブラリの利用が唯一の方法となります。動画を埋め込んだプロトタイプを作成し、レビュー用に共有できます。アニメーションを配置して、プロトタイプとして共有できます。共有したいアートボードを選択すると、ワンクリックで共有リンクを作成できます。ドキュメントに複数のインタラクションのフローを定義できます。フローの定義はプロトタイプモードで行います。XDでは、プロトタイプに音声によるテキストの読み上げや、オーディオを使用した効果音を追加できます。XDは、音声を使って体験をデザインし、音声機能付きプロトタイプを共有できます。UI(VUI)のプロトタイプを作成できます。そのための機能のひとつが、音声をトリガーとする音声コマンドです。キー入力により操作できるプロトタイプを作成する機能があります。設定はプロトタイプモードで行います。ライブラリから入手できる場合、それを自動的にアクティベートします。操作する必要はありません。使用しなくなっ...機能拡張とツール連携デザイントークンを使用するドキュメントアセットとして登録したカラーや文字スタイルには名前を付けることができます。2/2(スタックの使用方法)スタックはネストして利用できます。1/2(スタックの作成方法)スタックを利用するには、グループまたはコンポーネントのレスポンシブサイズ変更を有効にします。変形はプロトタイプの動きの表現に利用できます。立体感のある動きが欲しいときに有効な使い方です。同じオブジェクトを配置した2つのアートボードを用意します。軸方向に移動できるようになります。列パネルを使用すると、オブジェクトを整列させたり、等間隔に並べることができます。整列に使用できるオプションは以下の通りです。オブジェクトを描画すると、描画した順に手前に表示されます。レイヤーパネル内のレイヤーは、オブジェクトの重なり順に並べられています。最前面に表示されているオブ...UIデザインオブジェクトの移動オブジェクトの移動には、いくつかの方法が利用できます。キーを押しながら選択されたオブジェクトをドラッグします。編集/複製をクリックしてオブジェクトを複...UIデザインオブジェクトのグループ化、ロック複数のオブジェクトをグループ化すると、まとめて移動や拡大縮小したり、線の塗りなどのプロパティを変更できます。グループ化するには、対象のオブジェクトをすべて選択した状態で右クリックし...UIデザインシェイプでマスクを作成マスクを使用すると、画像またはオブジェクトの一部を任意の形に切り取り、デザイン要素として利用できます。マスクとして使用するシェイプを描画します。単純なシェイプの組み合わせから複雑なシェイプを作成することができます。種類のグリッドが利用できます。方眼グリッドはマス目に沿って、レイアウトグリッドはカラムに沿って、オブジェクトを整列し...UIデザインガイドの操作アートボードの左端にカーソルを合わせると両方向矢印が表示されます。そのまま右にドラッグ&ドロップすると垂直方向のガイドを作成できます。2/2(サイズ変更、移動、ズーム)アートボードを選択するには、選択ツールを使用して、アートボードのタイトルをクリック、またはアートボードの背景をダブルクリックします。ドキュメントには複数のアートボードを含めることができます。モバイル、タブレット、デスクトップ用など異なるサイズのアートボードを並べることもできます。両方向へのスクロールを指定できます。スクロールグループを作成するに...UIデザインスクロール可能なアートボードの作成アートボードの長さが足りないために、コンテンツをすべて配置できない場合、アートボードを長くしてスクロール可能にすることができます。XDのブレンド効果を使用すると、複数レイヤーを組み合わせて、目を引くユニークな効果をつくり出したり、画像を自然に合成することができます。XDでは、オブジェクト全体をぼかしたり、オブジェクトにぼかしマスクを追加することができます。レイヤーパネルを開くと、アートボード一覧を表示したり、作業中のアートボードに関連付けられたレイヤーを確認できます。2/2(追加、並び替え、グループ化、名前変更など)ドキュメント内のオブジェクトは、それぞれ個別のレイヤー内に配置されます。そのため、レイヤーをグループすると、それらのレイヤーに含まれるオブジェクトをグループ化できます。1/3(長方形)長方形や正方形を描画するには、長方形ツールを選択します。アートボード上で希望のサイズになるまで斜めにドラッグすると長方形を描画できます。2/3(楕円形、多角形)楕円や円を描画するには、楕円形ツールを選択します。アートボード上で希望のサイズになるまで斜めにドラッグすると楕円を描画できます。3/3(線、ペン)線ツールを選択し、始点をクリックして終点までドラッグすると、直線を描画できます。キーを押しながらドラッグすると、水平、垂直、45度の線を描画できます。1/2(選択)オブジェクトを選択するには、選択ツールを使い、目的のオブジェクトをクリックします。2/2(サイズ変更と回転)オブジェクトのサイズを変更するには、オブジェクトを選択して、丸形のハンドルをドラッグします。オブジェクトへカラーの塗りを適用するには、まずオブジェクトを選択して、次にカラーピッカーを表示します。オブジェクトへ線を適用するには、まずオブジェクトを選択します。オブジェクトにドロップシャドウを追加するには、対象のオブジェクトを選択し、プロパティインスペクターの「ドロップシャドウ」をクリックして有効にします。1/2(テキストの作成と編集)テキストツールを選択し、テキストを開始する場所をクリックすると、テキスト入力を開始できます。2/2(その他の機能)テキスト変換として適用可能なオプションには、テキストを「すべて大文字/小文字にする」、「単語の先頭の文字のみ大文字にする」、「上付き文字や下付き文字にする」が用意されていあます。テ...UIデザイン繰り返しオブジェクトの作成リピートグリッド機能は、カードUIの様にオブジェクトを繰り返し配置するデザインの作成を効率化します。近年では数々な解像度を持つデバイス向けのデザインを作成する必要があります。1/3(ホバーステート)コンポーネントに複数のステートを追加すると、ユーザーの操作によって外観が変化するインタラクティブなコンポーネントを開発できます。グループまたはコンポーネントに固定パディング値を設定できます、パディングを固定すると、コンテンツに応じて自動的に背景の大きさが変わります。2/3(インタラクションの追加)コンポーネントのステートにインタラクションを指定して、タップ操作で表示するステートを切り替えることが可能です。3/3(リピートグリッドでの応用)マスターコンポーネントに追加されたステートは、そのコピーであるインスタンスでも利用できます。ホーム画面、すなわち最初に表示される画面を設定します。2/2(画面遷移のアニメーション)画面遷移のインタラクションにはデフォルトで「ディゾルブ」のアニメーションが設定されています。XDのプロトタイプでは、アートボードの上に別のアートボードを重ねて表示できます。ドロップダウンリスト、入力用キーボードなどの表現に便利です。作業中のデザインをレビューしたり、保存済みのクラウドドキュメントを確認することが可能です。デスクトッププレビューを使用して、プロトタイプに設定したインタラクションをプレビューできます。プレビューウィンドウを表示するには、デザインモードまたはプロトタイ...プロトタイピングリピートグリッドを使ったインタラクションの作成リピートグリッドから他のアートボードへの接続は、3種類の方法が選べます。1/3(フェードイン/アウト)自動アニメーションを使用すると、流れるようなトランジションを作成して、アートボード間のコンテンツの関係を視覚的に表現できます。2/3(拡大縮小のアニメーション)自動アニメーションでは、移動元と移動先のオブジェクトの種類、レイヤー名、グループの階層が一致している場合、そのオブジェクトの属性が自動的にアニメーション化されます。3/3(ドラッグトリガー)自動アニメーションとドラッグトリガーを組み合わせると、実際のドラッグ操作のようなインタラクションを作成できます。1/2(時間トリガーの基本)時間トリガーを使用して、時間の経過により自動的に発生するアートボード間のトランジションを作成できます。2/2(自動ループの作成)時間トリガーをアクションと組み合わせて使用すると、ループアニメーションを作成できます。共有モードで「デザインレビュー」のリンクを作成すると、プロトタイプを共有して簡単にレビューを行えます。共有されたリンクを入力して、ブラウザーにプロトタイプを表示します。共有モードでは、作成したデザインを関係者に共有するリンクの管理を行います。つのシナリオ、またはカスタムから目的に合うものを選択して、共有リンクを作成しま...共有デザインスペックからのデザイン素材の書き出し書き出し用にマークされたレイヤーは、共有リンクから画像としてダウンロードできます。書き出し用にマークするには、カンバス上でオブジェクトを選択して右クリックし、コンテキストメニューか...共有デザインスペックのナビゲート開発用に共有されたリンクを開くと、全体像を把握できるグリッドビューおよびフロービュー、そして、開発に必要な情報が表示されるデザインスペックを利用できます。グリッドビューを表示する...共有デザインスペックのレビューとコメント表示設定に「開発」を指定して共有した場合も、「デザインレビュー」と同じコメント機能を利用できます。デザインにコメントを付け、ピンを使用してコメントの正確な位置を示すことが可能です。XDでは、オブジェクトの高さ、幅、位置、スタイルなどを、デザインスペックとして共有できます。デザインスペックの共有は「共有」モードで行います。プロパティインスペクター...共有デザインスペックを確認する表示設定に「開発」を指定して共有されたリンクは、スペックモードを表示できます。クラウドドキュメントクラウドドキュメントとして保存すると、複数のデバイスからの共有や、他のデザイナーとの共同作業、バージョン管理が可能になります。2/2(文字スタイルの登録と利用)文字スタイルをアセットとして追加するには、カンバス上のテキストを選択して、ライブラリパネル内の「文字スタイル」の横にある「+」アイコンをクリックします。1/2(カラーの登録と利用)ライブラリパネルには、カラー、文字スタイル、コンポーネントが登録できます。1/3(作成方法)デザイン全体で繰り返される要素を作成するとき、コンポーネントを使うと柔軟に効率よく作業することができます。2/3(インスタンスのカスタマイズ)作成したメインコンポーネントのすべてのコピーをインスタンスと呼びます。複数のデザイナーが関わるときは、一貫性を保つことが困難かつ重要になります。2/2(カラー、文字スタイルの適用と編集)リンクされたカラーや文字スタイルは、通常のアセットと同じようにカンバス上のオブジェクトに適用できます。1/2(外部ドキュメントのコンポーネントの読み込み)コンポーネントもカラーや文字スタイルと同様、他のドキュメントからリンクして使うことができます。2/2(メインコンポーネントの変更と更新の適用)ソースドキュメントでマスターコンポーネントを編集するには、アセットパネルまたはカンバス上でコンポーネントを右クリックして、「元のドキュメントでマスターを編集」を選択します。プロトタイプにアンカーリンクを作成し、アートボードの特定の位置にスクロールする動作を設定できます。Cloudライブラリを使うと、他のアプリとデザインアセットを共有できます。XDでCCライブラリを開き、PhotoshopやIllustratorなどから共有された...機能拡張とツール連携プラグインの作成と管理プラグインの検索は、プラグイン管理画面から行えます。プラグインパネル右上の(+)アイコンをクリックすると、プラグイン管理画面を表示できます。ファイルとして保存されているデザイン素材を読み込めます。取り込むには、次のいずれかの方法を使用します。取り込むには、次のいずれかの方法を使用します。取り込むには、次のいずれかの方法を使用します。ライブラリのグラフィックを右クリックして「編集」を選択します。ドキュメントで利用することができます。1/3(コピー&ペーストと編集)PhotoshopからXD素材を読み込むにはいくつかの方法があります。簡単な方法は、Photoshop内の画像をコピーして、それをXDにペーストすることです。2/3(PSDファイルを開く方法と読み込む方法)Photoshop(.PSD)ドキュメントをXDで開くと、レイヤー構造が保たれたまま、XDでPhotoshopのデザインを扱えます。3/3(CCライブラリを利用した連携)PhotoshopからレイヤーをCCライブラリにグラフィックとして追加すると、XDのCCライブラリからアクセスして、カンバスに配置することができます。CCライブラリ経由で共有され...機能拡張とツール連携XDとIllustratorとの連携Illustratorから素材を読み込むにはいくつかの方法があります。簡単な方法は、Illustratorの素材をXDにコピー&ペーストすることです。アドビおよびサードパーティが開発したさまざまなプラグインを追加できます。利用条件Cookieについて。