Edited at

Adobe XDを触ってみた

More than 3 years have passed since last update.


はじめに

流行りのツールを使ってる感を出したい為、Adobe XDを触ってみました。

ちなみに今年から本格的に使い出したSketchもまだ使いこなしてないです。


基本機能

Adobe XDは、UI作成のデザインモードとUI操作用のプロトタイプモードがあります。


基本操作


アートボードの作成

まずはアートボードを作成する必要があります。

この機能はsketchとほとんど同じです。

左のツールバーからアートボードツールを選択します。

ツールを選択すると、右のプロパティパネルにアートボードの候補が表示されるので選択します。

またはキャンバスをクリック&ドラックで作成します。


アートボードにグリッドを表示

アートボードを選択後、プロパティパネルの グリッド にチェックを入れます。

グリッドの色、透明度、間隔は自由に設定できます。


ベジェ曲線

XDでもPhotoshop や Illustrator同様ベジェ曲線が使えます。

Illustratorに慣れていると、操作が少し違うので違和感を少し感じるかもしれません。

個人的な感想になりますが、√より使いやすいです。

Sketchのパスはどうも使いづらいです。

アンカーポイントをダブルクリックすると、ハンドルが作成されます。

a.gif


画面の拡大・縮小

バージョン0.5.6.7ではツールでの拡大縮小ができないようでした。近々追加されるようです。

現時点では、下記のショートカットで切り替えるのが一番楽そうでした。

機能
キー

全画面表示
cmd 0

100%表示
cmd 1

200%表示
cmd 2

拡大
cmd + (何故か私の環境だとcmd shift +)

縮小
cmd -


オブジェクトをロック

オブジェクトを選択してcmd Lでロックすることができます。

ロックされたオブジェクトには南京錠アイコンが表示されます。

ロックされているオブジェクトを、選択してcmd Lでロックを解除できます。


マスク

マスクはCmd shift Mです。解除はCmd shift G(グループ解除)でできます。

a.gif


リピートグリッド

プロトタイプ作成時にダミーで、サムネイルなどを並べることがあります。

そんなときはリピートグリッドが便利です。

a.gif


手順


  1. リピートさせたい要素を選択。

  2. プロパティパネルから グリッドの繰り返し を選択。

  3. 緑色のハンドルを移動させて、要素を複製します。


便利ポイント


  • 要素同士の間隔も、同時に調整することができます。

  • 画像をドラック&ドロップすることで、サムネイルの画像を個別に変更できます。

  • テキストファイルをドラック&ドロップすることで、テキストを個別に変更することができます。

  • グリッドグループをダブルクリックすることで、書体の変更や、要素の追加など編集が可能です。


プレビュー

XDでは作ったデザインを簡単にプレビューすることができます。

ツール上だとなかなかイメージがしずらかったりするので便利です。

a.gif


まとめ

とにかく使い方が簡単で、ほとんど学習する必要がないです。

プロトタイプも高速に作れます。

今のところは私はSketchのほうが好きですが、今後のアップデートが楽しみです。