Adobe XDで快適！と感じたこと6つ

こんにちは、かんろです。
最近仕事でAdobe XDを使う機会がとても増えました。
Fireworksが開発終了になってからワイヤーやカンプはIllustrator中心で作成していて、少しのAffinity Designerを使っていた時期もあったのですが、使っていた当時は日本語入力がとても弱かったことと、周りの人とデータの共有がしにくかったのでIllustratorに戻りました。

作業の流れは、ワイヤーを書きカンプ、そしてモックアップを作りながらプロトタイプを作っていくようなイメージで進めています。これを1ファイルで済ますことができるのが個人的にとても便利！
あと、なんといっても軽いのがうれしい！起動がめんどくさくないというのが地味に大きいです。

そんなAdobe XD、気になってはいたけどまだ使ってない、でも気になる！という人向けに、個人的に良いな、便利だな、と思った機能を改めてまとめてみました。
わりと基本的な使い方ばかりですが、それでも作業時間は今までよりかなり減りました！

1.デザインの提示からフィードバック、反映までが早くなった

XDを使っていて一番便利だと思った部分です。いままではワイヤー→カンプの順で作成していたので、どうしてもビジュアルの確認をしてもらうのに時間がかかっていました。
やっぱりクライアントとのやりとりでビジュアルカンプが必要な機会も多かったので、提示できる時間が短くなった分、フィードバックを早めにもらえるようになりました。
ワイヤーとカンプも同じファイルで作成しているので反映もしやすいです。

2.ワイヤーとカンプ、プロトタイプを1つのファイルで

いままでワイヤーとカンプ、モックアップは別々のAiファイルで作成していました。
下の画像はAdobeのサイトからDLできる練習用のサンプルファイルなんですが、デスクトップ、タブレット、スマートフォン、アプリのデザインが上から順に作られていて、左側のアセットにカラーや使用している文字スタイル、シンボルを登録できます。
これだけアートボードがあってもサクサク快適に動きます！
全部のデザインを一つのファイルで見れるので、修正や反映の手間もかなり減りました。

この練習用サンプルファイルはAdobeのサイトからダウンロードできます。
アプリまたはWebサイトのレイアウトとデザイン

3.アセットに登録して修正や変更をすばやく

アセットにはよく使うカラーやフォントスタイル、シンボルを登録できます。ここに登録しておくと、すぐに色やフォントが適用できます。
制作の途中で一部のカラーが変更になることもあると思うのですが、メインカラーやテキストのカラーなどUIのいろんな部分に及んでいるものだと変更するのが大変です。そんな時もアセットに登録しておくとスムーズに変更できるので、サクッと反映が終わります。

変更したいカラーの上でControl + クリックで色の編集ができます。
アセットに登録していたピンクは、ハンバーガーメニューにも使用していたので、デザインの方も連動して青に色が変わっています。

カラーと同じようにフォントも変更できます。ただし、アセットから適用せずに直接カラーやフォントを設定、指定したオブジェクトに対しては変更が効きません。
また、カラーや文字スタイルを変更すると、それが適用されているシンボルも連動して変更されます。

4.レイアウトグリッド/方眼グリッド表示ができる

Photoshopのようにレイヤーにレイアウトグリッドを引けます。方眼グリッドはXDでアイコンを作る時に重宝しそうです。レイアウトグリッドはアートボードのサイズに合わせて、ラインの数が自動で調整されてるようです。

5.コーディングがラクになる、デザインスペック(BETA)

デザインが終わったあとに、ワークスペースに右上からデザインスペックを公開を選ぶと、ブラウザ上でデザインを確認できるようになります。
自動的にURLが発行されてweb上で確認ができるようになるのですが、これがとても便利！

データがアップされてはしまうのですが、URLはランダムな英数字なのでそんなに心配はないかなと思います。少し心配は残るので、一応アップする時は固有名詞などは入れないようにしたり、当たり障りない文言に一部差し替えています。
また公開済みリンクを管理という項目で、アップしたものもすぐに消せるし、データを更新した場合もここからすぐに最新の状態に反映させることができます。

一応、わたしの場合はベースデザイン用のXDファイルを作っていて、それをアップしています。
見出しの設定やボタンのサイズ、ボックスのサイズなどスタイルガイドとして使えるアップしても大丈夫なファイルを作りました。

ブラウザ上ではカーソルを合わせた要素のサイズや要素同士の距離感、カラーや使用しているフォント名なども表示されます。

カラーにカーソルを合わせるとカラーコードがコピーされるので、コーディングの時に確認する時にも助かります。また、右側に表示されるスタイルはデザインで使用している全てものが一度に表示されるわけではなく、ページごとに使用しているスタイルが表示されるので確認もしやすいです。

6.デバイスプレビューでリアルタイムにチェックできる

スマホにAdobe XDのアプリをダウンロードしてPCとUSBで繋ぐと、XD上のデザインがそのままスマホに表示されます。Photoshopのアップデートでデバイスプレビューがなくなってしまったので、Photoshopから画像を書き出してXDにコピペする、という手間な作業をすることもあるんですが、はじめからXDで作業していればデバイスでのチェックもラクラク。

おかげで実機チェック→修正もすごく早くカンタンになりました！
プロトタイプの画面で画面遷移の設定をしていれば、モバイルでもそのまますぐ動きを確かめられるのも便利。作成→チェック→修正までの流れがすごく早くなったなぁ、と感じます。

ここで書いたもの以外にも、リピートグリッドなどの基本的な機能、UIキットやワイヤーフレーム素材が配布されていたり、スタイルガイドのファイルなど色々充実してきています。
もし読んで気になるもの、知らないものがあればぜひ試してみてください。逆にこういう機能便利だよ！とか教えてもらえるとすごくうれしいです！

最後まで読んでくださり、ありがとうございました！