Adobe XD ベータ版8月リリース!CCライブラリでカラーや文字スタイルをPhotoshopなどと共有

連載

Adobe XD アップデート

_デジタルデザインは絵画に似ている。ただ絵の具が乾くことはない。 ― _Neville Brody

XDは当初から、デザイナーが思考と同じ速度でデザインできるようにすることを使命としてきました。デザインプロセスの大部分を占めるのは、さまざまなソリューションを試して、デザインの試行錯誤を繰り返すことです。このプロセスは、使用するアプリケーションが多様化し、扱う作業ドキュメントが数枚から数十枚、さらにアートボード数百枚までに増えた場合、ますます時間のかかる退屈な作業になります。今月のリリースは、新しいアセットパネルおよびCreative Cloud ライブラリのサポートにより、XDでのデザインの拡張性の強化に特化しています。

macOS版とWindows 10版での新機能

スタイルとアセットの再利用

8月のリリースでは、カラーや文字スタイルなどのデザイン要素をアセットパネル(以前のシンボルパネル)に追加することで、これらを簡単に繰り返し再利用できるようになりました。アセットパネルにより、デザイン要素の概要表示とアクセスが簡単になります。

パネルのプラス記号アイコンをクリックすると、カラーまたは文字スタイルがアセットパネルに保存されます。カラースウォッチまたは文字スタイルを右クリックするだけで、デザイン要素を変更でき、変更は自動的にドキュメント全体に適用されます。キャンバスのすべてのインスタンスの更新など、慣れしたしんだシンボルのすべての機能もこれまで同様に使用できます。私たちは、デザインプロセスのスピード化に真剣に取り組んでいます。これらの機能がお役に立てれば幸いです。

Creative Cloud ライブラリ

デザイナーは、さまざまなアプリケーションで同じデザイン要素を再現するためだけに、フクシアの完璧な色合いやサンセリフ書体を探すことに多くの時間を費やこともあります。今回のリリースでは、Photoshop CC、Illustrator CCおよびその他のCreative Cloudアプリケーションで作成されたカラーおよび文字スタイルなどのデザイン要素を、Creative Cloud ライブラリを介して利用できるようになり、XD内で直接再利用できます。フローティングパネルは、[ファイル] / [CCライブラリを開く]、またはキーボードショートカット(CMD/CTRL+SHIFT+L)で表示できます。ゼロからデザインする場合でも、既存のデザインを利用して、より良いデザインを制作できます。

https://blog.adobe.com/media_89959057637c9dcc39fbc61c70edb828855ac8e3.gif

共有カラーおよび文字スタイルは、デザイン要素のほんの一部です。今後、Creative Cloud ライブラリでのさまざまなデザイン要素サポートも追加予定ですので、ぜひご期待ください。

スタイルのペースト

これまでは、別のシェイプに適用するためだけにオブジェクトのグラデーション塗りつぶしを設定していたかもしれませんが、このリリースでは、オブジェクトからスタイルをコピーして、別のオブジェクトにペーストできるようになりました。この操作は、透過性、塗りつぶし、境界線、影、ぼかしなど、すべてのアピアランス プロパティに適用されます。これは小さな改善ですが、デザインプロセスの効率化の観点では大きな進歩です。

https://blog.adobe.com/media_1b02c0042e4e035c41b5106f2b4c4d93ca6db3ef.gif

インタラクションのペースト

プロトタイプを作成していると、同じインタラクションが設定されたボタンが複数アートボードに配置されることがあります。今回のリリースでは、これらの各インタラクションを手動でワイヤー設定する必要なく、コピーできるようになりました。ターゲット、トランジション、イージングおよびタイミングなどのインタラクションをオブジェクト間で順番にコピー&ペーストすることで、プロトタイプを接続する時間を節約できます。また、プロトタイプモードでオブジェクトをコピーおよびペーストすると、ワイヤーがコピーされます。インタラクションを単一または複数のオブジェクトにペーストでき、最大限の効率化が実現できます。これにより、デザインを制作するまでの時間が大幅に短縮されます。

https://blog.adobe.com/media_54dcf93483d38ddc232dfe25fe56b2c938dd1007.gif

UIリソース

Microsoft Windows、Apple iOSおよびGoogle Material Designといった人気のプラットフォーム用のUIリソースのアップデートを入手して、デザインしてみてください。アップデートされたリソースには、レイアウト、パターンおよびシンボルなど、高品質のユーザーインターフェイスコンポーネントが含まれています。

Adobe XD専用のモバイルおよびWeb用の2つの無償ワイヤーフレームUXキット「Wires」もリリースされました。すぐに使えるコンポーネントやテンプレートなどの包括的なセットにより、アイデアからデザインまでの時間を短縮します。


https://blogs.adobe.com/creativestation/files/2017/08/UI_Kits.png

UX コミュニティ

これからもコミュニケーションを続けていきたいと思います。UserVoiceでご感想をお聞かせください。アップデート情報は、Twitter@AdobeXDをフォローしてください。Twitterでハッシュタグ#AdobeXDを付けて投稿すればXDチームにも届きます。また、Facebookでビデオやアップデート情報を公開していますし、毎週水曜午後22時(米国太平洋標準時)のFacebookライブセッション中(英語)にはご質問にもお答えします。

Adobe XDを使っているUXデザイナーをリンク先で紹介しています。UXデザインの始め方、進め方、実際の作品に加え、作業中に聞いている音楽もわかります。ぜひご覧ください。

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

日本においても、ほぼ毎月Adobe XD勉強会というユーザーコミュニティが積極的な活動をおこなっています。最新アップデート情報や使い方のTIPSなどをユーザー同士が共有しています。8/26(土)にはデザイナソンもくもく会が同時開催されます。

ヘッダー画像 (XDで制作): Joshua Oluwagbemiga

この記事は、2017/8/23にポストされたAugust Update of Adobe XDを翻訳したものです。