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

Adobe XDをもっと使いこなすヒント！

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

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

#adobexd #protip Drag any corner in your rectangle to round all corners by the same amount. @adobexd pic.twitter.com/mDaHrHIBus

— Elaine Chao (@elainecchao) April 23, 2018

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

#adobexd #protip Hold down Opt (Mac) or Alt (Win) while dragging a corner to round a single corner of the rectangle. @AdobeXD pic.twitter.com/aJtiKkgbV3

— Elaine Chao (@elainecchao) April 24, 2018

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

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

#adobexd #protip You can also control each corner’s radius by selecting the independent corner icon and changing each one numerically. @adobexd pic.twitter.com/p7QrFgIJLS

— Elaine Chao (@elainecchao) April 25, 2018

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

#adobexd #protip The corner control icon will highlight which corner is currently being changed as you tab through the parameters in the Property Inspector. @adobexd pic.twitter.com/VVqxA8r53M

— Elaine Chao (@elainecchao) April 26, 2018

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

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

#adobexd #protip Double click any basic shape to temporarily convert to a path. If you make any edits to the shape, it’ll stay a path, which means you’ll lose your corner controls. @adobexd pic.twitter.com/oO8Gwcg3lR

— Elaine Chao (@elainecchao) April 27, 2018

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

#adobexd #protip Once you’ve finished editing your path, press Esc to exit out of edit mode and into selection mode. @adobexd pic.twitter.com/h3YgjE95hJ

— Elaine Chao (@elainecchao) April 30, 2018

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

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

#adobexd #protip Convert your Boolean groups to a single path object (Cmd+8 / Ctrl+8) to have finer grained control over your object. @adobexd pic.twitter.com/RQKFUlyWdg

— Elaine Chao (@elainecchao) May 1, 2018

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

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

#adobexd #protip You can convert text to paths as well (Cmd+8 Mac / Ctrl+8 Win), which means you can use icon fonts, etc. to serve as inspiration for app icons and other decorations. @adobexd pic.twitter.com/lnU0myD7vH

— Elaine Chao (@elainecchao) May 2, 2018

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

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

次回をお楽しみに！