Adobe XDをもっと使いこなすヒント！ 第40回 コンポーネントのキホン
Adobe XDをもっと使いこなすヒント！
この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、コンポーネントの基本的な使い方に関連する8つのツイートを紹介します。
Tip 1. オブジェクトをコンポーネントに変換する
#adobexd #protip New in the May release: components! Click on the + button in the assets panel or press Cmd+K (Mac) or Ctrl+K (Win) to convert your selection into a reusable component. @AdobeXD pic.twitter.com/6f3nJqRcnU
— Elaine Chao (@elainecchao) June 14, 2019
まずはオブジェクトをコンポーネントに変換する方法です。対象のオブジェクトを選択したら、アセットパネル内の「コンポーネント」の欄の右端にあるプラス（＋）ボタンをクリックすると、パネル内に新しいコンポーネントが追加されます。ショートカットキーは、Cmd+K（Mac）または Ctrl+K（Windows）です。
その際、変換されたコンポーネントの境界線が緑色に変わり、左上の角に緑色の◇が表示されます。この緑色の◇は「マスターコンポーネント（オリジナルのコンポーネント）」の印です。
Tip 2. コンポーネントのインスタンスを配置する
#adobexd #protip You can create a new instance of a component by either copying a component from the canvas or dragging a component from the assets panel onto the canvas. @adobexd pic.twitter.com/VDyUSZA05a
— Elaine Chao (@elainecchao) June 25, 2019
コンポーネントのインスタンスを配置する方法は2つあります。ひとつはアセットパネルからコンポーネントをアートボード上にドラッグする方法です。もうひとつは、アートボード上のコンポーネント（のインスタンス）を選択して、コピー&ペーストする方法です。
Tip 3. マスターコンポーネントを編集する
#adobexd #protip Master components have a badge in the upper left hand corner. If you edit the master component, all of its styles are propagated to other instances. @AdobeXD pic.twitter.com/bGQOPeJlOY
— Elaine Chao (@elainecchao) June 17, 2019
マスターコンポーネントのスタイルを編集すると、すべてのインスタンスに変更されたスタイルが反映されます。上の動画では背景の色を変更して、それが下の2つのインスタンスにも反映される様子を示しています。
#adobexd #protip If your master component isn’t on your artboard, you can give it focus by launching the context menu (right click/Cmd+click) and selecting “Edit Master Component.” This will move your focus over to the master component, even if it’s out of view. @adobexd pic.twitter.com/Wm3qSWniPw
— Elaine Chao (@elainecchao) June 24, 2019
マスターコンポーネントを編集したくてもどこにあるのか分からない場合は、適当なインスタンスの上で右クリックして、「マスターコンポーネントを編集」を選択します。すると、マスターコンポーネントが画面の中央に表示されます。
Tip 4. インスタンスの見た目を編集する
#adobexd #protip Component styles can be overridden. Change styles in any of the instances to override them; further changes to that particular style in the the master component will then not apply. However, all other styles will still be inherited! @adobexd pic.twitter.com/g1IxbbZo1E
— Elaine Chao (@elainecchao) June 18, 2019
インスタンスのスタイルは個別に編集（上書き）することが可能です。上の動画では片方のインスタンスの背景と角丸を変更しています。上書きされた属性は、マスターコンポーネントを編集しても同じにはなりません。
#adobexd #protip You can override text in your components – simply edit them, and they’ll be treated as an override! @adobexd pic.twitter.com/Umehz1lqJy
— Elaine Chao (@elainecchao) June 19, 2019
スタイルだけでなく、テキストも上書きが可能です。コンポーネント内のテキストフィールドをクリックして編集すれば、インスタンスごと異なる文言にすることができます。
#adobexd #protip Components are resized using the responsive resize. All of the other properties (like color) are inherited from the master component. @adobexd pic.twitter.com/zOdeXGF0IJ
— Elaine Chao (@elainecchao) June 20, 2019
サイズ変更についても同様の振る舞いです。個別にサイズ変更されたインスタンスは、マスターコンポーネントがリサイズされても、大きさが変わりません。なお、サイズ変更時は、レスポンシブリサイズの機能が使われます。
Tip 5. インスタンスへの変更をリセットする
#adobexd #protip Want to reset your component so that it matches your master component? Right click/Cmd+click over the component you want to update and select “Reset to Master Component.” @adobexd pic.twitter.com/hHMtMW73sH
— Elaine Chao (@elainecchao) June 21, 2019
スタイルを変更したインスタンスをマスターコンポーネントと同じ状態に戻したい場合は、インスタンスの上で右クリックして、「マスターコンポーネントに戻す」を選択します。
Tip 6. アセットパネル内のコンポーネントを探す
#adobexd #protip If you want to see which component is associated with the component you’re using, open the context menu over the object and select “Reveal Component in Assets.” @adobexd pic.twitter.com/ahdFnLb8IS
— Elaine Chao (@elainecchao) June 27, 2019
アートボード上のインスタンスから、アセットパネル内のコンポーネントを探すには、アセットパネルを開いた状態で、インスタンスを右クリックして、「アセットのコンポーネントを表示」を選択します。すると、該当するコンポーネントが青い枠で囲まれます。
Tip 7. コンポーネントが使われている場所を探す
#adobexd #protip Want to see where a particular component is used? Right click the component and select “Highlight on Canvas.” Combine with Zoom to Fit (Cmd+0 Mac, Ctrl+0 Win) to see everything in your document. @adobexd pic.twitter.com/6vFFeFNlkD
— Elaine Chao (@elainecchao) June 26, 2019
上のTipとは反対に、アセットパネル内のコンポーネントが、アートボードのどこで使われているかを調べたい場合は、上の動画のようにコンポーネントを右クリックして、「カンバスでハイライト」を選択します。すると、全アートボード上のすべてのインスタンスが太い青い線で囲まれます。
その後、Cmd/Ctrl+0キーを使ってドキュメント全体を表示すれば、すべてのインスタンスを確認できます。
いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？
次回をお楽しみに！