Adobe XD 自動アニメーション

カテゴリー: XDデザインblogUIデザイン オン 2019年5月6日

Adobe XDを使用したデザイン制作が広まっています。 私ももれなくAdobe XDで制作してほしいと言われるようになり、空いた時間で使ってみました。

特に気になったのは2018年末あたりからついた「自動アニメーション機能」で、画面の遷移だけでなくかなり細かなアニメーションの再現が可能になっています。

アニメーションを作るポイントは、変化する前のデザインと変化した後のデザインをそれぞれアートボードごとに用意して繋げるだけです。
これだけでadobe XDが自動的にアニメーションを繋げてくれます。 ちなみにアニメーションする部分のオブジェクトはコピーして使う必要があるようです。そうしないと関連するオブジェクトと認識できません。

最初のアートボードにデザインを作成します
オブジェクトを次のアートボードにコピーします。
アニメーションさせたいオブジェクトに変形などを加えます。
後から追加したい要素が出てきても問題ありません。

これだけの操作でハンバーガーメニューの動作を再現できます。

また、「ドラッグ」というトリガーを設定すると「スライドショー」の作成も可能です。


その他にも工夫次第でいろんなアニメーションが作れるようで多くの事例が紹介されています。 一工夫あるアニメーションは、コーダーさん、エンジニアさんのスキルやプロジェクトで求められるかという部分もあるので、どこまで作るのかというのは悩ましいですが。

正直なところ、自動アニメーションが実装される前は、数多のプロトタイピングツールはどれも似たりよったりで価格面以外でのおすすめポイントは無い状態でした。
「自動アニメーション機能」によってAdobe XDは一歩抜きに出たのでは無いかと感じるほど簡単にアニメーションが出来上がります。