この記事ではこれからXDの勉強を始めるにあたって知っておくべき機能を説明します。

初めてXDを触る際の初期導入についてはこちら

1. XDのツールバーと機能

※よく使う機能だけ記載します

①選択ツール

ショートカットキー:V

編集したい要素の編集に使用します。長方形要素であれば位置と大きさを、
文字要素であればフォント種類、文字の大きさを変更できます。

②選択ツール

ショートカットキー:R

長方形要素を生成します。

※長方形を生成する場合は、原則線のチェックを外すこと

③文字ツール

ショートカットキー:T

文字要素を生成します。

※文字フォントは日本語は「Noto Sans CJK JP」、英語は「Oswald」を主に使用します

④アセットパネル

アセットパネルを表示します。詳細は2.アセットパネル、レイヤーパネルにて説明します。

⑤レイヤー

レイヤーパネルを表示します。詳細は2.アセットパネル、レイヤーパネルにて説明します。

ex.1グループ化

ショートカットキー:Ctrl+G

※グループ化解除　Ctr＋Shift+G

グループ化とは生成した要素を一つのグループにまとめる機能です。

Ctrキー、Shiftキーを使用してグループ化したい要素を複数選択します。

その後にショートカットキー（Ctrl+G）で選択した各要素をグループ化出来ます。

グループ化された要素は単一の要素のように名前を変えたり、移動することができます。

グループの中の要素を選択することで、各要素の編集も可能です。

ex2.リピートグリッド

リピートグリッドとは指定した要素を手早く複製する機能です。

リピートグリッド化したい要素を選択（今回は名称「リピートグリッド」のグループ）し、

右上の「リピートグリッド」ボタンを選択します。

選択したグループがリピートグリッドになりました。

リピートグリッドは横方向か縦方向に伸ばすことで、要素を複製することができます。

複製された要素は色を同時に変更することや、

リピートグリッドを解除することで、複数のグループを生成できます。

2.アセットパネル、レイヤーパネル

2.1アセットパネル

ショートカットキー:Ctrl+Shift+Y

アセットパネルにはWebページの中で使用する色、パーツの登録を行います。

①カラーパネル

webページに使用する色を登録するパネルです。

登録方法

保存したい色を選択し、「アセットカラーを追加」を選択します。

アセットカラーが追加されました。

②コンポーネントパネル

webページによく使用するパーツを登録するパネルです。

登録方法

保存したいパーツを選択し、「コンポーネントにする」を選択します。

コンポーネントが追加されました。

ex3.コンポーネント詳細

コンポーネント（構成要素）とは何度も繰り返し使用するデザインを登録し、

インスタンス（実体）を生成する機能です。

HPレイアウト上にはコンポーネントは存在せず、コンポーネント群から

生成されたインスタンスで構成されます。

※ここでのマスターコンポーネントとはコンポーネントを一つのアートボードに纏めたものを指します

コンポーネントを内容を変更すると、そのコンポーネントから生成された

すべてのインスタンスの内容が変更されます。

コンポーネントの背景色を変更したので、すべてのインスタンスの背景色が変更されました。

生成されたインスタンスの内容を変更する事をオーバーライド（上書き）といいます。

インスタンス２の図形を変更したので、インスタンス２のアイコンのひし形が変化しました。

※オーバーライドされた要素をコンポーネント側から変更してもインスタンス側には変化はありません。

コンポーネントの背景色と文字を変更した結果、インスタンスの背景色と文字が変更されましたが、

オーバーライドをしているインスタンス２の文字は変更されませんでした。

2.2レイヤーパネル

ショートカットキー:Ctrl+Y

レイヤーパネルでは本アートボード及び、アートボード内の要素の編集が行えます。

ex4.レイヤー機能

生成した要素を階層状に積み上げる機能です。XDでは上の要素から順にワークスペース上に表示されます。

現在文字要素「レイヤー構造」は二つの長方形要素よりも

上の階層に存在しているため、文字がすべて表示されていますが、

レイヤーの順番を長方形２よりも下の階層に移動すると文字の一部が長方形要素に隠れ、

二つの長方形要素よりも下の階層に移動すると文字が完全に隠れてしまいます。