本日はちょっと「Adobe XD」使い方＆考察的な内容を。
日々進化し続ける「Pando（パンドゥ）」ですが、進化の中でデザインも更新・刷新されていきます。
やはりこのような規模のサービスを運用するためには【デザインシステム】と呼ばれる「デザインの運用ルール」を設計する必要が出てきます。
弊社でも本格的に【デザインシステム】の運用を検討する段階に入っているのですが、ちょうどいいタイミングで「Adobe XD」のアップデート内容に「デザインシステムの作成とメンテナンス」というものが含まれており、弊社は既にデザイン作成時にはXDを必須としており、それらを活用した【デザインシステム】を考案しよう、となりました（私の中でｗ）。
まずその第一歩として、【デザインシステム】構築に必要な機能のうち、近日のXDアップデートで刷新・追加された部分を中心に、機能のおさらいをしてみようと思います。
XDの使い方的な内容になるので、XD初心者の方にもご理解いただける内容かと思います。
「シンボル」は「コンポーネント」に
2019年5月のアップデートで、「シンボル」は「コンポーネント」に名を改め進化しました。
一言で言うと、編集の柔軟性が増した、ということのようです。
マスターコンポーネント
作成したパーツなどを「コンポーネント化」するのは、これまでと同じような手順。
作成したパーツ上で右クリックして「コンポーネントにする（Ctrl＋K）」。
この最初に「コンポーネント化」したものは、「マスターコンポーネント」と呼ばれ、左上にダイヤ型のアイコンが付きます。
「マスターコンポーネント」から複製したり、コンポーネントパネルから設置したものは、「（コピー）コンポーネント」になります。
「マスターコンポーネント」はアートボード上から削除してもファイル内には残っていて、アートボードに配置していなくてもコンポーネントパネルから呼び出せます。
コンポーネントの編集
「マスターコンポーネント」と「（コピー）コンポーネント」では、編集の扱いが異なります。
上記は一番上が「マスターコンポーネント」です。
「マスターコンポーネント」の変更は全てのコンポーネントに適応されますが、「（コピー）コンポーネント」の変更はそのコンポーネントにのみ適応されます。
「デザインシステム」としてのコンポーネント
コンポーネントはコンポーネントを内包することが出来、それぞれが独立して連動します。
以下の例は、アトミックデザイン的発想でボタンとラジオボタンをデザインしたものですが、ボタン全体の変更とラジオボタンのみの変更を使い分けることが出来ます。
このようにしてコンポーネントを組み合わせてデザインを行うと、効率的に運用ができそうです。
XDファイルの共有と編集
編集者の追加
「コンポーネント」化されたデザインパーツをXDに配置して「ステッカーシート（とAdobeさんは呼んでいるよう）」を作成します。
XD画面の右上
【共有】→編集者を追加
でメールアドレスを入力（Adobeアカウントのメアド？）
すると、追加した編集者（メールアドレスの相手）に、メールとAdobeCCの通知が届きます。
これで相手も「ステッカーシート」を開けます。
共有ファイルはクラウドドキュメントとして保存
XDフィルを共有するためには、そのXDファイルをクラウドドキュメントとして保存する必要があります。
もしファイルがローカル保存されているものだった場合、クラウドドキュメントとして保存されることを促す画面が表示されます。
もし会社のセキュリティポリシーなどで、XDファイルのクラウドへのアップロードが制限されている場合は、社内共有ドライブなどで運用するしかないですね・・・。
編集と通知
共有したXDは、編集者全員が編集可能（当たり前ｗ）で、誰かが編集を加えて保存すると、それ以外の人物のXDには通知が出ます。（開いている状態だとリアルタイムで表示）
「ステッカーシート」として作成したXDファイルを上記手順で共有することで、そのプロジェクトの「スタイルガイド」を共有したことになるので、デザインパーツの追加や更新などをこの「スタイルガイド」をベースとして管理・運用ができると想像できます。
更にそれらにチームごとの運用ルールなどを設定すれば、【デザインシステム】として運用が可能になる、ということでしょう。
「スタイルガイド」の「コンポーネント」を流用
「コンポーネント」は当然、別のXDファイルでも利用（コピー）可能です。
方法はいたって簡単。
- 「スタイルガイド（ステッカーシート）」を開き、レイアウトされている「コンポーネント」をコピー。
- コピー先のXDファイルを開く
- コピー先にペースト
これだけ。
コピー元の「コンポーネント」は「マスターコンポーネント」である必要はありません。
これで設置した「コンポーネント」は【リンクされたコンポーネント】という扱いになり、緑のリンクアイコンが付いた状態で表示されます。
コピー元のファイルから「コンポーネント」が削除されたりして参照できなくなると、アイコンが赤くなります。
その場合は、コンポーネントのリンクを解除して、再度コンポーネント化する、などすればいいでしょう。
（いちおう赤アイコン状態でも編集は可能）
このようにすれば、複数の作業者が「スタイルガイド」をベースにデザイン作成が行なえ、コピーした「コンポーネント」は「ステッカーシート」で一元管理されるので、全体的な更新が発生してもすぐさま全てに反映させることが出来ます。
まとめ
- まず「デザインシステム」の根幹となる「スタイルガイド（ステッカーシート）」を作成する
- 「スタイルガイド（ステッカーシート）」内のパーツたちを「コンポーネント化」する
- 「スタイルガイド（ステッカーシート）」をチーム内で共有する
- ルールを設定して、「スタイルガイド（ステッカーシート）」を運用・管理する
- 「スタイルガイド（ステッカーシート）」をベースにして、新たなXD（デザインカンプ）」を作成する
- XDファイルの一覧を何かしらの方法で管理する（弊社はスプレッドシートを利用）
と、解説してないことをしれっと入れてますがｗ
いずれにしても「運用ルール」の設定は絶対不可欠なので、これはちゃんと最初に考えたほうが良いと思います。
いずれ記事にする機会があれば・・・
「XDファイルの一覧を何かしらの方法で管理する」は、弊社の「Pando（パンドゥ）」も現時点でそうなっていますが、ある程度以上の規模のサイトだとXDファイルの数が3桁いってもおかしくないです。
ちゃんと管理しないと訳が分からなくなるので、弊社の場合は、用途・名称と作成者、プレビューURL＆デザインスペックURLなどを一覧にしたものをスプレッドシートで管理・運用しています。
次回がいつになるか不明ですが（汗）、次回はもう少し踏み込んだ内容を執筆すると思います。
期待せずにお待ち下さい・・・ｗ
＝うしお＝
