【AdobeXD】XD でテキストアニメーションを実装する方法

はじめに

こんにちは、株式会社TOKOSの杉田です！
今回はAdobeXDでテキストアニメーションを実装する方法について紹介します。

クライアント様にデザインの提案をする際に、アニメーションの提案をどうしようかと考えていました。
2022年のAdobeMAXで株式会社ICS様が紹介されていた方法がとても参考になりましたので紹介します。

インタラクションデザインを得意とするウェブ制作会社ICS(アイシーエス)の技術情報メディア。HTMLやCSS、JavaScriptを中心としたフロントエンド開発の情報やウェブデザイン入門記事を掲載。

内容としてはAdobe After Effectsでテキストアニメーションを作成し、JSON（Lottie）で書き出してXDに貼り付けるような流れになります。
とても簡単でしたので是非参考にしていただければと思います。
またLottieについては下記を参照してください。

この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの魅力はもちろん、After EffectsへのAiファイルの読み込みやアニメーション作成、プラグインを利用したJSONファイルの書き出し、Webサイトでのアニメーション表示まで一連の流れをまとめています。

今回の完成予定はファーストビューでの使用想定のテキストアニメーションになります。

まずは、オブジェクトを作成していきます。
XDかIllustratorで表示させたいテキストを作成します。
今回はXDで行います。

次にオブジェクトをAfter Effectsに書き出していきます。
オブジェクトを選択した状態で「ファイル」から「書き出し」の中の「After Effects」を選択（option + command + f）

そうしたらAfter Effectsに移動します。
今からはAfter Effectsの作業に入ります。
好きなようにアニメーションを施して書き出せば良いです。
ですが、今回はAfter Effectsのデフォルトのプリセットを使用したいと思います。

画面内のオブジェクトをドラッグして選択した状態で「アニメーション」の「アニメーションのプリセットを参照」を選択

そうするとAdobe Bridge経由で選択画面に行けると思います。
そうしたら、フォルダの「Text」を選択

フォルダを開いて、フォルダの「Animate In」を選択

この中から好きなアニメーションを選択できます。
今回は「フェードアップ(単語)」を選択します。
フェードインのアニメーションですが、スペースごとに区切りで遅延がかかり表示してくれます。
またAdobe Bridgeの画面右でプレビューも見られるのでとても選びやすいかと思います。

選択するとオブジェクトにアニメーションがかかっているかと思います。
ここからイージングや他の動きをつけても良いと思います。
ここからJSONで書き出していきたいと思います。

「ウィンドウ」から「エクステンション」から「Bodymovin」を選択

書き出すJSONデータの保存先の設定をします。
右の「・・・」を選択し保存先を選んで保存

保存先を選んだら選択した状態で「Render」を選択

下部ボタンが「Done」になったら完成です。
自動でアウトライン化して書き出してくれます。

書き出しが出来たら、XDに貼り付けると表示されていないように見えますが、プレビューを見るとアニメーションがかかっているかと思います。

クライアント様にアニメーションの提案や、デザイナーとエンジニア間の認識の齟齬をなくすためにも、デザイン段階からアニメーションの実装ができるのは良いのかなと思います。
デフォルトでも多く選択できるのも良い点かなと思います。