Adobe XDをもっと使いこなすヒント! 第9回 シェイプの変形

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、シェイプの変形をテーマに、8つのツイートを取り上げます。

Tip 1. 長方形を角丸にする(ドラッグ操作の場合)

長方形の角を丸くするには、角の内側にある小さな青い円を内側にドラッグします。円を内側に移動するほど角丸の半径が大きくなります。XDの最新版では上のビデオから仕様が変更されており、より見やすくて操作しやすくなっています。

ひとつの角だけ丸くしたい場合は、Opt (Mac) またはAlt (Win) キーを押しながら目的の角をドラッグします。

Tip 2.長方形を角丸にする(プロパティインスペクタの場合)

プロパティインスペクタには、角の半径を入力するフィールドが用意されています。上のビデオのようにアイコンを切り替えると、4つのフィールドが表示され、それぞれの角に個別の値を指定できるようになります。

個別に角の半径を指定する場合、フォーカスされているフィールドに応じて、アイコンの角がのひとつが強調表示されます。そのため、どの角の値を入力しようとしているのか入力前に見て確認することができます。
他のプロパティインスペクタのフィールドと同様に、タブキーを使ってフィールド間を移動できるので、キー操作だけで4つの角の値を調整できます。

Tip 3. パスに変換して変形する

シェイプをダブルクリックすると、一時的にパスに変換されて編集可能になります。上のビデオでは下辺を操作して角をひとつ追加しています。一旦編集を行うと、その後の角丸の編集はできなくなります。

パス編集モードを終了するにはEscキーを押します。すると選択モードに戻ります。

Tip 4. 複合シェイプの変形

複雑な図形を作成したいときに便利なのが、ブール演算を使用した複合シェイプです。複合シェイプを作成後、さらにパスに変換して編集するには、Cmd+8 (Mac) またはCtrl+8 (Win) を使います。上のビデオのように辺を曲線にすることもできます。

おまけ. テキストのパス変換

テキストも同様にCmd+8 (Mac) またはCtrl+8 (Win) を使ってパスに変換できます。変換後にテキストの入力や修正はできないのでご注意ください。その代わり、自由にパス操作ができるようになります。


いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

POSTED ON 2018.09.13

Products Featured

  • Adobe XD

Tags

タグはありません