Adobe XDの2021年6月アップデート！新機能「シャドウ（内側）」「パスのアウトライン」「円錐形グラデーション」を使ってみる

2021年7月5日 19:00

2021年6月7日にXDのアップデート【XD41】がリリースされました。
アップデートで追加された機能は下記になります。
　①シャドウ（内側）
　②パスのアウトライン
　③円錐形グラデーション

シャドウ（内側）などは、下の図の検索入力フォームのようなニューモーフィズムデザインのくぼんだパーツも再現できます！

■ニューモーフィズムとは：ベース（背景）から要素が押し出されていたり、窪んでいたりするようなスタイルのデザイン手法

それでは追加された機能を順番に解説します。

1.シャドウ（内側）

まずは「シャドウ（内側）」です。
長方形などのオブジェクトを作成すると右側の「効果」に「シャドウ（内側）」が追加されています。

長方形にシャドウ（内側）をかけてみました。
設定項目は、x方向、y方向、B（ぼかし）など、このあたりはドロップシャドウと同様です。
カラーの設定と、透明度も変更できます。

■「ドロップシャドウ」と「シャドウ（内側）」の違う点
シャドウ（内側）は「塗り・「線」がない状態でもシャドウ効果が維持されます。（ドロップシャドウは「塗り」か「線」がないと効果がかけられません）

今回はシャドウ（内側）を使って、こちらのニューモーフィズム風の検索フォームを作成してみました。へこんでる！

構造は下記のようになっています。

■長方形1（左上内側シャドウ）：
塗りを背景色と同色にします。効果に「シャドウ（内側）」を黒っぽい色で指定します。これだけでもくぼんだ感じが出ますね。

■長方形2（ハイライト用）：
塗りはなしで、効果に「シャドウ（内側）」を白に近い色で指定します。さらにX,Yの値を長方形1とは逆方向にします。（X,Yをマイナスの値にする）

■長方形１と２をぴったり重ねると、くぼんだ感じの入力フォームができると思います。

2.パスのアウトライン

次は「パスのアウトライン」です。
線・塗りがあるオブジェクトをアウトライン化して、「線」と「塗り」のオブジェクトに分けてくれます。
例えば。。
■長方形は「塗り」と「線」のオブジェクトに分割される。
■線は線オブジェクト内で「塗り」と「線」に分けられ、デフォルトでは「塗り」が選択状態となる。

試しに線をアウトライン化してみます。
アウトライン化の方法ですが、線オブジェクトを選択した状態で、メニューの「オブジェクト＞パス＞パスのアウトライン」を選択します。

複数の線で作成したオブジェクトを拡大・縮小すると、線・角丸などのサイズが保持されているので意図しない変形をしてしまうことがあります。
そんな時に「パスのアウトライン化」をしておくことでオブジェクトの拡大・縮小もうまくいきます！

また複数の線で作成したオブジェクトをSVG形式で書き出しする際も、アウトライン化しておくと書き出したSVGの形が崩れずに拡大・縮小が行なえます。

また、SVG書き出しの際に「パスオプション：パスのアウトライン」のチェックボックスが追加されました。
これはオブジェクトが「パスのアウトライン化」されていない状態でも、書き出し時にアウトライン化してくれる機能です。
オブジェクトのデータとしては後で形を修正したいのでアウトライン化したくないが、svg書き出しの際はアウトライン化したい！といった時に便利な機能になっています。