Adobe XDでアプリのUIを作成してみた![一覧ページ編]

 2016.11.15  2017.09.20

前回はAdobe XDを使ってTOPページを作成しました。今回は以下のレシピ一覧ページを作成します。 ※記事中の画像はクリックすると拡大します。

recipe

アートボードを増やす

左パネルの「アートボード」アイコンをクリックすると、右パネルに作成したいデバイスのサイズ一覧が出現します。今回はiPhone6/7で作成しているので、iPhone6/7を選択すると、TOPページの右側にアートボードが現れます。

xd_lists01

Repeat Gird(リピートグリッド)

XDの目玉機能とも言えるのが「Repeat Gird」です。同じ要素を繰り返し表示させる場合に、簡単に複製、サイズ変更ができます。 リピートしたい要素をクリックして右パネルの「リピートグリッド」をクリックすると、要素の枠線が緑色に変わります。この枠を下に引っ張れば同じ要素が同じ間隔で複製されていきます!便利〜。

xd_lists02

リピートグリッドでのドラッグ&ドロップも秀逸で、複数の写真や改行区切りのテキストファイル(.txt)をドラッグ&ドロップすると、個々の要素にファイルが反映されるのです!
あらかじめ作成した図形の中に写真をドラッグ&ドロップすると、クリッピングマスクのように図形の形に沿って画像が表示されます。

xd_lists03

かゆいところに手が届く機能がたくさんありますね〜。

スクロールの設定

スクロールをさせたいアートボードをダブルクリックし、右パネルの「スクロール」が「垂直方向」に設定されているのを確認してから、アートボードのハンドルを下に伸ばしていくとビューポートの高さを変更することができます。右上の「プレビュー」(▶︎)ボタンでスクロールを確認することができます。画面で見える範囲が点線で区切られ、点線より下のコンテンツはスクロールしないと見えません。

xd_lists04

xd_lists04_2

次回は、いよいよ実際にプロトタイプを動かしてみます!

Pocket