Adobe の XD は、WEB サイトやアプリのデザインを制作するツールとしてとても使いやすく、プロトタイプツールとして、お客さんとの情報共有のツールとしても利用できるため、最近使う機会がとても増えてきました。

XD ではプロトタイプとしてページの遷移を再現することはできますが、アニメーションを付けるところまではできません。
最近の WEB デザインの傾向として、アニメーションが印象に占める割合が大きくなってきているため、コーディングに入る前にアニメーションをお客さんに確認いただきたい機会が増えてきているため、そのあたり何とかできないものかと思うようになっていました。

XD でデザインを作って、アニメーションをつけたい。それを実現してくれるのが、
「Kite Compositor」です。

公式ホームページ: Kite Compositor – Motion Design for Mac

$99 で購入する必要がありますが、20日間、無料で体験利用することができます。

Kite で XD データからアニメーションを作る方法

1. XD データをインポートする
2. データを整える
3. アニメーションの設定
4. アクションの設定
5. テスト & 動画の録画・出力

1. XD データをインポートする

XD でデザインデータを作成します

Kite で新規ドキュメントを作成し、

XD で対象ファイルを開いた状態で、 File > Import > From Adobe XD CC を選択

変換方法を設定してインポートします。

2. データを整える

インポートしたままだと、クリッピングマスクを掛けていた場合に、マスクが外れてしまうことがあるなど、崩れることがあるので、調整します。

3. アニメーションの設定

アニメーションを設定したい要素があるレイヤーを選択し、
Add Child > Basic Animation でレイヤーにアニメーションを追加します。

transformなど、アニメーションの種類を選択します。

アニメーション後の値を設定します。
アニメーション名は、あとで確認しやすいものに変更しておきます。

タイムラインの時間をスライドさせると、アニメーションの状態を確認できます。

4. アクションの設定

クリックなど、アニメーションに紐づけたいアクションをつけたい要素のレイヤーに、
Add Child > Action でアクションを追加します。

まず１つ目、Event Type で「No Event」を選択し、先程作成したアニメーションを選択します。

2つ目のアクションを追加し、Event Type で「Mouse Clicked」を選択し、
Action Type で Trigger Actions を選択し、
「+」ボタンで１つ目で設定したアクションを追加します。

5. テスト & 動画の録画・出力

ウィンドウの上にある 動画ウィンドウアイコンの「Present」ボタンで実際の動作を確認できます。

その横のビデオカメラアイコンの「Export」ボタンで、動画を録画・出力できます。

↓作ったアニメーションの動画の例