【Xd便利機能】ドキュメントアセットでデザインを管理する

【Xd便利機能】ドキュメントアセットでデザインを管理する

今回は最近知ったXdの「ドキュメントアセット機能」について紹介したいと思います!

Xdを作業するときつい左側をずっとレイヤーパネルにしちゃってこの機能を全く使っていなかったのですが他の人が作ったXdデータを見させてもらった時にこの機能を使っているのを見てなんて便利なんだ!と感動したので共有します。

 

ドキュメントアセットの追加と編集

 

ドキュメントアセットパネルでは、ドキュメント全体で再利用する一部のカラーや文字スタイル、コンポーネントを追加することができます。
これを追加することでメインカラーやベースカラー、フォントサイズや太さなどを1から選ぶことなくドキュメントアセットパネルから選択して流用することができるので、作業効率が格段に上がります!

 

ドキュメントアセットパネルでは、下記の3つを追加することができます。

  • カラー
  • 文字スタイル
  • コンポーネント

基本的には追加したいオブジェクトやグループを選択して「+」ボタンを押すだけで完了です。
使いたい色やコンポーネントはドキュメントアセットパネルから選択して簡単に使うことができます。

 

また、コンポーネントに追加したオブジェクトは、元のオブジェクトを編集すると、アセットパネルから追加した同じコンポーネントオブジェクトも一緒に反映されるので共通パーツを編集するときにとても便利です。
個別に修正したい場合は追加した元のオブジェクトじゃなければ個別に編集することも可能です。

 

追加したドキュメントアセットも、後から編集することやリストの順番を入れ替えたり名前を変えることも可能なので
よく使用するものをリストの上に置いたり見出しで使う文字スタイルのリスト名を「見出し」などにして第三者から見てもわかりやすくすることができます。

 

まとめ

 

いかがでしたでしょうか。
Xdのドキュメントアセット機能、使わないと損だと思うくらい便利な機能だと思います。

個人的にはシャドウ設定をここに追加できないのだけが不満ですが、それは今後のアップデートに期待することにします。

 

参考

Adobe XD でドキュメントアセットによる作業