長方形ツールを使用する - Adobe XDのチュートリアル

このレッスンでは、 XD の描画ツールの中でも とてもよく使用する 長方形ツールについて説明します。 左側のツールパネルの 上から２番目にある 「長方形ツール」を選択します。 アートボード上の 長方形を描画したい位置に カーソルを合わせ、 斜めにドラッグすると、 ドラッグした分だけ 任意の大きさの長方形を 描画することができます。 正方形を描画するには、 Shift キーを押しながら ドラッグします。 先にマウス、 もしくはトラックパッドから 手を離し、 次に Shift キーから手を離します。 続いて角丸長方形の描画について 説明をします。 作成した長方形の角には、 半径編集ハンドルが表示されます。 いずれかの半径編集ハンドルを 長方形の中心に向かって ドラッグすることで 角丸長方形が描画できます。 ひとつの角丸の半径のみを調整するには、 Mac では option キー、 Windows では Alt キーを 押しながら ドラッグします。 プロパティインスペクタを使用し、 角丸の半径を 数値で指定することもできます。 長方形を 選択し、 プロパティインスペクタの 「アピアランス」にある 角丸の半径、 現在０となっている 角丸の半径のところに 10 と入力してみましょう。 return キー もしくは Enter キーを押すことで 角丸の半径がすべて 10px に編集されました。 角丸の半径を個々に編集する場合には、 ２つ並んでいるアイコンの右側、 「各角丸に異なる半径を使用」 というボタンをクリックします。 今回は順番に ０、 ５、 10、 20 と入力し、 return キーもしくは Enter キーを押します。 左上、 右上、 右下、 左下の順に 角丸の半径を編集できました。 以上、このレッスンでは 長方形、正方形、 角丸長方形の描画について紹介しました。