Adobe XDをもっと使いこなすヒント! 第42回 アイコンからコンポーネントの種類を見分ける

Creative Cloud UI/UX & Web

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

Tip 1. マスターのアイコンとインスタンスのアイコン

アートボード上でコンポーネントを選択した時、左上に表示されるアイコンで、マスターコンポーネントとインスタンスを見分けることができます。塗りつぶされていればマスターです。線だけで塗りが無ければインスタンスを選択していると判断できます。

レイヤーパネル内でもアイコンに若干の差が付けられています。やや明るめに見えるのがマスターコンポーネントです。

Tip 2. レイヤーパネル内で展開したときの違い

レイヤーパネルでコンポーネントのアイコンをクリックすると、フォルダーのようにコンポーネントを展開することができます。その際、マスターコンポーネントのアイコンは濃いグレーで塗りつぶされたフラットな状態になりますが、インスタンスのアイコンは中央に薄いグレーの大きな円が表示されます。これを確認するように心がけると、レイヤーパネルで誤ってマスターコンポーネントを編集してしまう(あるいはその逆)といった状況を避けられます。

Tip 3. スタイルを上書きしたインスタンスのアイコン

インスタンスのスタイルを上書きすると、アイコンの中央に点が表示され、マスターコンポーネントとは異なる状態であることが分かるようになっています。これは、アートボートとレイヤーパネルの両方で確認することができます。


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

次回をお楽しみに!

POSTED ON 2019.12.12

Products Featured

  • Adobe XD

Tags

タグはありません