Adobe XDをもっと使いこなすヒント! 第40回 コンポーネントのキホン

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、コンポーネントの基本的な使い方に関連する8つのツイートを紹介します。

Tip 1. オブジェクトをコンポーネントに変換する

まずはオブジェクトをコンポーネントに変換する方法です。対象のオブジェクトを選択したら、アセットパネル内の「コンポーネント」の欄の右端にあるプラス(+)ボタンをクリックすると、パネル内に新しいコンポーネントが追加されます。ショートカットキーは、Cmd+K(Mac)または Ctrl+K(Windows)です。

その際、変換されたコンポーネントの境界線が緑色に変わり、左上の角に緑色の◇が表示されます。この緑色の◇は「マスターコンポーネント(オリジナルのコンポーネント)」の印です。

Tip 2. コンポーネントのインスタンスを配置する

コンポーネントのインスタンスを配置する方法は2つあります。ひとつはアセットパネルからコンポーネントをアートボード上にドラッグする方法です。もうひとつは、アートボード上のコンポーネント(のインスタンス)を選択して、コピー&ペーストする方法です。

Tip 3. マスターコンポーネントを編集する

マスターコンポーネントのスタイルを編集すると、すべてのインスタンスに変更されたスタイルが反映されます。上の動画では背景の色を変更して、それが下の2つのインスタンスにも反映される様子を示しています。

マスターコンポーネントを編集したくてもどこにあるのか分からない場合は、適当なインスタンスの上で右クリックして、「マスターコンポーネントを編集」を選択します。すると、マスターコンポーネントが画面の中央に表示されます。

Tip 4. インスタンスの見た目を編集する

インスタンスのスタイルは個別に編集(上書き)することが可能です。上の動画では片方のインスタンスの背景と角丸を変更しています。上書きされた属性は、マスターコンポーネントを編集しても同じにはなりません。

スタイルだけでなく、テキストも上書きが可能です。コンポーネント内のテキストフィールドをクリックして編集すれば、インスタンスごと異なる文言にすることができます。

サイズ変更についても同様の振る舞いです。個別にサイズ変更されたインスタンスは、マスターコンポーネントがリサイズされても、大きさが変わりません。なお、サイズ変更時は、レスポンシブリサイズの機能が使われます。

Tip 5. インスタンスへの変更をリセットする

スタイルを変更したインスタンスをマスターコンポーネントと同じ状態に戻したい場合は、インスタンスの上で右クリックして、「マスターコンポーネントに戻す」を選択します。

Tip 6. アセットパネル内のコンポーネントを探す

アートボード上のインスタンスから、アセットパネル内のコンポーネントを探すには、アセットパネルを開いた状態で、インスタンスを右クリックして、「アセットのコンポーネントを表示」を選択します。すると、該当するコンポーネントが青い枠で囲まれます。

Tip 7. コンポーネントが使われている場所を探す

上のTipとは反対に、アセットパネル内のコンポーネントが、アートボードのどこで使われているかを調べたい場合は、上の動画のようにコンポーネントを右クリックして、「カンバスでハイライト」を選択します。すると、全アートボード上のすべてのインスタンスが太い青い線で囲まれます。

その後、Cmd/Ctrl+0キーを使ってドキュメント全体を表示すれば、すべてのインスタンスを確認できます。


いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

POSTED ON 2019.10.17