はじめに
流行りのツールを使ってる感を出したい為、Adobe XDを触ってみました。
ちなみに今年から本格的に使い出したSketchもまだ使いこなしてないです。
基本機能
Adobe XDは、UI作成のデザインモードとUI操作用のプロトタイプモードがあります。
基本操作
アートボードの作成
まずはアートボードを作成する必要があります。
この機能はsketchとほとんど同じです。
左のツールバーからアートボードツールを選択します。
ツールを選択すると、右のプロパティパネルにアートボードの候補が表示されるので選択します。
またはキャンバスをクリック&ドラックで作成します。
アートボードにグリッドを表示
アートボードを選択後、プロパティパネルの グリッド にチェックを入れます。
グリッドの色、透明度、間隔は自由に設定できます。
ベジェ曲線
XDでもPhotoshop や Illustrator同様ベジェ曲線が使えます。
Illustratorに慣れていると、操作が少し違うので違和感を少し感じるかもしれません。
個人的な感想になりますが、√より使いやすいです。
Sketchのパスはどうも使いづらいです。
アンカーポイントをダブルクリックすると、ハンドルが作成されます。
画面の拡大・縮小
バージョン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(グループ解除)でできます。
リピートグリッド
プロトタイプ作成時にダミーで、サムネイルなどを並べることがあります。
そんなときはリピートグリッドが便利です。
手順
- リピートさせたい要素を選択。
- プロパティパネルから グリッドの繰り返し を選択。
- 緑色のハンドルを移動させて、要素を複製します。
便利ポイント
- 要素同士の間隔も、同時に調整することができます。
- 画像をドラック&ドロップすることで、サムネイルの画像を個別に変更できます。
- テキストファイルをドラック&ドロップすることで、テキストを個別に変更することができます。
- グリッドグループをダブルクリックすることで、書体の変更や、要素の追加など編集が可能です。
プレビュー
XDでは作ったデザインを簡単にプレビューすることができます。
ツール上だとなかなかイメージがしずらかったりするので便利です。
まとめ
とにかく使い方が簡単で、ほとんど学習する必要がないです。
プロトタイプも高速に作れます。
今のところは私はSketchのほうが好きですが、今後のアップデートが楽しみです。