このレッスンでは、Adobe XDのリピートグリッドの機能を使って、繰り返しオブジェクトを配置する手順を学びます。
Adobe XDを起動し、「ファイル」→「開く」メニューから、ダウンロードしたサンプルファイルを選択して「開く」をクリックします。すると、動画と同じサンプル画面が表示されます。
テキストオブジェクトを複製
Macではオプションキー、Windowsではaltキーを押しながら、タイトルをドラッグして複製して、テキストを修正します。このテキストエリアは幅が自動的に変わります。
繰り返すための要素を作成
長方形ツールで長方形をつくり、「線」のチェックを外します。次に、カードUIのテキストボックスをコピー&ペーストして長方形の隣に配置してから横幅のサイズを整えます。テキストにはアセットパネルからスタイルを適用します。
続けて、日付用のアイコンをアセットパネルからドラッグし、その隣にテキストツールで日付を入力して、文字スタイルを適用します。
最後に、線ツールを選択し、ガイドに合わせて横にドラッグして線を引きます。線の位置を整えたら、アセットパネルから適用するカラーを選択します。
リピートグリッドを作成
作成した要素をすべて選択した状態で、プロパティインスペクターの「リピートグリッド」ボタンを選択します。すると選択した要素がリピートグリッドになり、周囲の線が緑色に変わります。リピートグリッドの下の方に表示されている、ハンドルを掴んでドラッグすると、要素が下に複製されます。各要素間のマージンをドラッグして調整します。
リピートグリッドで繰り返し配置されたオブジェクトには、画像ファイルと、改行で区切ったテキストファイルをドラッグして、画像とテキストを一括更新します。
ボタンを作成
長方形オブジェクトを作り、角の内側にある小さな円を内側にドラッグして、角丸をつくります。アセットパネルから、ボタン用のカラーを選択し、プロパティインスペクターの「線」のチェックを外します。
ボタンのラベルテキストを入力して、ドキュメントアセットから文字スタイルを適用します。要素の位置を調整したら、グループ化します。
フッターの配置とアートボードの高さ調整
アセットパネルから、フッターのコンポーネントをドラッグし、配置します。
フッターを選択して、Macではオプションキー、Windowsではaltキーを押すと、フッターとアートボードの距離を数値で確認できます。アートボードを選択し、プロパティインスペクターの縦の数値から、確認した数値を引くと、アートボードの高さがフッターの位置に揃います。