こんにちは、Designerの松並です。
2020年6月12日、ソニー・インタラクティブエンタテインメント（SIE）より、「PS5 – THE FUTURE OF GAMING SHOW」にてPlayStation5が発表されましたね。
ゲーマーが待ちに待った次世代機。それを裏切らない、パワーを感じられる映像でした。発売が待ち遠しいです。
そして、そのすぐ後2020年6月16日にAdobe XDの2020年6月アップデートが公開されました。
さらに今回のアップデートに合わせて、Adobe製のツールのロゴも大きく変更されたようです。
周囲の枠線がなくなり、ミニマルなデザインになりました。
本記事は今回のアップデートで追加された内容を簡単にご説明させていただきたいと思います。
では参りましょう。
Table of contents
スクロールグループ
これまで画面の一部だけをスクロールさせたい場合は、複数のアートボードを作成する必要がありましたが、スクロールグループによって、画面の一部の領域がスクロールするような、フィード、リスト、カルーセル、ギャラリーなどをデザインできるようになりました。
デザイン上の任意の領域をスクロールグループとして指定することで、縦、横、または両方向にスクロールするように設定できます。
スマートフォンサイズでデザインを行う場合などは、横スクロールなどを取り入れる機会も少なくないと思うので、これでより実際のイメージに近い形でプロトタイプを作れるようになりました。
スクロールグループは3つのタイプがあり、それぞれにショートカットも用意されています。
| タイプ | ショートカット |
|---|---|
| 水平方向 | Command + Shift + H |
| 垂直方向 | Command + Shift + V |
| 水平＋垂直 | Command + Shift + D |
スタック
スタックとは、要素間の距離を保ったまま、要素の並び替えやリサイズが簡単に行える機能です。
また、要素間のマージンも、個別に調整することができ、CSSのFlexboxに似たような仕組みですね。
これでグリッドを組んでレイアウトする場合などに、より少ない操作でデザインを整えられたり、要素を入れ替えることができるようになりました。
デザイントークン
デザイントークンは、カラーや文字スタイルにカスタム名を付けられる機能で、CSSのカスタムプロパティを使ったコードを出力することができます。
デザイナーは、アセットパネル上でカラーや文字スタイルにカスタム名を追加することが可能になり、以降はそれらの名前を含んだダウンロード可能な開発者向けCSSファイルが自動的に発行されます。
開発者はそれをコピー＆ペーストするだけでプロダクトに変更を適用することができるようになります。
さいごに
いかがでしたでしょうか。
どんどんと改良されていくAdobe XDには今後も期待ですね。
さらに2020年5月19日からAdobe XD検定なるものが公開されています。
意外と知らなかった機能や、なんとなく使ってしまっている箇所が見つかるかもしれません。
こちらの検定を通して自分の理解度をチェックしてみてはいかがでしょうか。
以上、Adobe XD2020年6月アップデートの内容をご紹介させていただきました。
少しでも皆様のお役に立てれば幸いです。