Adobe XDのシンボルの使い方：9つの基本機能

Adobe XDのシンボルを使えば、ドキュメント内に要素（または要素のグループ）のコピーを複数配置して、後から全部まとめて変更できます。デザインの中に、同じ要素の組み合わせが繰り返し登場する場合には、大きく時間を削減できる機能です。2017年6月のAdobe XDのアップデートからは、シンボルの上書きもできるようになっています。
この記事では、Adobe XDのシンボルの基本的な使い方をまとめて紹介します。

1. シンボルの作成

ドキュメント内のどの要素も、以下の3つの方法を使ってシンボルに変換できます。シンボルに変換すると、カンバス上では緑色の枠で表示されるようになります。

コンテキストメニューからシンボルを作成

2. シンボルの表示

作成したシンボルは、シンボルライブラリに表示されます。シンボルライブラリを使うと、シンボルの確認や管理を容易に行えます。シンボルライブラリを開くには以下のどちらかの操作を行います。

3. シンボルの再利用

作成したシンボルのドキュメント内での再利用は簡単です。以下の方法のどれでも、シンボルのコピーを新しく作成できます。

4. シンボルの編集

シンボルを編集して、ドキュメント内のすべてのコピーを一斉に変更できます。シンボルを編集するには、編集したいシンボルをダブルクリックします。シンボル内の要素の位置、大きさ、見た目などを変更すると、シンボルのコピーすべてに変更が反映されます。シンボルのマスターコピーは存在しません。どのコピーを編集しても、同じようにドキュメント内が変わることを確認できるでしょう。

背景色や要素の位置の変更がすべてのコピーに反映される

5. シンボルの上書き

シンボルのコピーはすべて連動していますが、テキストとビットマップは個別に設定可能です。つまり、シンボル内の文言や画像を上書きし、その他の見た目は、他のシンボルと同期された状態に保つことができます。シンボルを編集状態にして、テキストを変更したり、新しい画像をドロップして、コンテンツを上書きしましょう。

テキストと画像は個別に更新が可能

6. すべてのシンボルを更新

シンボルを個別に上書きできることは、とても便利です。しかし、すべてのコピーのテキストや画像を更新したいときはどうしたらよいでしょうか？「すべてのシンボルを更新」コマンドがその場合は役に立ちます。全シンボルに適用したいテキストと画像を持つシンボル上で右クリックして、コンテキストメニューから「すべてのシンボルを更新」を選択します。

コンテキストメニューからすべてのコピーのテキストを同期

7. シンボルの入れ子

シンボル内に別のシンボルを配置することで、再利用可能な階層構造のコンポーネントを作成できます。内側のシンボルだけを更新したり、シンボルの上書きを行うことで、複雑なコンポーネントの作成も可能です。

8. シンボルのグループ解除

同期させる必要が無くなったシンボルのコピーがあるときは、「シンボルをグループ解除」コマンドを使います。グループ解除された要素は、シンボルとのリンクが切れ、更新が同期されなくなります。以下のどちらかの方法を使って行います。

グループを解除すると、コピーへの変更が同期されなくなる

9. シンボルの削除

不要になったシンボルは、シンボルライブラリを開き、削除したいシンボル上で右クリックして、コンテキストメニューから「シンボルを削除」を選択すると削除されます。シンボルを削除しても、カンバス上に配置済みのシンボルのコピーはそのまま残りますが、それぞれが独立した要素となり、変更が他の要素に同期されることはありません。

シンボルのこれから？

Adobe XDのシンボルに欲しい機能が以下のリストにあればadobexd.uservoice.comに投票してください。または新しいアイデアがあれば提案してください。Adobe XDは皆さんからのフィードバックによりつくられています。

  1. シンボル名の変更
  2. シンボルの拡大／縮小と変形
  3. シンボルの入れ替え
  4. 色や透明度などのスタイルの上書き
  5. SVGサポート

※ この記事はWorking with Symbols in Adobe XD（著者:Jonathan Pimento）の抄訳です