こんにちは！
デザイナーの伊東です。
一週間ほど前、ようやくAdobe XDの正式版がリリースされました。
今までのベータ版で世界中のデザイナーからフィードバックを得つつ、満を辞して”1.0”のリリースが発表されています。
今回は今までベータ版を使用されていた方に向けて、追加された新機能の中から重要なものをピックアップしてわかりやすく解説します。
最後までよろしくお願いします！
この記事の目次
“プロトタイプ”の機能が充実！作成から共有までが一層スムーズに
図形描画やレイアウトが得意な”デザイン”モードと、画面遷移を再現できる”プロトタイプ”モードの切り替えが、ワンクリックで行えるようになりました。モックデザインからプロトタイプを作成する手間が大幅に削減されます。
また、”プロトタイプ”モードでのアートボード間の遷移に様々なアニメーションを設定することができます。
Webアプリケーションの画面遷移時の効果を、クライアントやチームのメンバーとより鮮明に共有できますね。
この動画も、XDの画面撮影機能で作成しました。ボタン一つでmp4形式の動画が撮影できます。
そして、作成したプロトタイプを共有して直接コメントすることができます。
実際に今回作成したテスト用のプロトタイプを公開しました。コメントの入力方法などは実際に操作していただくと、その簡単さがわかるかと思います。
https://xd.adobe.com/view/a7a19454-04c9-4a58-bec1-225e405024a0/
ちなみに、上記のプロトタイプを作成、公開するまで5分程度ですみました。
直感的で操作に迷うことはありません。
シンボル、オブジェクトの複製、アセット周りの機能が強化！
PhotoshopやIllustratorなどの他のAdobe製品に、より操作性が近づきました。
複数のオブジェクトをまとめて”シンボル“にしておくことで、パーツの使い回しが可能です。
アートボードを複製した際、ページ丸ごとシンボルにして他のページに持っていくことも簡単になります。
また、オブジェクトの複製を繰り返し行うこともできるようになりました。Illustratorのcmd+Dと同じ感覚です。
そして、Photoshop・Illustratorよりも優れていると思う”アセットパネル“をご紹介します。
左側にパネルが表示されているのが特徴です。
使用した色、フォント、シンボルなどが自動的に蓄積されていきます。
新しく追加したオブジェクトに、同じようなスタイルを反映する作業がのすごくスムーズに行えるんです。
Photoshop・Illustratorとの連携が強化！
個人的に一番嬉しい機能追加です！
Photoshop・Illustratorで作ったパーツを、ctr+C(cmd+C)とctr+V(cmd+V)で一発でXDに持ってくることが可能になりました。
これにより、細かいパーツをPhotoshop・Illustratorで作成し、レイアウトからモックアップの作成までをXDで行うというワークフローを採用できるようになりました。
何しろXDは他のデザインツールより格段に動作が軽いので、上手く使えばデザイン作業にかかる時間を大幅に短縮することもできると思います。
この”XDをデザインツールとして使用する”ということはまだ実務レベルで試せていないので、実験的に取り入れていきたいと考えています。画像の書き出しにかかる手間が懸念ではありますが、それを克服する方法も探っていきたいと思います。
実際に業務で取り入れて実感したことなど、今後共有していきたいと思っています。
次回もお楽しみに！
