Adobe XD 2020年1月アップデートリリース!コンテンツに応じたレイアウト、新しいプラグインAPIなど #AdobeXD

連載

Adobe XD アップデート

2020年代の幕開けとなるこの1月に、Adobe XDのアップデートがリリースされました。

共同編集、ドキュメント履歴、コンポーネントのステート、共有モードなどを含む、Adobe MAXでのXDメジャーアップデート以降も、私たちチームは開発を続けてきました。12月のアップデートでは、バグ修正、ご報告いただいた問題点の解決、パフォーマンス向上に注力しましたが、新たな1年を始めるにあたって、今月のアップデートでは、コンテンツに応じたレイアウト、強化されたXDプラグインAPIなど待望の機能をお届けします。

私たちは引き続き、UserVoice(英語)に寄せられる機能リクエストやXDの今後についてのTwitter(英語)、Facebook、ならびにコミュニティフォーラム(英語)上でみなさんとの対話を重ねていきたいと思っています。

本記事では1月アップデートに含まれる新機能すべてをご紹介します。

Adobe XD をダウンロード

「コンテンツに応じたレイアウト」でデザインをスピードアップ

デザインの変更が発生するたびに、デザイナーは長い時間をかけて細かな調整を手動で行っています。その結果、本質的なデザインワークに割くべき時間が削られてしまうことが多いのではないでしょうか。ユーザーにクリックさせるボタンのラベルテキストの変更に伴うボタンサイズの調整、メニューアイテムの追加あるいは削除に対応するためのドロップダウンメニューサイズの調整、ビジネス要件の変更に応じたWebサイトのプライバシー免責条項(英語)の文言の編集に伴う告知バナーのサイズ調整。このようなデザイン調整は、それぞれ数秒で済むとしても、細かな変更がいくつも重なればその負担は無視できないものとなります。

これを解決するために今回、Adobe XDでレイアウトをすばやく作成する新しい方法を追加しました。「コンテンツに応じたレイアウト」機能では、インテリジェントなレイアウト調整をワンクリックで実行し、仕事のスピードを遅らせるような面倒で手動に頼った操作を省いて、UIエレメントのデザインを支援します。

「コンテンツに応じたレイアウト」はカンバス上のレイヤー相互の関係を理解し、デザインの変更に応じてこれらのレイヤーを自動的に調整します。今回提供する「コンテンツに応じたレイアウト」の最初のリリースでは、グループ全体のパディング値の指定が可能になり、グループに属するいずれかのレイヤーに変更があってもそれらの値を維持するというものです。例えば、グループに新規のレイヤーを追加した場合、あるいは既存のテキストレイヤーの内容を編集する場合がそれにあたります。

「コンテンツに応じたレイアウト」は、すべてのXDユーザーが、Adobe XDの最新バージョンをダウンロードあるいはアップデートを適用するだけで利用できます。この機能についての詳細は、解説記事 をご覧ください。また、Let’s XDサイト(英語)では、この機能を学ぶための無料のチュートリアルとサンプルファイルがご活用いただけます。

プラグインパネルからのドラッグ&ドロップをAPIでサポート

2019年8月のリリースで、私たちはプラグインパネルを導入しました。これはデザインカンバスから離れることなく使いたいプラグインの起動や使用を可能にする、新たに追加されたウィンドウです。プラグインパネルから、数百にも上るXDプラグインに簡単にアクセスし、XDの機能を拡張したり、他のアプリとXDを連携させることができます。

デザイナーに最も使われているXDプラグインのひとつは、アイコンライブラリやストックフォトコレクションなど他のソースのアセットをデザインに取り込むものです。こういったアセットプラグインは、インターネット上を探し回ってさまざまなリソースをダウンロードする必要をなくし、より豊かなデザインを迅速に作成することを可能にします。

今回の新しいXDアップデートに併せて、XDプラグインAPI(英語)も更新され、プラグインからカンバスへのアイコンのドラッグをはじめとするドラッグ&ドロップ操作をサポートしました。この新しいAPIを使ってXDプラグインを開発したり、既存のXDプラグインをアップデートしたい開発者は、プラグインにドラッグ&ドロップ機能を追加するためのサンプルコード(英語)をご確認ください。

比率を指定したスターシェイプの作成

ユーザーエクスペリエンスの最も重要なもののひとつが星の図形です。レビューアプリでレストランを評価する、特定の電子メールまたはドキュメントを重要なものとしてブックマークする、交通アプリや旅行プランアプリで地図上の場所をマークする、などがその例です。しかしながら、多くのツールでは、UIデザインに星を追加するのに奇妙で面倒な作業が必要となっています。

Adobe XDの最新アップデートでは、XDの多角形ツールを使って描画する多角形の「スターの比率 」を制御できます。スターの比率は、多角形の各辺の中央のベクターポイントの位置を制御するもので、0%から100%のスケールでシェイプの中心に近づけたり遠ざけたりします。多角形を選択した状態でプロパティインスペクターのスターの比率を調整するか、多角形の上のカーソルを置き、カンバス上で選択ハンドルを掴んで手動で調整します。

最新バージョンのXDをダウンロードするか、Creative Cloudデスクトップアプリ経由で入手し、ここで紹介した素晴らしい新機能の数々をぜひ実際に体験してください。

ソーシャルメディア

日本語でのアップデート情報やUI/UXデザインの情報は、本ブログ以外にもFacebookページ「Adobe XD Japan」で配信しています。ページを「いいね!」しておけば、自分のタイムラインに情報が流れてきますのでぜひご活用ください。また、Twitterでの配信は@AdobeXD(英語)が積極的に行っており、ハッシュタグ #AdobeXD を付けて投稿すればXDチームにも届きます。

日本のユーザーコミュニティ

日本のユーザーコミュニティが各地で立ち上がり、毎月XDの勉強会を開催したり、使い方やTipsなどの情報共有など、積極的な活動をおこなっています。各地の「Adobe XD ユーザーグループ(XDUG)」が情報交換を行なっているFacebookページもご覧ください。

#MadeWithAdobeXD

Behanceでプロトタイプをシェアする際は、タグに#MadeWithAdobeXDを付け、使用ツールにAdobe XDを設定してください。AdobeXD ニュースレターで紹介させていただく場合があります。

Adobe XD をダウンロード

この記事は2020年1月28日に公開されたJanuary 2020 Release of Adobe XD: Content-Aware Layout, New Plugin APIs, and Moreの抄訳です。