Lesson

モバイル画面のスライド式ドロワーメニュー - 全4回

スライド式ドロワーメニュー② 繰り返し要素を配置

この動画のサンプルファイル

adobe-xdtrail-lesson-navigation-drawer-2-repeat-grid.zip (7 MB)

このレッスンでは、Adobe XDのリピートグリッドの機能を使って、繰り返しオブジェクトを配置する手順を学びます。

Adobe XDを起動し、「ファイル」→「開く」メニューから、ダウンロードしたサンプルファイルを選択して「開く」をクリックします。すると、動画と同じサンプル画面が表示されます。

テキストオブジェクトを複製

Macではオプションキー、Windowsではaltキーを押しながら、タイトルをドラッグして複製して、テキストを修正します。このテキストエリアは幅が自動的に変わります。

繰り返すための要素を作成

長方形ツールで長方形をつくり、「線」のチェックを外します。次に、カードUIのテキストボックスをコピー&ペーストして長方形の隣に配置してから横幅のサイズを整えます。テキストにはアセットパネルからスタイルを適用します。

続けて、日付用のアイコンをアセットパネルからドラッグし、その隣にテキストツールで日付を入力して、文字スタイルを適用します。

最後に、線ツールを選択し、ガイドに合わせて横にドラッグして線を引きます。線の位置を整えたら、アセットパネルから適用するカラーを選択します。

リピートグリッドを作成

作成した要素をすべて選択した状態で、プロパティインスペクターの「リピートグリッド」ボタンを選択します。すると選択した要素がリピートグリッドになり、周囲の線が緑色に変わります。リピートグリッドの下の方に表示されている、ハンドルを掴んでドラッグすると、要素が下に複製されます。各要素間のマージンをドラッグして調整します。

リピートグリッドで繰り返し配置されたオブジェクトには、画像ファイルと、改行で区切ったテキストファイルをドラッグして、画像とテキストを一括更新します。

ボタンを作成

長方形オブジェクトを作り、角の内側にある小さな円を内側にドラッグして、角丸をつくります。アセットパネルから、ボタン用のカラーを選択し、プロパティインスペクターの「線」のチェックを外します。

ボタンのラベルテキストを入力して、ドキュメントアセットから文字スタイルを適用します。要素の位置を調整したら、グループ化します。

フッターの配置とアートボードの高さ調整

アセットパネルから、フッターのコンポーネントをドラッグし、配置します。

フッターを選択して、Macではオプションキー、Windowsではaltキーを押すと、フッターとアートボードの距離を数値で確認できます。アートボードを選択し、プロパティインスペクターの縦の数値から、確認した数値を引くと、アートボードの高さがフッターの位置に揃います。