このレッスンでは、縦や横にスクロールできる、カレンダーアプリ UI のつくり方を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。
スケジュール表の作成
まず、スケジュールを配置する表を作成します。
ペーストボード上に長方形を描き、幅44px、高さ46pxに変更し、線のチェックを外して塗りだけにします。次に、長方形をリピートグリッドに変換し、右と下に適度に引き伸ばしてから、グリッドの縦方向と横方向の間隔がそれぞれ 1px になるように調整します。その後、リピートグリッド全体の幅に 629px、高さに 1174px を指定します。
これでスケジュールを配置する場所ができました。
スケジュール表の背景の作成
次は、表の背景を作成します。
リピートグリッドを覆い隠すように長方形を描きます。線のチェックを外して、塗りの色を薄いグレーにします。そして、長方形をリピートグリッドの背面に移動して、長方形とリピートグリッドをグループ化します。
作成したグループのパディングを有効にして、上下左右の値を 0 にすると、背景の長方形が前面のオブジェクトと同じ大きさになります。これで、セル間に薄いグレーの線が引かれたスケジュール表ができました。
データ用パーツの作成
ここからはスケジュール表に配置するデータ用のパーツを作成します。
まずアートボード上に任意の大きさの長方形を描き、2px の角丸を設定します。線のチェックを外し、塗りの色に水色を適用します。
続けてテキストを作成し、「MTG」と入力します。フォントに源ノ角ゴシック、font-size に 10px、種類に固定サイズテキスト、カラーに白を指定します。
テキストを長方形の上に移動して、テキストと長方形をグループ化します。グループのパディングを有効にして、上下左右に 2,4,2,4 を指定し、グループの幅に 40px、高さに 48px を指定します。
最後に、グループをコンポーネント化します。コンポーネント名は schedule__data とします。
これでスケジュールデータを書き込むパーツができました。
スケジュールデータの配置
スケジュールデータ用のパーツは、固定サイズテキストとパディングを組み合せて使用したことで、任意の高さに変更できます。インスタンスを複数作成して、スケジュール欄の上に自由に配置します。テキストも好みに応じて書き換えます。
最後に、今回作成した全てのオブジェクトを選択してコンポーネント化します。コンポーネント名は schedule__body とします。