Adobe XD 2020年6月アップデートリリース！デザイントークン、スタック、スクロールグループなど #AdobeXD
Adobe XD アップデート
本日、Adobe XDは30回目のアップデートという大きな節目を迎えました。XD バージョン30には、デザイン、プロトタイプ、コラボレーションのための新しい方法を含む、プラットフォーム全体に渡る新機能を満載しています。また、XDが現在対応している8つの言語に加え、新しくイタリア語とロシア語の言語サポートを追加しました。
XDが誕生してから2年半以上もお世話になっているコミュニティーの皆さんには本当に感謝しています。
是非、Creative Cloudデスクトップアプリを使ってXD バージョン30にアップデートするか、XDをダウンロードしてください。
また先日、Adobe Fund for Design（英語）基金が、XD用プラグインの開発など、いくつかの技術的なプロジェクトに対して助成金を発行することを発表しました。この発表については別のブログ記事で詳細にお伝えします。参加を受け付けているプロジェクトのリストについては、タスク管理ツールTrello上のページでご確認ください。
それでは新機能のご紹介を始めましょう。
XDでデザインとプロトタイプを作成する新しい方法
高速でパワフルかつ使いやすい、UI/UXデザイン専用のツールであること。それがXDの中核的な理念です。それを守るため、開発チームはユーザーの邪魔にならず、最高の仕事が出来るような機能を考え抜いてデザインしています。今回ご紹介するXDの新機能も、時間を節約し、反復的なタスクを自動化し、ユーザーが最もインパクトのある作業に集中できるようにすることを意図しています。
スタック
XDでエレメントのグループやコンポーネントを扱うための新しい概念がスタックです。スタックは、行あるいは列として、ある間隔をもって配置される複数のオブジェクトの集合で、CSSのFlexboxに似ています。スタックに新しくオブジェクトを追加したり、逆に削除したり、あるいはスタック内のオブジェクトを拡大あるいは縮小すると、他のオブジェクトの配置も、互いの間隔を保ちながら新しいデザインに自動的に適応します。
スタックを作成すると、XDはまずスタックの方向（垂直か水平か）を検出します。カンバス上ではオブジェクト同士の間隔を直接調整することができ、均等配置にするかしないかも指定できます。カード、ドロップダウン、ナビゲーション、モーダルダイアログといった一般的なUIエレメントのデザインにつきものの、面倒な位置調整はもう必要無くなります。
デザインシステムを使用している場合、スタックは、レスポンシブリサイズやパディングなどの、コンテンツに応じたレイアウト機能と組み合わせて使うことで、コンポーネントをさらに柔軟で適用範囲の広いものにしてくれます。デザインシステムからコンポーネントを取得して配置した後のカスタマイズも、テキストの変更、含まれるオブジェクトの追加または削除、あるいはオブジェクトの再配置といったシンプルな作業だけで済み、毎回再構築するのと変わらないほどの手間をかける必要はありません。
スクロールグループ
スクロールグループを使用すると、プロトタイプを実際のWebサイトやアプリのように動作させることができます。画面の一部の領域がスクロールするような、フィード、リスト、カルーセル、ギャラリーなどをデザインできるようになりました。これは、Adobe XDのUserVoiceフォーラム（英語）に寄せられたなかでも最も要望が多かった機能の一つ（英語）です。
デザイン上の任意の領域をスクロールグループとして指定し、縦、横、または両方向にスクロールするように設定できます。カンバス上では、スクロールグループを作成した領域に青いハンドルが表示されます。デスクトップでプロトタイプをプレビュー、あるいはプロトタイプのリンクとして共有すると、指定した領域を実際にスクロールすることができます。
Let’s XDでスタック（英語）とスクロールグループ（英語）の使い方を学ぶことができます。さらに、ベイエリアのUI/UXデザインエージェンシーImpekable（英語）のチームが作成したこちらのデモファイルをダウンロードし、実際にどのように機能するのかをぜひご自身で確かめてください。
新しいコラボレーション方法と、開発者との共有に役立つ新機能
XDは単なるデザインツールに留まらない、デザインコラボレーションのためのプラットフォームでもあります。他のデザイナーと共同でアイデア出し、開発者との仕様の共有、フィードバック収集のためのクライアントへの共有、デザインシステムの構築など、関係者全員の連携を維持しながらプロジェクトの進行を促進するためにも、XDはご活用いただけます。
デザイントークン
デザイントークンは、デザイナーと開発者がXDで一緒に作業するための新しい方法です。デザイナーは、アセットパネル上でカラーや文字スタイルにカスタム名を追加することが可能になり、以降はそれらの名前を含んだダウンロード可能な開発者向けCSSファイルが自動的に発行されます。開発者はコードからこのCSSファイルを参照することでアプリを開発しますが、重要なのは、デザイナー側がスタイリングを変更したとしても、開発者側は同じCSSファイルを参照するだけなので、コード内の変更が必要な箇所を全て手作業で修正する必要が無くなるということです。
デザイントークンのコンセプトは、Salesforce.comのデザインシステム「Lightning Design System（英語）」の一部として、ジーナ アン（Jina Anne）氏によって提唱されました。デザイントークンは、カラーやボディテキストのスタイルなど、視覚的なデザインの変数を、コード側から参照するためのシンプルな方法です。アドビも自社のデザインシステム「Spectrum」（英語）でデザイントークンを使っています。Adobe.com Webページ上の青いカラーは、”button-cta-background-color”と表現されます。
デザイントークンの使用に、ワークフローの変更やツールの追加は不要です。アセットパネルでカラーや文字スタイルをダブルクリックし、名前を付ければ、あとはXDが処理します。その後、開発者のための共有リンクを作成または更新すると、すべてのトークンを含んだダウンロード可能なCSSファイルがリンクに含まれるようになるため、開発者がそのファイルへの参照をアプリケーションに組み込めば、すべてのスタイリングを常に最新で一貫した状態に保つことができます。
デザイントークンの使い方について詳しくは、Let’s XDのチュートリアルをご覧いただくか、ヘルプをご利用ください。今後デザイントークンを使って設定したいスタイルがあれば、UserVoice（英語）に機能リクエストを投稿してください。チームのロードマップの参考にします。
Slackとのより深い統合
Slackに追加できる「Creative Cloud app for Slack」アプリは、最も人気のある統合機能のひとつで、Slackチャンネル上でアセットを共有したり、通知を自動投稿したり、デザインプロジェクトの最新情報を入手したりすることができます。Creative CloudとSlackの統合機能の最新版（英語）では、共有チャンネルのサポート、プロジェクトに関する詳細な通知や更新情報を得るためのアクティブストリームの導入、通知の管理やフィードバックの提供などを行うための一連の新しいボットなどが追加されました。
Slack用のCreative CloudアプリはSlack App ディレクトリからダウンロード可能です。
再利用可能な共有リンク
デザインは、初期のアイデアから最終的なエクスペリエンスへと進化していきますが、それぞれ別の関係者に異なったタイミングでの共有が必要になることもあります。最初期のアイデアは、直属のチームと共有してフィードバックの収集や迅速な反復改善（英語）を行い、その後のバージョンでより多くの関係者やクライアントに共有（英語）するといった様にです。
そういった場合のために、既存の共有リンクのアクセス設定を変更できるようになりました。これまでのように新しい共有リンクを作成する必要はありません。共有リンクの詳細についてはヘルプをご覧ください。
データビジュアライゼーションを追加する「Chart for XD」プラグイン
新しい「Chart for XD（英語）」プラグインを使えば、数回のクリックだけでデザインにデータビジュアライゼーションを追加できます。Chartは、実際のデータやランダムなデータに基づいて、折れ線グラフ、面積グラフ、棒グラフ、散布図など、完全に編集可能なベクターチャートを生成します。Chart for XD（英語）は、XDのプラグインマネージャーから無料でインストールできます。
Chartプラグインを使うときは、作成するチャートの種類を選択し、使用するデータのソースを選択します。Chartは、仮のデータを生成することも、Google Sheets、CSV、JSON、またはREST APIなどの各種エンドポイントを指定して実際のデータを参照することもできます。
また、テンプレートを使用してチャートの外観をカスタマイズすることもできます。テンプレートを使用すると、カラー、文字スタイル、線の太さ、その他のスタイルをカスタマイズして、ブランドガイドラインやアプリ全体のトーン＆マナーと一貫性を持たせることができます。一貫性のあるビジュアライゼーションのためのテンプレートの使用については、Chartの開発者であるパヴェル クリギン（Pavel Kuligin）氏によるこちらの記事（英語）を参考にしてください。
この記事は6月16日に公開されたJune 2020 Release of Adobe XD: Design Tokens, Stacks, Scroll Groups, and Moreの抄訳です。