adobeXDを使ってアプリ構造を明瞭化する

ついにアプリのモックを簡単に作れるといわれているAdobeXDをインストール

してみました。

何故使ってみたくなったかというと、先週述べたアプリの完成図を描くのに字書きでは

限界があったためです。atmicDesign(先週の記事参照)的な考え方で書いていくと、何がatomなのか、何がmoleculesなのか

何がorganizmeなのかを必ずはっきり定義し分解する必要があります。

この仕分け作業を実際のワイヤーフレームと照らし合わせながらやると非常に効率が良いと考えたためです。

という訳で早速試運転がてら使ってみたのですが、第一印象は多機能の割に視覚的に優しい・従来のアプリ同様

windowsのショートカットコマンドもちゃんときいていてとにかく迷いにくく使いやすいといった所感です。

使いたての自分にも後で見て分かるように主に使うコマンドだけメモします。

以下xdメイン画面。

なにやら色々できそうですがその中でも頻度の高めなものだけ厳選しました。

デザイン機能↓

【選択】

左上の紙飛行機のようなアイコン。これをクリックした状態でオブジェクトをクリックすると

画面右にそのオブジェクトのプロパティが表示されます。オブジェクトの形や大きさ、色はこの

プロパティを使って変更することができます。

また、アートボード(アプリのページ)の背景色は、選択した状態でダブルクリックすることで変更することができます。

【図形描画】

丸・四角・三角のアイコン。これを使ってオブジェクトを作っていきます。

【テキスト入力】

「T」と描かれたアイコン。その名の通りテキストを入力する。

【アートボード追加】

折り曲がった書類のようなアイコン。アプリに必要な「画面」なるものを追加していく。

プロトタイプ機能↓

【画面遷移】

用意するもの：アートボート二枚以上

アートボートが二枚以上ある状態で作成したオブジェクト(ボタン)をダブルクリック

すると矢印の付いた青いワイヤーが追加されるので、それを遷移したいアートボードまでドラッグするだけで

画面遷移が実装できる。

アプリ全体の流れを確認したい時によく使います。

以上の機能を一通り使うことができれば簡単なモック程度は作れると思います。

この他にも複数のアートボードを掛け合わせて画面遷移もできるようになります。

無料でここまでのクオリティはさすがadobeといった感じ。