進化し続けるAdobe XD！スマホでリアルタイムプレビューなどバージョンアップで追加された便利機能まとめ
こんにちは、wamです。
前回の記事で、Adobe XDを実際に触ってみた使用感をご紹介しましたが、ここ半年で着々と進化し続けています。しかも無料のまま！
頑張ってるXDさん。
今回は、そんなXDさんの進化した便利機能をご紹介したいと思います。
iOS・Androidアプリでリアルタイムプレビューが可能に
今まで実機ですぐに確認できる方法がなかったのですが、
2016/9/27の更新で、iPhone・iPad・Android（タブレットは準備中）でAdobe XDアプリがリリースされています。
ただし、現状アプリで確認するにはモバイルデバイスをUSBケーブルでパソコンに繋ぐ必要があります。
ワイヤレス接続は今後サポート予定とのこと。
- まずはAppStoreからAbobe XDをインストールします。
- 起動するとスプラッシュが表示され、初回のみスタート画面が表示されます。
- 開始するボタンを押すと、USBケーブルでデバイスとデスクトップを繋いでAdobe XDを開いてくださいと表示されます。
- 今回はiPhoneとPCを繋いで、前回作成した”柴犬をひたすら眺めるアプリ”のファイルを開いてみました。
- xdファイルを開くとすぐに、繋いでいるiPhoneにアプリの起動画面が表示されます。
これは神アプリだ。はじめるしかない。
というのを実機で確認する事ができます。非常に簡単で表示も早いです。
ファイルを修正したらリアルタイムにプレビュー
xdファイルを修正すると、一瞬でアプリに反映されます。
画像、テキスト、レイアウト、全てリアルタイムで反映されます。
どのくらいリアルタイムなのかというと…
奥がPC、手前にiPhoneを持って並べて撮影
試しにテキストを動かしてみましたが、ほぼ同時に見えるレベルです。
現状はUSBケーブルで直接繋いでるので、ワイヤレスになってもこの速度だと更にすごいですね。
アプリでのプレビュー方法について
一通り触ってみたところ、下記のような仕様でした。
- アプリには画面一覧がなく、接続すると一番最初のアートボードが自動的に表示される
- 指定の画面を確認したい場合は、PCでアートボードを選択するとその画面がiPhoneにも表示される
- PCで作った遷移のプレビュー機能のみで、アプリ側で遷移を追加・削除・編集などはできない
Prottのようにアプリ内で画面を選択してプレビューするのではなく、PC側で開いている（もしくは選択されている）画面をプレビューする機能のみになっています。
デザインモードで追加された機能
スクロール時のビューポート高さ指定
この機能、最初は「ヘッダーなどを固定できるようになったのか!!」と期待したのですが、
そうではなく、単純に画面が一定の高さを超えたらスクロールを発生させる事ができるようになった、という機能でした。
確かに以前は、アートボードを縦に伸ばしてプレビューするとスクロールせずそのまま全画面が表示されていました。
↓
実機でみると…
縦に長い分左右に黒帯が入っています。手動で拡大して確認するのも微妙ですよね。
現在は、一定の高さ以上になった場合はスクロールしてくれるようになりました。
右側のパネルにあるスクロールを「垂直方向」にし、ビューポートの高さを指定すればOKです。
↓
実機でみると…
画面サイズに合ったスクロールが可能です。
今後ヘッダーなど一部を固定してスクロールができるようになる事を期待しています。
計測機能
計測機能とは、デザイン内にあるオブジェクトの距離を簡単に表示できる機能です。
デザインが確定した後、エンジニア向けにレイアウト指示書を作るのが一般的ですが、最近はそこを自動化するプラグインなどが増えてきています。
Adobeの公式ブログでも、デザイナーからコーダーにカンプやアセットを受け渡すのが一番厄介だという記事があり、まずはこの機能をサポートしたという経緯があります。
計測機能の使い方
オブジェクトを選択して、alt / optionキーを押すだけです。
選択されたオブジェクトとアートボード端からの距離が表示されます。
この機能はアートボードやオブジェクト同士の距離を測るものなので、オブジェクト自体のサイズは右側のパレットで確認する事になります。
簡単でわかりやすいですね。
Sketchのプラグインほど豪華な機能ではありませんが、簡単にオブジェクトの距離を測る事ができます。
例えば、
- デザインが終わったらエンジニアにxdファイルを共有
- エンジニアはxdファイルを直接開いて、サイズや距離などを見て実装する
というフローにすれば、レイアウト指示書が不要になり作業効率も上がりそうです。
Adobe XDはAdobeアカウントさえあれば無料で使えるので、コスト面でも導入しやすいメリットもあります。
※ただしMacユーザーのみ
線形グラデーション
Adobe XD内で線形グラデーションの作成、編集、ベクターオブジェクトへの適用が可能になり、
Illustratorから線形グラデーションをコピー＆ペーストで持ってくることも可能になりました。
試しに、Adobe XD内で線形グラデーションを作ってみました。
PhotoshopやIllustratorのようにツールバーにグラデーションツールがあるのではなく、矩形の塗りを「べた塗り」から「グラデーション」に切り替えて細かい設定をする流れになっています。
グラデーションはアルファ値の設定も可能です。
16進数カラー指定も省略が可能に
カラーコードも以下のように省略して入力することが可能になっています。
地味に便利ですね。
| 省略の指定例 | 変換されるコード |
|---|---|
| 1 | #111111 |
| 12 | #121212 |
| 123 | #112233 |
ズーム機能
実は、前回の記事の時点では左のツールバーに虫眼鏡のアイコンはありませんでした。
その為、ヘッダー右上の%表示を変えるかトラックパッドを駆使して拡大/縮小するしかなく、かなり面倒でした。
現在はツールバーに追加されています。
ん…？瞳の中に人らしきシルエットが…？
…気のせいかもしれない。
いろいろショートカットにも対応しています。
| ズームツール選択 | Z |
|---|---|
| 一時的にズームツール選択 | SPACE ⌘ |
| ズームイン | ⌘ + |
| ズームアウト | ⌘ – |
| 画面サイズに合わせる | ⌘ 0 |
| 100% | ⌘ 1 |
| 200% | ⌘ 2 |
| ズームイン（1段階） | クリック |
| ズームアウト（1段階） | option / alt + クリック |
選択アイテムにズーム
さらに便利な機能として、オブジェクトやアートボードを選択して⌘+3を押すと、選択したアイテムに一気にズームできるショートカットも追加されています。
SketchやExcelなど他のツールからコピー&ペーストが可能
他のツールからコピー&ペーストが可能になり、さらにペーストされたコンテンツはAdobe XD上で編集も可能になりました。
公表されているツールは下記の4つです。
- Sketch
- PowerPoint
- Excel
- InDesign
例えば、企画から文言など複数のテキスト情報をPowerPointやExcelで受け取った場合、テキスト毎にコピー&ペーストする必要がなくなり作業効率アップが期待できます。
プロトタイプモードで追加された機能
トランジション効果の追加
遷移時のトランジション効果が追加されました。
前回あまり触れなかったので、１つずつ試してみたいと思います。
トランジション なし
アニメーションはなくパッと切り替わります。味気ないですね。
トランジション ディゾルブ
じわじわとアルファで切り替わるアニメーション。
トランジション スライド NEW
新しく追加されたアニメーションで、遷移先の画面を上に被せながらスライドしてきます。
上下左右、好きな方向で指定可能です。
トランジション プッシュ
リリース時はスライドという名称だったのですが、プッシュに変更になりました。
前の画面を押し出しつつ次の画面がスライドしてきます。
上下左右、好きな方向で指定可能です。
ひとつ前のアートボードに戻る
今までは、遷移先の画面までドラッグして線で繋ぐorアートボード名を指定する必要がありましたが、「ひとつ前のアートボード」を選択すると自動的に前の画面に戻る設定をしてくれます。
特にアートボードが増えてきて、遷移が複雑になってきた時に便利な機能です。
PDF書き出し
svg、pngの他にpdfでも書き出せるようになりました。
試しにiOSアプリ用にpdf画像を用意する想定で、アートボード毎にアイコンを配置したxdファイルを作ってみました。
アートボードの背景色はデフォルト白になっているので、塗りのチェックボックスを外して透過にしておきます。
⌘+Eでファイルの書き出し画面を表示します。
フォーマットをpdf、保存形式を複数のpdfファイルに設定し、すべてのアートボードに対して書き出しボタンをクリックすると、アートボード毎にpdfファイルが書き出されます。
指定のアートボードだけ書き出したい場合は、アートボードを選択した状態で⌘+EをすればOKです。
今後のアップデートについて
次回のアップデートで何が追加されるのかまだ公表されていませんが、
11月にAdobe最大のクリエイティブカンファレンス（Adobe MAX 2016）があり、そこでお披露目されるとの事です。
早めに追加して欲しい機能
- Creative Cloud ライブラリ連携
- アプリプレビューのワイヤレス化
- psdやaiでの保存
- シェアする際の閲覧制限機能
- ヘッダーなど一部を固定してスクロール
- Landscape画像への自動切り替え
- 動画読み込み・gif画像の対応
- プロトタイプモード時にタイマーでアイテムを表示/非表示できる機能
「Creative Cloud ライブラリ連携」と「アプリプレビューのワイヤレス化」はAdobeが公式で追加予定を発表していますが、それ以外については個人的な希望です。
この半年で着々と進化していたので、今後もバージョンアップに期待して待ちたいと思います。
ではまた〜
