2020年3月、Adobe XDのアップデートがリリースされました。今回のアップデートにより、下記の機能が新しく登場しています。

  • プロトタイプにオーディオ組み込みが可能に
  • プロトタイプにアンカーリンクを設定できるように
  • zeroheight for Adobe XDプラグインの登場

それぞれどのような機能なのか、詳しくご紹介していきたいと思います。

プロトタイプにオーディオ組み込みが可能に

今回のアップデートにより、プロトタイプにオーディオを組み込むことができるようになりました。

アニメーション再生時のように、特定のトリガーに紐付いてオーディオを再生することができるので、幅広く活用することができそうです。

具体的には、下記のような場合に活躍するのではないでしょうか。

  • ボタン押下時などに効果音再生したい時
  • 音声を使ったサービスのプロトタイプを作成したい時

将来的に、動画の再生や、オーディオの一時停止、早送りなどの機能が追加されればさらにプロダクトの完成形に近いプロトタイプを作ることができるようになるかもしれませんね。

プロトタイプにアンカーリンクを設定できるように

アンカーリンクというのは、Webサイトでは一般的に使われていますが、同じページの特定の箇所までスクロールさせる時に使用する機能です。

これが追加されることにより、プロトタイプ上でより実際の形に近いUXを確認することができるようになります。

zeroheight for Adobe XDプラグインの登場

正確にはアップデートの内容ではありませんが、同じタイミングで発表されたのが「zeroheight for Adobe XDプラグイン」です。

どんなプラグインかというと、一言で言えばデザインシステムのスタイルガイドを作成・共有することができるプラグインとなっています。

XDで作成したアセットやコンポーネントを「zeroheight」というサービスにアップロードし、zeroheight上でスタイルガイドを作成、共有するという流れになります。

スタイルガイドは、作った後の運用や共有に結構手がかかってしまうため、zeroheightを利用すればその作業をよりスムーズに行えるようになり、デザインシステムを運用する負担を減らすことができそうです。

ただし、複数人で編集したりバージョン管理やパスワード機能などを利用するには有料プランへの登録が必要となるのでご注意ください。

デザインシステムとは?

1つのプロダクトやサービスにおいて複数のデザイナーがデザインを制作する場合、また担当者が流動的な場合などに、統一されたデザインを制作することが困難になってきます。

そこで多くの企業が取り入れているのが「デザインシステム」と呼ばれるもので、一言で言えば「デザインの原則、概念、ガイド、コンポーネントなど、デザインに関するあらゆるルールを定めたもの」となります。

1人でデザインを制作する場合や、小規模なプロジェクトではデザインシステムを作る必要はないかもしれませんが、デザインシステムについて知っておくことによってルールに基づいたデザイン制作の進め方を知ることができるため、そのメリットは大きいのではないでしょうか。

デザインシステムをあまりよく分かっていないという方は、この機会に勉強してみるといいかもしれません。