Lesson

CCライブラリを活用!Photoshopの精度とAdobe XDの速度を両立させるワークフロー - 全4回

アセットの使い回しに便利なAdobe XDのコンポーネント

このレッスンでは、コンポーネントを利用した効率的なデザイン変更の手順を解説します。

Adobe XDを起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。

コンポーネントの作成

カラーや文字スタイルは、デザイン全体のスタイルを変更したい場合に便利です。ですが、ボタンのスタイルだけを変えたいという場面ではコンポーネントが便利です。

オブジェクトを選択した状態でドキュメントアセットの「コンポーネント」の横にある+アイコンをクリックします。すると選択されていたオブジェクトがコンポーネントに変換され、ドキュメントアセットに追加されます。オブジェクトを右クリックして、コンテキストメニューからコンポーネントに変換することもできます。

ドキュメントアセットから作成したコンポーネントをアートボードにドラッグ&ドロップすると、コンポーネントをアートボード上に配置できます。

コンポーネントの編集

最初に作成したコンポーネントを「メインコンポーネント」と呼びます。コピーして配置したコンポーネントの複製は「インスタンス」と呼びます。メインコンポーネントを編集すると、それがすべてのインスタンスに同時に反映されます。ボタン、ページのヘッダー・フッターなど、繰り返し使われるパーツをコンポーネント化しておくと、後からの修正がとても楽になります。

メインコンポーネントを編集したいときは、ドキュメントアセット内で修正したいコンポーネントを選択し右クリックします。「メインコンポーネントを編集」を選ぶと、メインコンポーネントが選択された状態でワークスペース中央に表示されます。

インスタンスの編集

コンポーネントインスタンスは自由に編集できます。たとえばボタンをコンポーネントにして複数の箇所で使用する場合、それぞれのボタンのラベルに任意のテキストを設定できます。

インスタンスを編集しても、メインコンポーネントの編集はインスタンスに反映されます。ただし、インスタンス側で変更されている属性には反映されません。そのため、繰り返し使われる要素をコンポーネント化しておくと、インスタンスごと必要な修正を行いつつ、共通スタイルはメインコンポーネントで管理できるようになり、スタイル管理を効率的に行えます。

コンポーネントのホバーステート

コンポーネントの「ホバーステート」を使うと、Photoshopでは難しいマウスホバーの変化を表現できます。

メインコンポーネントを選択し、プロパティインスペクターの「コンポーネント(メイン)」欄の「初期設定のステート」の横にある+マークをクリックして、「ホバーステート」を選択します。

ホバーステートの見た目をマウスホバー時の見た目に変更し、プレビューウインドウを開くと、マウスをコンポーネント上に移動したときにコンポーネントの見た目が変化することを確認できます。