Adobe XDとパターンライブラリから始めるデザインシステム構築の第一歩 | アドビUX道場 #UXDojo

連載

エクスペリエンスデザインの基礎知識

様々なデバイスやメディアに向けたデザインをすること自体は新しい状況ではありません。とはいえ、それが簡単かどうかは別の話です。もし一貫性を持つデザイン実現のためにライブラリを構築しようと考えているなら、Adobe XDが近道かもしれません。

Adobe XDをデザインシステムの構築に利用できるかというアイデアは、ここしばらく私が取り組んでいる案件です。

XDは一貫性を保つのに有効なワークフローを提供し、同時に、継続的な変化に対応できる柔軟性も備えています。まだ十分とは言えないまでも、その目的に近づきつつあるのは確かでしょう。

1. パターンライブラリとして使うXDドキュメントを作る

Adobe XDのデザインシステムへの活用は、パターンライブラリの構築から始まります。パターンライブラリはデザインシステムのごく一部ではありますが、一貫性の保持に重要な役割を果たします。

基本的には、パターンライブラリはサイトやアプリで繰り返し利用されるデザイン要素の集合で、単純なナビゲーション要素から、より複雑なソーシャルメディアのコンポーネントなどが含まれます。パターンライブラリにはこれら要素の他に、見た目や振る舞いのパターンも定義します。

ある1つのXDドキュメントをパターンライブラリとして構築することで、迷うことなくみんなが参照できる「正解が存在する唯一の場所」をつくることができます。定義するコンポーネントには以下のようなものが含まれます。

• 本要素：色、フォント、アイコン、線
• 背景：アートボードの塗り、パターン、グラデーション
• ヘッダーとフォーム要素：ヘッダーや、ボタン、テキストフィールドなど
• カード：予約、地図、ユーザー評価などの表示に使われるスタイル
• 注釈：それぞれの要素がいつどのように使われるかを記したテキスト

2. アセットパネルで共通要素をまとめて管理する

Adobe XDで、色や文字スタイルやシンボルを管理するには、アセットパネルが最適です。アセットパネルでは、アセットの整理、コピー、削除、編集、検索、アセット名変更、などの作業を行えます。

デザインで共通して使われる要素をアセットパネルに集めておくと、再利用がしやすく、デザイン全体をまとめて変更できるようになります。例えば、アイコンの同じ色を一箇所からすべて変更することが可能です。

繰り返し使われているパターンは、シンボルとして登録することで、再利用と管理が容易になります。以下は、シンボルの基本的な使い方です。

• シンボルに変換：デザインに繰り返し現れる要素を見つけたら、シンボルに変換します。対象の要素を選択してドロップダウンメニューを表示したら「シンボルにする」を選択します。アセットパネルに追加されたことを確認しましょう。
• シンボルの上書き：シンボル内のテキストやビットマップは個別に修正することができます。その際、修正内容はオリジナルのシンボルには反映されません。をすべてのインスタンスに修正を反映したい場合は、ドロップダウンメニューを表示して「オーバーライドをプッシュ」を選択します。
• シンボルの置き換え ：シンボルのすべてのインスタンスをまとめて置き換えたいときは、アセットパネルから新しいシンボルを選択して、置き換えたいシンボルのインスタンス上にドロップします。シンボルの上にドラッグした状態では、緑色のアイコンの形状が＋から矢印に変化して、単純なシンボルのドロップではなくシンボルの置き換えが行われることを知らせます。

今回の目的でシンボルを利用することの利点は、シンボルのリンク機能が使えることです。パターンライブラリのXDドキュメントから自分のXDドキュメントへシンボルをコピーすると、コピーがオリジナルにリンクされた状態になり、オリジナルのシンボルに対するすべての変更がコピーを持つドキュメントに通知されます。

オリジナルのシンボルの最新の状態と簡単に同期することができるため、複数のドキュメントが存在しても、一貫性を容易に保つことができます。

3. 開発者にデザインを渡す

優れたデザインシステムは、たとえその最初の一歩でも、開発者の作業を楽にするものであるべきです。

Adobe XDでパターンライブラリを作成すると、共有メニューからデザインスペックのURLを生成できます。ここから開発者は、使われている色や文字スタイルを確認したり、大きさや距離を調べたり、必要なアセットをダウンロードすることが可能です。

アセットの受け渡しを効率化するには、バッチ書き出しの機能を利用できます。その場合、デザイナーは、レイヤーパネルを開き、開発者に渡したいアセットにバッチ書き出しマークを追加しておきます。そして、デザインが完成したら、デザインスペックを共有します。

開発者が共有されたリンクをブラウザで開くと、デザインスペックのアセット欄に、デザイナーがマークしておいたアセットが表示されます。開発者は、必要なときに必要なアセットと必要なフォーマットを選択してダウンロードできます。

パターンライブラリとして用意したXDドキュメントからシンボルをコピーして使うことで、デザイナーは常にオリジナルにリンクされた状態で作業できます。開発者はそのデザインファイルから生成されたデザインスペック経由で情報やアセットを取得します。このようにして、デザイナーも開発者も単一のソースを元に作業する環境を構築できます。

一貫性のあるマルチスクリーン体験のデザインが簡単だというつもりはありません。デザイン要素やパターンは、さまざまな理由で常に変わり続けます。これらをまとめるのは実に大変な作業です。

しかし、いまでは多少役に立ついくつかのツールも存在しています。

この記事はHow to Build a Single Source of Truth with Adobe XD（著者:Demian Borba）の抄訳です