Adobe XDをもっと使いこなすヒント！第31回シンボルの作成と編集

Adobe XDをもっと使いこなすヒント！

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

Tip 1. オブジェクトをシンボルに変換する

#adobexd #protip Convert any object or set of objects to a reusable symbol by using Cmd+K (Mac) or Ctrl+K (Win). Appearance styles are linked across the symbols. @adobexd pic.twitter.com/tOxBIGx04f

— Elaine Chao (@elainecchao) February 14, 2019

いろんな場所で使うオブジェクトは、シンボルに変換してから配置すると、後からの変更が楽になります。上のビデオでは、シンボルに変換した後、コピーしたインスタンスを右隣に並べ、2つのインスタンスの色を同時に変更できる様子を示しています。

シンボルへの変換は、オブジェクトを選択してから、Cmd+K (Mac) または Ctrl+K (Win) を押下します。

Tip 2. シンボルを個別に編集する

#adobexd #protip As in repeat grid, text and bitmaps in symbols can be overridden, which means that they can be different in each instance of the symbol. Appearance properties still apply to all instances. @adobexd pic.twitter.com/WJQFXE6JwD

— Elaine Chao (@elainecchao) February 15, 2019

シンボルの見た目はすべてのインスタンスに共有されます。ただし、シンボル内のテキストとビットマップは、インスタンスごとに上書きすることが可能です。上のビデオでは、3つのインスタンス内のテキストを変更して、左から順に、「01」「02」「03」と並んだ状態をつくっているところです。

現時点では、テキストの文字とビットマップ画像以外を個別に変更することはできません。将来、個別編集できる要素をもっと増やす予定であることがXDチームから告げられています。

Tip 3. すべてのシンボルのインスタンスを上書きする

#adobexd #protip Want to ensure your overrides get pushed back to all of the other instances of your symbol? Select the symbol you want to use, right click, and select “Push Overrides.” @adobexd pic.twitter.com/HgBX4SU8C4

— Elaine Chao (@elainecchao) February 20, 2019

個別に編集できるのは便利ですが、シンボルのインスタンスを配置した後からテキストに間違いを見つけてしまったときなどに、一つひとつ修正するのでは面倒です。また、個別にインスタンスを編集した後に、すべて同じに戻したいという場合もあるかもしれません。

そんな場合は、インスタンスを右クリックして、「オーバーライドをプッシュ」を選択します。すると、そのシンボルのテキストとビットマップが、他のすべてのインスタンスに反映されます。

Tip 4. シンボルを他のシンボルと置き換える

#adobexd #protip Want to swap out all instances of a symbol with another one? Simply drag and drop the new symbol from the assets panel over the old one. The plus badge switches to an arrow to denote it’s swapping. @AdobeXD pic.twitter.com/L5UEIiE1Zh

— Elaine Chao (@elainecchao) February 20, 2019

あるシンボルのインスタンスを配置済みで、それらを全部まとめて他のシンボルのインスタンスと置き換えたい場合の使い方です。まず、アセットパネルを開いて、新しく配置したいシンボルをドラッグします。そして、置き換えたいインスタンスの上でドロップします。すると、同じシンボルのインスタンスはすべて、新しいシンボルのインスタンスと置き換えられます。上のビデオでその様子が確認できます。

シンボルの置き換え操作が行われるときは、インスタンス上に新しいシンボルをドラッグした時、置き換えることになる領域が半透明の青色の塗りで示されます。

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