【デザインシステム考察:Vol.2】Adobe XD+クラウドでスタイルガイドを一元管理

8 AdobeXD ウェブデザイン デザインシステム スタイルガイド

いいね

こんにちは。
株式会社クインテット・牛尾です。

前回の記事」で「Adobe XD」のコンポーネントについて解説したのですが、今回は前回の内容の補足として、「スタイルガイド」のクラウド共有を活用したアセットの一元管理の方法について解説します。

これは単独作業でも複数人作業でも、どちらでも使えるものだと思います。



一元管理の概略

「Adobe XD」には、クラウドファイルとして保存されたXDファイルのアセットをインポートする、という機能があるので、それを活用します。
大まかなステップは以下。

  1. 元となる(=一元管理する元データ)「スタイルガイド」を作成
  2. 「スタイルガイド」をグループ内で共有
  3. XDの新規作成時にアセットをインポート
  4. デザインに変更や追加があった場合、「スタイルガイド」を更新
  5. 各自、XDファイルに更新を反映

といった感じです。
以下、このステップに従って解説します。

まぁ最も重要なのは、どうやって運用するかという使用目的と運用ルールの設計、だと思うんですけどね・・・。


「スタイルガイド」の作成

「スタイルガイド」の定義や内容は、組織ごとやプロジェクトごとにもよって変わると思いますので、定義そのものは割愛しますが、基本的にデザインに必要な要素・設定(色、サイズ、レイアウト、パーツなど)が網羅されていることが前提になると思います。

弊社で運用する独自フレームワークの思想に則った例は以下のような感じ。
(今回のために作ったサンプルなので、実運用されているものとは異なります)

ちょっと分かりにくいですが、左のアセットパネルに、共有が必要な「カラー」「文字スタイル」「コンポーネント」を全て登録しておきます。

このアセットパネルに登録されたアセット群が、このあと別のXDに共有されるので、アセット化していないと意味ないです。

まぁ経験上、いきなりこれを作成するってのはないかもですね。
基本的には、ラフ作ってデザインOK出た段階で、デザインを横展開する前に作成する、とか?
これも組織のルールやフローによっても変わるでしょうね。

ただ、上記もサンプルなので、運用レベルの「スタイルガイド」としては不足だらけなのですが、運用レベルの「スタイルガイド」については、Adobeさん公式ブログの「Semantic UIキット開発」の記事を参考にすると良いと思います。

https://blogs.adobe.com/japan/cc-web-semantic-ui-kit-xd-icons-templates-design-system/

配布されている「Semantic UI Kit」の完成度は半端ないです・・・!


「スタイルガイド」をグループ内で共有

この方法は、前回の記事で紹介したとおりです。

注意点としては、「スタイルガイドの共有=アセットの共有」は、元ファイルが「クラウドファイルとして保存」されている必要がある、という点です。


アセットのインポート

(最新バージョンの)XDファイルを新規作成すると、左側のアセットパネルに

このように表示されるので、【アセットをリンク】をクリックすると・・・

と表示されるので、インポート元のXDファイルを選択。
(この場合、「【サンプル】スタイルガイド」を選択)

そうすると、「アセットパネル」に、参照元のアセット群が共有されます。

(アニメーションしてるんで分かりづらいですがw)右側にリンクアイコンが付いています。

ちなみに、端末に存在しないフォントが使われている場合、ちゃんと警告が出るようです。

注意点

「リンクされたアセット」は、基本的に参照元をまるごと共有しているので、「編集」や「削除」が出来ません

「編集」「削除」は参照元のファイルを変更する必要があります。

なので、アセットに不要なものが混ざっているとそれも共有されているので、参照元の「スタイルガイド」に何をアセット登録するかも重要になってきます。

あと、(発動条件が不明ですが)アセットの並び順がバラバラになってインポートされる時があるみたいなので、そのときは、インポートをやり直せばいいっぽいです。

既存ファイルでアセットをインポート

最初の概略のステップで「新規作成時」と書いてますが、既存ファイルでも追加は可能です。

アセットパネルの右の+アイコンをクリックすると、同じようにインポートするXDファイルの選択が表示されます。


「スタイルガイド」の更新

先程も書いたとおり、「リンクされたアセット」の更新は、参照元ファイルで行う必要があり、アセットを右クリックした場合の項目が変わります。


アセットの更新通知

前回の記事で書いた「リンクされたコンポーネント」の変更通知と同じく、アセット群が元ファイルで更新された場合は、即座にインポート先のXDにも通知が出ます。

↑「スタイルガイド(参照元)」自体を誰かが更新した場合は、上記通知が。

↑インポート先のXDには「アセットパネル」の下部に、上記が表示されます。




以上となります。


このようにして「アセット群」を共有することで、トンマナの統一やパーツの流用などがスムーズに行えるので、単独作業でもチーム作業でも、作業が捗ること間違いなしです!

ただし、何度も言いますが、重要なのは使用目的と運用ルールの設計です。

これが出来ないとカオスになるので注意が必要です。

また、デザイン制作のルーティンや思考そのものも、「スタイルガイド」の運用に合わせて論理的・システマチックになっていかないと、逆に足枷になりかねないことも注意、というか練度の向上が必要な部分だと感じます。


より高みを目指せるよう、切磋琢磨していきましょう!



=うしお=



アカウント登録をするとコメントを書くことができます