Adobe XD 2021年6月の新機能まとめ

Adobe XDの新機能が2分で分かる動画を作成しましたので、まずはそちらをご覧ください。

AdobeXD 2021年6月の最新機能が2分で分かる動画を作りました！

✒️パスのアウトライン
🌘シャドウ（内側）
🌈円錐形グラデーション#Adobe #AdobeXD #adobexd_study #最速XD pic.twitter.com/9mYCIOGU4x

— えび🍤@XD芸人 (@pino_ebiebi) June 23, 2021

本記事は、こちらの動画で解説し切れなかった部分を深掘りする内容となります。是非、動画と合わせて最後まで読んでみてください！

パスのアウトライン

パスのアウトライン化が、今回のアップデートでできるようになりました！

ペンツールで適当に書いた線をアウトライン化することで

グラデーションを用いた塗り表現などが可能になります
もちろん、パスを編集することもできます

今まで、アウトライン化ができないことによってアウトラインアイコンを拡大縮小すると、比率が変わってしまう問題がありました

下図はアウトライン化していない例で、拡大しても線の設定が変化しないので、背景に対してかなり細くなっていることが確認できます

下図はアウトライン化した上で拡大した例です
こちらは背景に大きさに合わせて線も太くなります

ツールで描いたオブジェクトをアウトライン化すると、線がアウトライン化された上で分割されます

もちろんテキストに設定した線もアウトライン化できるので、簡単なフォントのカスタマイズであればAdobe XD上だけで完結できるかもしれません

アウトライン化の方法は2通りあります。

1つ目はメニューの「オブジェクト」→「パス」→「パスのアウトライン」を選択する方法です

2つ目はショートカットキーで、Macの場合は「⌘+Alt+O」Windowsの場合は「Ctrl+Alt+O」が割り当てられています。

パスのアウトライン化が可能になりましたが、動画の最後でも伝えた通りパスの編集は依然としてAdobe Illustratorの得意分野です
今後もAdobe XDの機能がAdobe Illustratorの機能を上回ることは無いです

そのため、Adobe XDで本格的なアイコンを作ることや複雑なパスの操作は行わずに、「アウトラインアイコンが拡大縮小によって比率が変化してしまうことを避ける」ために使うのが良いでしょう

シャドウ（内側）

ドロップシャドウを内側に設定できるようになりました！

これによって凹凸の凹の表現が容易になり「ニューモーフィズム」と呼ばれるようなデザインや、立体感のある表現がお手軽に作成できます

注意点として上図では、シャドウが複数設定していますが現状では「シャドウの複数設定」は不可能です

そのため下図のように塗りなしのオブジェクトにシャドウのみを設定し、それを重ねることで実現しています

「シャドウの複数設定」については以下のユーザーボイスにかなりの票数が集まっている要望なので、近いうちに実装されるかもしれません！（待ちきれないという方は是非、投票してみてください。投票数が多いと優先して機能の開発が進められるそうです）

Multiple fills, borders, and shadows

シャドウ（内側）の設定方法は、右側のパネルの「シャドウ（内側）」の項目にチェックを入れるだけです。

チェックを入れたら、あとは通常のシャドウと同じようにX軸、Y軸方向の位置とぼかし具合を設定するだけです

X軸にマイナス値を入れると右側からのシャドウ、Y軸にマイナス値を入れると下側からのシャドウを設定できます

円錐形グラデーション

この機能が今回のアップデートの目玉機能のようです（公式サイトでオシャレな感じの画像が付いています）

円錐形グラデーションは名前の通り、円錐状にグラデーションを設定できる機能です

円錐形グラデーションによって以下のような、「虹色のぐるぐる」「円形プログレスバー」「おしゃれなグラフィック表現」などが作成できるようになりました

円錐形グラデーションの設定するには、カラーパレットの上部から「円錐グラデーション」を選択します

カラーパレット上で行えるのは、グラデーションの色変更、中間点の編集です

しかし、オブジェクトにUIが追加され更に詳細な設定が可能になっています

オブジェクト上部に出現するハンドルを操作することで、グラデーション自体の回転ができます

オブジェクトの中心に出現するハンドルを操作することで、グラデーション自体の位置を移動できます

円錐形グラデーション以外にも言えることですが、Adobe XDでのグラデーションは具体的な数値での指定ができるわけではないので、正確性が必要な資料などで扱う場合には注意が必要です

以下のプログレスバーも正確に89%という訳ではなく、目分量で合わせているだけです（見れば見るほど、プログレスバーは全く89%を指してないですね……）

まとめ

今回のアップデートはデザインに重きを置いていました
特に「円錐形グラデーション」は工夫次第で、まだまだ活用方法はたくさんありそうです（今はまだできないですが、自動アニメーションで動かせるようになれば表現の幅がかなり広がりそうですね！）

アップデートの種類は少なかったものの、1つ1つにインパクトがあったので是非みなさんも触ってみてください！

最後に、これからもnoteやTwitterその他の媒体でAdobe XDやFigmaなどの情報を発信していきますので、是非フォローをお願いします！