MENU

【Adobe XD】特徴と作業時のヒントについて

2016年に登場して、まだベータ版のAdobe XD。

まだ機能は十分ではないのですが、今後はSketchを抜いて、プロトタイピングの定番ソフトになるのではと思います。

使ってみての簡単なメモ書きです。

アップデート情報

こちらをチェック、ほぼ毎月更新されています。

https://blogs.adobe.com/creativestation/serialization/adobe-xd-update

Adobe XDの良いところ

公式サイトみたり、触ればすぐに特徴が分かるので簡潔に。

www.adobe.com

遷移設定が簡単

パーツ単位で遷移を引けるのが○。

画面全体を調整できる

全UIを並べることができるので、全体のパーツ管理がしやすいです。

なによりも1万以上のpixelを表示しているのに動作が軽い!

リピートグリッド

同じパーツを複数生成するのが便利です。 もちろん複製したものの画像とテキスト入れ替えもできます。

Adobe XDの改善てほしいところ

オーバーレイ表示(解決)

背景にしたいページ全体をシンボル化してしまうと遷移で使い物にならなくなるのが難点なので アラートのバックグラウンドなどは、しかたなく画像を書き出して、シンボル化しています。

追記 2017.9

こちら機能が改善されて、シンボル化してもダブルクリックにて下の階層にアクセス、遷移をつなぐことができるようになりました。

ガイド機能

余白などのレイアウトを詰めるとき用のパーツを作ってみたりしていますが、不便。 グリッド機能を使ってくださいという感じかもしれないのですが。

リピートグリッドの表示順番の変更

切り取り+貼り付けでいけなくはないのですがスマートではないです。

アートボードの自動配置

100画面超えてくると、書き出したい時の選択が大変です。 選択を考慮しての余裕を持った配置が必要。

シンボルのレイヤー管理

イメージだけだとわかりにくい。

セキュリティ

共通化するとリンクを知っている人はだれでも閲覧できてしまうのは心配。

コメント機能の管理

ゲストでもコメントできるようになったが、通知表示が微妙なので、コメントを使ってのやり取りはまだ微妙

どのPC環境でもインストール可能に

MacまたはWindows10じゃないとXDのデータが開けない。

XDの中身を見たいという相手のPCがWindows7だったりすると、開けないので結局ドキュメントを作成することになる。

アートボードのグループ化

画面数増えると探すのが大変

Adobe XD 作業時のヒント

アートボードの設定

あとでの大きさ変更は大変。レイアウトし易い基準にしておくことが重要. Retina対応できる書き出しも可能

アートボード同士の配置

どのような並びで、どんな間隔で、どのような命名規則で配置していくか。 大きく構想を考えておくと良いです。

UI Kitの準備

汎用素材を作成して、それをベースにレイアウトすると楽。 プロトタイピングするまえに、どのようなパーツで構成するかイメージしたり、決めておくことが重要。

パーツの管理

基本シンボルでパーツを配置。パーツの命名を種類が増えた時におかしくないように想定。 これも余白とか構成とかある程度イメージがある前提でレイアウト組まないと、あとあと整理・仕上げるときに大変。

階層のデータ整理

階層をルールを定めて、きれいにしていれば、わざわざ仕様書を起こさなくともあらかたキャプチャで済む場合も

遷移を保ったままコピー

インタラクションを保持したコピー機能が付きました。

遷移をつなぎ直すのは地味に大変なので、便利です。

https://blogs.adobe.com/creativestation/web-may-update-of-adobe-xd

パーツの書き出し

命名と画像を工夫することで、どこに使うパーツなのか、ひと目でわかるのが理想。

Adobe XD 将来的に試すかもしれないこと

仕様書の作成

レイアウトだけでなく、UI仕様書、遷移図、画面設計書、パーツ仕様書など、最新の状態に連動して変化できるドキュメントを作成してみたい。

ページ全体に対応したシンボルの機能の進化(全体をシンボル化するとパーツ単位での画面遷移ができなくなるので)やsketch measureのようなサイズ表示機能があると、かなり効率がよさそう。

パーツの作り込みを除いて、UIの仕様書もすべてXDで完結できると、UI作成において必須のソフトになると思います。