Adobe XD コンポーネントを使った時短テクニック

みなさん、Adobe XDを使っていますか？

エイシスのデザインチームではWebデザインのプロトタイプを作る際によくAdobe XDを使用しています。

「プロトタイプ」モードで、作ったデザインにアクションやインタラクションを設定すれば、画面遷移などのシミュレーションが簡単にできます。便利ですよね。

例えばこういうメニューを作成して

それぞれにインタラクションを設定して…

別のぺージのメニューも設定して…

さらに別のページの…

……めんどくさい！！

ということにならないための機能「コンポーネント」のご紹介をしたいと思います。

コンポーネントとは

ボタンなど、UIのデザインのひな形のことです。1タッチで呼び出せて使いまわすことができます。
オブジェクトを選択して右クリック、「コンポーネントにする」を選択すると

選択したオブジェクトがコンポーネント化されます。コンポーネント欄に追加されたコンポーネントはボード上にドラッグ&ドロップで呼び出すことができます。

メインコンポーネントとインスタンスとオーバーライド

登録した大元のコンポーネントをメインコンポーネント、それを使いまわしたりコピーしたりしたものをインスタンスと呼びます。そしてインスタンスのプロパティを個別に編集したものをオーバーライド（上書き）といいます。ややこしいですね。

メインコンポーネントのプロパティを編集した場合、すべてのインスタンスに反映されます。個別にプロパティを編集しているオーバーライドには反映されません。

メインコンポーネントのインタラクションもインスタンスに反映される

ここがポイントです。

さきほどメインコンポーネントに編集を加えるとすべてのインスタンスに反映されると書きましたが、色やレイアウトの見た目だけでなく、インタラクションも反映されます。

冒頭で、めんどくさくなって投げ出したメニューのインタラクション設定も、コンポーネントを使えば楽に行うことができます。

メインコンポーネントのメニューにそれぞれインタラクションを設定し、

コピーして設置すると…

あら不思議

すべてのメニューにインタラクションが適切に設定されています！

最初の苦労はなんだったんだ…。

まとめ

今回はAdobe XDのコンポーネント（メインコンポーネント、インスタンス、オーバーライド）についてご紹介させていただきました。

コンポーネントをうまく使うことで大きな時短に繋がるのでぜひ活用していみてください。
次回はこのコンポーネントの便利な機能の1つ「ステート」についてご紹介したいと思います。

エイシスでは新サービスを立ち上げています！

株式会社エイシスでは、秋葉原から世界へ二次元コンテンツを共に盛り上げていく仲間を募集しています。
「新サービスを立ち上げていきたい！」
「新しいサービスのデザインに携わりたい！」
などなど、デザインチームの仕事やエイシスの社風に興味をお持ちいただけた方がいましたら是非お気軽にご応募くださいませ。