Adobe XDをもっと使いこなすヒント！ 第42回 アイコンからコンポーネントの種類を見分ける
Adobe XDをもっと使いこなすヒント！
この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、コンポーネントの状態を表すアイコンに関連する3つのツイートを紹介します。
Tip 1. マスターのアイコンとインスタンスのアイコン
#AdobeXD #ProTip Look in the upper left corner of a component to see whether or not it’s the master or an instance. The icon’s shape in the layers panel also identifies whether or not it’s a master component. @AdobeXD pic.twitter.com/0T9N4tR14s
— Elaine Chao (@elainecchao) November 18, 2019
アートボード上でコンポーネントを選択した時、左上に表示されるアイコンで、マスターコンポーネントとインスタンスを見分けることができます。塗りつぶされていればマスターです。線だけで塗りが無ければインスタンスを選択していると判断できます。
レイヤーパネル内でもアイコンに若干の差が付けられています。やや明るめに見えるのがマスターコンポーネントです。
Tip 2. レイヤーパネル内で展開したときの違い
#AdobeXD #ProTip If the icon in the layers panel is filled in, it means you can expand it like a folder to see and interact with its contents. @AdobeXD pic.twitter.com/FQhd5RF7Ys
— Elaine Chao (@elainecchao) November 19, 2019
レイヤーパネルでコンポーネントのアイコンをクリックすると、フォルダーのようにコンポーネントを展開することができます。その際、マスターコンポーネントのアイコンは濃いグレーで塗りつぶされたフラットな状態になりますが、インスタンスのアイコンは中央に薄いグレーの大きな円が表示されます。これを確認するように心がけると、レイヤーパネルで誤ってマスターコンポーネントを編集してしまう（あるいはその逆）といった状況を避けられます。
Tip 3. スタイルを上書きしたインスタンスのアイコン
#AdobeXD #ProTip If you have a style override on a component, you’ll see a dot in the middle of the indicator on both the canvas and in the layers panel. @AdobeXD pic.twitter.com/WZP56PpdPy
— Elaine Chao (@elainecchao) November 20, 2019
インスタンスのスタイルを上書きすると、アイコンの中央に点が表示され、マスターコンポーネントとは異なる状態であることが分かるようになっています。これは、アートボートとレイヤーパネルの両方で確認することができます。
いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？
次回をお楽しみに！