オンラインイベント「XD Trail 部屋キャンプ」の第4回は、コンポーネント入門です！
Adobe XD に興味があって、実際に簡単なデザイン作業をする機会が欲しい人を対象に、コンポーネントを活用しながら効率よく作業を進める手順を全4パートにまとめたワークショップです。
ワークショップの内容
まずXDのコンポーネントの基本機能を確認してから、具体的なコンポーネントの利用方法の例を紹介します。最後に、コンポーネントを共有して作業する手順を紹介します。
（詳細は、動画再生エリアの右側に表示されるタイムラインを参照してください）
【 1. コンポーネントの基本機能】
XDのコンポーネントの基本的な使い方を学びます。
【 2. デザインが楽になるコンポーネントの使い方】
ボタンコンポーネントの作成と管理方法を紹介します。
【 3. デザインが楽になるコンポーネントの応用】
XDのレイアウト機能と組み合わせた実践的な使い方を紹介します。
【 4. コンポーネントを共有するワークフロー】
コンポーネントを他のファイルと共有して使う手順を紹介します。
当日のQ&A
★コンポーネント名に日本語を使っても問題ありませんか？
XD上であればまったく問題ありません。ただ、開発用に共有したときにもその名前が使われます。共有する相手と相談しておくとなお良いです。
★コンポーネントの数が多くなった場合、どのように管理するのですか？ フォルダ分けなどは可能でしょうか。
検索するしかありません。検索しやすいように名前に工夫しておくと良いです。
★コンポーネントとても便利ですが、どう活用されているのか知りたいです。事例集などのサイトはありますか？
XDのエバンジェリスト Howard Pinskyさんが作成した Component States UIキットがあります。こちらのページからダウンロードできます。
★インスタンスを間違ってグループ解除したとき、元に戻す方法はありますか？
Ctrl/Cmd+zで戻れれば確実ですが、それ以外の方法はありません。戻せないときにはインスタンスを新たに作ってコピー＆ペーストで内容を複製するのがオススメです。
★メインコンポーネントを探すのに便利な方法はありますか？
コンポーネントを選択して左上が緑色の菱形であればメインコンポーネントです。そうでなければプロパティインスペクターのコンポーネント欄に表示されている「メインコンポーネントを編集」アイコンを押してください。ショートカットキーはCmd/Ctrl+Shift+Kです。ライブラリパネルのコンポーネントを右クリックして「メインコンポーネントを編集」を選ぶ方法もあります。
★インスタンス側から、ライブラリパネルの該当するコンポーネントを判別する方法はありますか？
ドキュメントアセットを開いた状態にして、オブジェクトのコンテキストメニューから「アセットのコンポーネントを表示」を選びます。選択しているオブジェクトに含まれるすべてのコンポーネントがアセットパネルでマークされます。
★ステートの状態を忘れずに管理するための良い方法はありますか？
ステートを管理するための機能はないので、すべてのコンポーネントのそれぞれのステートを並べて、ステートのカタログのようなアートボードを作っておくと良いです。このカタログから「メインコンポーネントを編集」を選べば、狙ったステートを開いた状態でメインコンポーネントを編集できます。
★ホバーステートだけメインコンポーネントと同じ状態に戻すことはできますか？
はい。ステートは独立してリセットされるので、ホバーステートだけをメインコンポーネントと同じ状態に戻せます。
★メインコンポーネントを消しても復活しますが、消した状態でドキュメント保存してしまっても復活するのですか？
はい。ドキュメント自体にメインコンポーネントは保存されているので、キャンバス上に配置されていなくてもいつでも復活させられます。
★アセットパネルのコンポーネントを削除するとコンポーネントの定義自体が消えてしまうようですが、その理解で正しいでしょうか？復活させる方法はありますか？
その理解で正しいです。そのドキュメント上の、ローカルのコンポーネントの場合は復活させる方法はありません。リンクされたコンポーネントの場合は再度ドラッグしてくれば復活しますが、削除したときにインスタンスはグループになってしまうので完全に元に戻らないことにご注意ください。
★共有したコンポーネントを変更した場合、変更を共有相手のデザインに強制することはできますか？（ローカルのインスタンスのように）
XDでは強制はできません。ドキュメントに通知は行きます。コンポーネントとドキュメントは1対多の関係のため、プレビューした結果反映させられないというケースもあり得ますので、コミュニケーションして促すのがよいと思います。
★共有されたコンポーネントが更新されていることを確認するにはドキュメントアセットパネルを開くしかないのでしょうか？
閉じているときでもライブラリアイコン上に青丸のマークがつきますので、何かの変更があることは知ることができます。
★複数ドキュメントにメインコンポーネントをコピーしたいのですが、コピー＆ペーストしても子になってしまいます。メインコンポーネントのまま複製する方法はあるでしょうか？
ドキュメントアセットでコピーしたコンポーネントを右クリックして「ローカルを作成」を選ぶと、メインコンポーネントがそのドキュメントに作成されます。