このレッスンでは、Adobe XD の描画ツールとレイアウト機能を使ってラベルに応じて変形するリボンをつくる方法を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。
リボンの形状を作成
サンプルファイルには、リボンのパーツとして、帯、折り返し部分の三角形、切れ込み部分の三角形、飾り用の短い長方形があらかじめ用意されています。
切れ込み部分の三角形は、菱形のアンカーポイントをひとつ削除したもので、型抜き用のパーツとして使います。短い長方形と重ねて、プロパティインスペクターの「前面オブジェクトで型抜き」を押します。
次に、型抜きした長方形と折り返し部分の三角形の位置を整え、リボンの左側の飾りになるように配置します。さらに、左側の飾りを複製し、水平方向に反転して右側の飾りにします。
レスポンシブサイズ変更を設定
リボンの幅や高さが変わった時、全体が一体として変形するように、レスポンシブサイズ変更を手動で設定します。
まず、リボンをグループ化します。そして、中央の帯を選択して、レスポンシブサイズ変更を手動にします。「高さ固定」を無効にして、上下左右の距離を固定にします。
次に、左の型抜きした長方形を選択して、レスポンシブサイズ変更を手動にします。「幅を固定」は有効に「高さ固定」は無効にして、右以外の距離を固定にします。
右の型抜きした長方形も同様に設定します。こちらは、左以外の距離を固定する点だけ異なります。
以上で、リボンのサイズ変更をしても、リボンの形が崩れなくなります。
テキストエリアの追加とパディングの指定
テキストツールで文字を入力し、用意された文字スタイルを適用します。そして、リボンの帯の上に移動して、リボンとテキストをグループ化します。
グループを選択した状態で、プロパティインスペクタからパディングを有効化します。すると、テキストエリアのサイズに合わせてリボンが変形するようになります。