Adobe XD 2019年5月アップデートリリース！デザインシステム実現の第一歩としての新たなコンポーネントのほか、ガイド、多角形ツールなど #AdobeXD
Adobe XD アップデート
昨年末、Adobe XDにクラウドドキュメント機能を追加してから、2019年を通じて開発チームが取り組んでいく重点領域についてお伝えしました。そのうちの1つが、今回取り上げるデザインシステムの作成と管理です。
今月のXDのリリースでは、共有されたクラウドドキュメントのアセットパネルに登録されたカラーや文字スタイル、コンポーネントだけを、チームメンバーが自分のドキュメントに読み込めるようになりました。さらにそのアセットが変更された場合、チームメンバー全員が最新のアセットに更新することもできます。
これらの機能開発において私たちが理想としたのは、デザインチームがより大規模なプロジェクトを手がけるにつれ求められる方法論の進化、すなわちアセットを個別にデザインする従来のやり方から、デザインの一貫性を保証し、再利用可能なアセットのセットとして作成する手法への移行をスムーズに行えるようにすることでした。
コンポーネント
XDが登場した当初から、再利用可能なアセットとしてシンボルがありました。しかし、その柔軟性と適応性についてはいくつかの制約がありました。今回のリリースで、シンボルをさらに機能が豊富なコンポーネントに完全に置き換えています。ボタンのような再利用可能なアセットは、まずマスターコンポーネントを作成して定義します。そのインスタンスはプロパティを変更することでカスタマイズできます。個別のインスタンスに加えられた変更の影響範囲はそのインスタンスに限定されますが、マスターに加えられた変更は、そのインスタンスすべての、カスタマイズされていないプロパティすべてに適用されます。これは驚くほどパワフルでありながらも非常に使い勝手が良い仕組みで、私たちはこれをデザインシステム構築ソリューションの中核として位置づけています。
私たちはコンポーネントを、レスポンシブなリサイズにも対応するように設計しました。このため、そのインスタンスのいずれを選択してサイズを変更しても、XDがコンポーネント内の各構成要素の配置や拡大縮小を自動的に管理し、適切に行うようになっています。
コンポーネントの登場は、XDを使ったデザインの方法論に革新をもたらす可能性を示し、まだそのスタートラインに立ったばかりです。さらに今後数ヶ月のうちに、コンポーネントを進化させていきます。例えば、コンポーネント内に複数のステートを定義可能としたり、それらステート間のアニメーション作成のサポートやインタラクションの追加などです。また、XDで作成したコンポーネントを最終的にリリースする実装と結びつけるやり方も探っていきます。
リンクされたアセット
アセットパネルは、ドキュメント内で使われているカラーや文字スタイル、コンポーネントを管理する手段を提供します。今回のリリースからは、このパネルにアセットを選択して登録することで、チームメンバーに共有するデザインシステムのアセットの選別を行うことも可能となります。
まず、「共有＞編集者を追加」から共有者を追加してドキュメント共有に招待します。これで定義済みのカラーや文字スタイル、コンポーネントを他のユーザーが利用可能な状態になります。これにより、カラーや文字スタイル、コンポーネントはチームメンバー各自のドキュメントに追加でき、あなたが定義して共有したアセットを活用できるようになります。ソースドキュメントを更新すると、チームメンバーには更新の通知が届き、その更新を各自のドキュメントに反映するかどうかを選択できます。これにより、メンバー全員による最新アセットの使用を確実なものとすることができます。
スタイルガイド
自分のドキュメント上のカラーや文字スタイル、コンポーネントに他のデザイナーがリンクできるようにするだけでなく、開発者とも同様の共有を行いたい場合があります。そのような場合は、自分のXDドキュメントのアセットパネルからアセットをアートボードにレイアウトして「ステッカーシート」を作成し、「共有＞開発用に共有」でWeb上にパブリッシュすれば、開発者はカラー値やスタイル属性の取得、アセットのダウンロードを行うことができます。
カラーや文字スタイルを組み合わせた適用範囲の広いコンポーネントの作成機能と、デザイナーと開発者と共有する機能の追加により、私たちはXDにデザインシステムの構築と管理に必要な基盤機能が備わったと考えています。引き続き、デザインシステムの各アセットの共有権限の設定とアップデートの配布機能をともに洗練し、より柔軟性のあるコントロールを提供するためのいくつもの機能強化に継続的に取り組んでいく予定です。
さらなる新機能と機能強化
今月のリリースには他にも、皆さんから寄せられたご要望に直接お応えするかたちで追加されたものを含む、数多くの新機能と機能強化が施されています。
アートボードガイド
アートボードの上辺または左辺からドラッグして引き出すことで、どのアートボードにもガイドを追加できるようになりました。これにより、アートボード上のオブジェクトの整列が容易になり、一貫した配置を実現できます。
キーボードおよびゲームパッドトリガー
私たちは、XDでプロトタイプを作成可能なターゲットデバイスとプラットフォームの拡張に常に取り組んでいます。今回は、キーボードおよびゲームパッドを新たなトリガーに追加しました。今回のリリースでは、デスクトップの体験をシミュレーションするためのキーボードトリガーに加え、XBox OneおよびPlayStation Dualshockコントローラーによるトリガー入力に対応し、ゲームコンソールのインタラクションのシミュレーションが可能になりました。
多角形ツール
新しく追加された多角形ツールを使えば、三角形、ひし形、五角形など、最大100辺までのさまざまな多角形をすばやく作成できます。自動アニメーション機能と併用することで、異なるシェイプ間をモーフィングするアニメーションが簡単に作成できます。
すべて大文字、すべて小文字、単語の先頭のみ大文字、打ち消し線
テキストの書式設定オプションの強化には、すべて大文字、すべて小文字、単語の先頭のみ大文字、ならびに打ち消し線が含まれます。上付き文字と下付き文字は今後サポートする予定です。
アクセス権限と共有
招待されたユーザーのみにプロトタイプとデザインスペックへのアクセスを限定できますが、より柔軟なオプションを追加しました。アクセス権限を持たないユーザーがリンクの共有を受けた際に、権限の要求を作成者に送信することができます。これにより、アクセス要求を個別に判断して許可することができます。
XDの能力をさらに拡張するプラグイン
いまや150を超えるプラグインが提供されているXDのプラグインエコシステムは日々拡大しています。提供されるプラグイン数の増加に伴い、プラグインマネージャーに要約と詳細説明を切り替えられる機能やキーワード検索といったいくつかの機能強化を加えました。さらに昨月、クリエイティビティの未来を見据えたユニークなビジョンをお持ちの個人開発者に資金とリソースを提供する「Adobe XD Plugin Accelerator」という90日間の集中育成プログラムを発表（英語）しました。
最近ラインナップに加わったプラグインのなかでも特筆すべきものとして、プロジェクトに使える美しいイラストレーションを提供するUnDraw、フォトリアリスティックに3Dレンダリングされたデバイスのスクリーンにデザインした画面をはめ込んで表示できるRotato、ならびにデザインに簡単に地図を埋め込めるようにするMaps Generatorがあります。利用可能なプラグインの一覧は、こちらでご確認いただけます。
ソーシャルメディア
日本語でのアップデート情報やUI/UXデザインの情報は、本ブログ以外にもFacebookページ「Adobe XD Japan」で配信しています。ページを「いいね！」しておけば、自分のタイムラインに情報が流れてきますのでぜひご活用ください。また、Twitterでの配信は@AdobeXD（英語）が積極的に行っており、ハッシュタグ #AdobeXD を付けて投稿すればXDチームにも届きます。
日本のユーザーコミュニティ
日本のユーザーコミュニティが各地で立ち上がり、ほぼ毎月XDの勉強会を開催したり、使い方やTipsなどの情報共有など、積極的な活動をおこなっています。各地の「Adobe XD ユーザーグループ（XDUG）」が情報交換を行なっているFacebookページもご覧ください。また、5月25日の東京から始まるXDUGのフェス「XDUF」（札幌から沖縄まで全国11都市をリレー）にもご参加ください。
#MadeWithAdobeXD
Behanceでプロトタイプをシェアする際は、タグに#MadeWithAdobeXDを付け、使用ツールにAdobe XDを設定してください。AdobeXD ニュースレターで紹介させていただく場合があります。
この記事は2019年5月14日に公開されたIntroducing Design Systems in Adobe XD: Easily Create, Share, and Manage Reusable Colors, Styles, and Components with Your Teamの抄訳です